/* from kinde demo */

:root {
  --g-color-black: #000;
  --g-color-white: #fff;

  --g-color-grey-50: #f6f6f6;
  --g-color-grey-600: #636363;
  --g-color-grey-700: #4d4d4d;
  --g-color-grey-900: #0f0f0f;

  --g-box-shadow: 0px 6px 12px rgba(18, 20, 23, 0.06),
    0px 15px 24px rgba(18, 20, 23, 0.07), 0px -4px 12px rgba(18, 20, 23, 0.05);

  --g-font-family: Helvetica, sans-serif;

  --g-font-size-x-small: 0.75rem; /* 12px */
  --g-font-size-small: 0.875rem; /* 14px */
  --g-font-size-base: 1rem; /* 16px */
  --g-font-size-large: 1.25rem; /* 20x */
  --g-font-size-x-large: 1.5rem; /* 24px */
  --g-font-size-2x-large: 2rem; /* 32px */
  --g-font-size-3x-large: 2.5rem; /* 40px */
  --g-font-size-4x-large: 4rem; /* 64px */

  --g-font-weight-base: 400;
  --g-font-weight-semi-bold: 500;
  --g-font-weight-bold: 600;
  --g-font-weight-black: 700;

  --g-border-radius-small: 0.5rem;
  --g-border-radius-base: 1rem;
  --g-border-radius-large: 1.5rem;

  --g-spacing-small: 0.5rem; /* 8px */
  --g-spacing-base: 1rem; /* 16px */
  --g-spacing-large: 1.5rem; /* 24px */
  --g-spacing-x-large: 2rem; /* 32px */
  --g-spacing-2x-large: 2.5rem; /* 40px */
  --g-spacing-3x-large: 3rem; /* 48px */
  --g-spacing-6x-large: 6rem; /* 96px */
}


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*
html,
body {
  font-family: var(--g-font-family);
}
*/
a {
  color: inherit;
  text-decoration: none;
}


.hero {
  background-image: url(/img/emsihero.png);
  background-size: contain;
  background-repeat: no-repeat;

  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 35rem;
  margin-top: 1em;
  justify-content: center;
  text-align: center;
}

.hero p {
  color: var(--g-color-white);
}

.hero-title {
  margin-bottom: var(--g-spacing-x-large);
}

.hero-action {
  display: inline-block;
  color: rgb(0, 53, 128);
  border-radius: var(--g-border-radius-small);
  display: inline-block;
  font-weight: var(--g-font-weight-bold);
  padding: var(--g-spacing-base);
  margin-bottom: var(--g-spacing-x-large);

  background-color: var(--g-color-black);
  color: var(--g-color-white);

}

.hero-tagline {
  margin-bottom: var(--g-spacing-3x-large);
}


.nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--g-spacing-x-large);
    padding-top: var(--g-spacing-x-large);
    width: 100%;
}

.profile-blob {
    align-items: center;
    display: grid;
    gap: var(--g-spacing-base);
    grid-template-columns: auto 1fr;
}

.avatar {
    align-items: center;
    background-color: var(--g-color-grey-50);
    border-radius: var(--g-border-radius-large);
    display: flex;
    height: var(--g-spacing-3x-large);
    justify-content: center;
    text-align: center;
    width: var(--g-spacing-3x-large);
}

.masthead p.text-heading-2 {
    color: rgb(0, 53, 128);
    font-size: var(--g-font-size-base);
    font-weight: var(--g-font-weight-semi-bold);
}

.masthead a.text-subtle {
    color: var(--g-color-grey-600);
    font-size: var(--g-font-size-x-small);
    font-weight: var(--g-font-weight-base);
}


/* Copy in index2.css */

/* Import the google web fonts you want to use */
@import url('https://fonts.googleapis.com/css?family=Comfortaa|Patua+One');

/* Card Based Layout - Base styles */
/*
body {
   background: hsl(0, 0%, 90%);
}
*/

/* Typography */

body,
button,
input,
select,
textarea {
   color: #404040;
   font-family: 'Comfortaa', Arial, sans-serif;
   font-size: 18px;
   line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-family: 'Patua One', serif;
  letter-spacing: 2px;
}

h2 {
  font-size: 1rem;
  color: #007489;
}

p {
/*
  margin-bottom: 1.5em;
  color: #898989;
 */
}

b,
strong {
   font-weight: bold;
}

dfn,
cite,
em,
i {
   font-style: italic;
}

blockquote {
   margin: 0 1.5em;
}

address {
   margin: 0 0 1.5em;
}

pre {
   background: #eee;
   font-family: "Courier 10 Pitch", Courier, monospace;
   font-size: 15px;
   font-size: 1.5rem;
   line-height: 1.6;
   margin-bottom: 1.6em;
   max-width: 100%;
   overflow: auto;
   padding: 1.6em;
}

code,
kbd,
tt,
var {
   font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
   border-bottom: 1px dotted #666;
   cursor: help;
}

mark,
ins {
   background: #fff9c0;
   text-decoration: none;
}

sup,
sub {
   font-size: 75%;
   height: 0;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
}

sup {
   bottom: 1ex;
}

sub {
   top: .5ex;
}

small {
   font-size: 75%;
}

big {
   font-size: 125%;
}

.masthead {
  background-color: rgba(245, 245, 245, 0.9);
  padding: .5rem 0;
}

/*
.masthead p, 
.masthead p a {
  color: white;
}
*/

.site-title {
   color: white;
}

img {
   display: block;
   border: 0;
   width: 100%;
   height: auto;
}


.cards {
   display: flex;
   flex-wrap: wrap;
  /* justify-content: space-between; */
  justify-content: center;
}

.card {
   background: white;
   margin: 2em;
   flex: 0 1 24%;
}

.card a {
   padding: 2px;
   color: black;
   text-decoration: none;
}

.card a:hover {
/*   box-shadow: 3px 3px 8px hsl(0, 0%, 80%); */
   text-decoration: underline;
}

.card-content {
   padding: 1.4em;
}

.card-content h2 {
   margin-top: 0;
   margin-bottom: .5em;
   font-weight: bold;
}

.card-content p {
   font-size: 80%;
}


/*
 * Ensure a better box-sizing model by using the universal
 * selector `*` and setting it to inherit. We will then
 * change the box-sizing property on the root element
 * so other elements inherit from that when it is not
 * set explicitly on a closer parent element.
 */

*,
::before,
::after {
  box-sizing: inherit; 
}

/* 
 * 1. Set the root box-sizing model that other elements
 *    will inherit if it is not set on a closer parent.
 * 2. Add a fallback-font stack that will work across
 *    every browser and device in case your custom font
 *    doesn't load, loads slowly, or doesn't have a glyph
 *    for a specific character.
 * 3. Set an accessible default font-size that will be set
 *    according to user's browser settings (usually 16px).
 */

 
html {
  box-sizing: border-box;
  font-family:
    /* Newer browsers */
    system-ui,
    /* Safari for OS X and iOS (San Francisco) */
    -apple-system,
    /* Chrome < 56 for OS X (San Francisco) */
    BlinkMacSystemFont,
    /* Windows */
    'Segoe UI',
    /* Android */
    Roboto,
    /* Basic web fallback */
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif,
    /* Emoji fonts */
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji';
  font-size: 1em;
}

/* 
 * Add smooth scrolling for users who do not turn it off.
 *  This is how you should structure media queries
 */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 
 * You wisely removed the default margin from the body,
 * but default padding is already 0 so setting that is
 * is not necessary. I like to set the min-height of the
 * body so that it always takes up the entire viewport.
 * Use the new `dvh` unit which take into account mobile
 * browser address and tab bars. Use `vh` as a fallback.
 */

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  font-family: Hoefler Text;
/*  background-color: rgb(233, 245, 248); */
}

/* 
 * Now the bar itself is called masthead, set the padding and 
 * background color. Add any other styles you want for the bar
 * like `position: sticky` to keep it stuck to the top of the
 * page.
 */
  

/*
 * Make a container right inside the masthead to limit the
 * max-width of the content. You can reuse in the page content.
 */

.container {
  /* Use any sizes you prefer here, but the min() function
     is very good for responsive containers */

  max-width: min(96%, 1140px); 
  margin: 0 auto; /* to center the container horizontally */

}

.container2 {
  padding: 0 var(--g-spacing-6x-large);
  margin: auto;
}


/* 
 * The <nav> element now called .primary-nav. Set flex and
 * the flex properties align-items and justify-content here.
 * The default flex-direction is `row` so align-items will
 * align things vertically and justify-content will align
 * horizontally. space-between value will set all the space
 * between the two child elements (the logo link and the 
 * nav-links <ul> element.
 */

.primary-nav {
  margin: 0 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 
 * Renamed the <ul> element to .nav-links. 
 * Set display: flex here too and reset the list styles.
 */
   
.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 
 * Added a class for each link (calling them .nav-link). 
 * Set some margin to keep the links away from each other
 */

.nav-links li {
  margin-left: 10px;
}

.nav-links li:first-child {
  margin-left: 0;
}

/* 
 * Set the styles on the links. It would probably be better
 * to just add a class to all the links and select them that
 * way instead though.
 */

.nav-link {
  color: rgb(0, 53, 128);
  border-radius: var(--g-border-radius-small);
  display: inline-block;
  font-weight: var(--g-font-weight-bold);
  padding: var(--g-spacing-base);
}

.btn-dark {
  background-color: var(--g-color-black);
  color: var(--g-color-white);
}

.btn-light {
  background: var(--g-color-white);
  color: var(--g-color-black);
  font-weight: 600;
}


/* 
 * Create effects for the different link states if you  want.
 * hover, focus, active, etc.
 */

.nav-link:hover {
/*  color: rgb(73, 0, 106); */
} 

/*
 * Add a screen-reader only class so that you can make
 * things invisible but still seen by screen readers
 * and web crawlers, so you get the accessibility and
 * SEO benefits of a header for the masthead while
 * still being able to just use a logo.
 */

.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(100%);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  white-space: nowrap;
}



footer {
  background-color: #222226;
  color: #AAA;
  width: 100%;
  border-top: 1px solid transparent;
}

footer .site-copyright {
  padding: 1em 1.5em;
  font-style: italic;
  font-size: .9em;
}

footer .site-copyright a:hover {
  text-decoration: underline;
}

.start-hero {

   max-width: 800px;

dt {
  padding-top: 1em;
  font-weight: bold;
}
dd {
  background:none no-repeat left top;
  padding-left: 50px;
}

dd::before {
    height: 24px;
    margin: 0 auto;
    max-height: 24px;
    max-width: 24px;
    min-height: 24px;
    min-width: 24px;
    padding-top: 12px;
    width: 24px;
/*
    content: "";
    background-repeat: no-repeat;
    background-position: center;
*/
}

dd.drm:before {
  background-image:url('/img/icons.svg#use-drm');
}

dd.lms:before {
  background-image:url('/img/icons.svg#use-lms');
}

}