.bodyfont {
   font-family:      'Lexend', sans-serif;
   font-weight:      300;
   font-style:       normal;
}

.headerfont {
   font-family:      'Lexend', sans-serif;
   font-weight:      600;
   font-style:       normal;
}

:root {
   color-scheme: light dark;
   --main-text:     #000000;
   --header-text:   #FFFFFF;
   --accent-color:  #FF8300;
   --accent2-color: #DF0202;
   --bkg:           #3E3F66;
   --text-bkg:      #F5F5FB;
   --card-bkg:      #F5F5FB;
   --card-width:    500px;
}

@media (prefers-color-scheme: dark) {
   :root {
     --main-text:     #fffddb;
     --header-text:   #FFFFFF;
     --accent-color:  #FF8300;
     --accent2-color: #9F0C0C;
     --bkg:           #363646;
     --text-bkg:      #000000;
     --card-bkg:      #000000;
   }
}

body {
   color:            var(--main-text);
   background-color: var(--bkg);
   display:          flex;
   flex-direction:   column;
   flex-wrap:        nowrap;
   gap:              0;
   justify-content:  flex-start;
   align-items:      stretch;
   margin:           auto;
   max-width:        calc(2.2 * var(--card-width));
   /*background-color: var(--bkg-color); */
   /*background-color: #fff;
   font-size: clamp(100%, 1rem + 2vw, 24px);
   background-image:
   linear-gradient(#abced4 .1em, transparent .1em),
   linear-gradient(90deg, #eee .1em, transparent .1em);
   background-size: 2.1em 2.1em;*/
   /*background-image: linear-gradient(white 2px, transparent 2px),
   linear-gradient(90deg, white 2px, transparent 2px),
   linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
   linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
   background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
   background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;*/
}

header {
   display:          flex;
   align-items:      baseline;
   flex-wrap:        wrap;
   min-height:       4rem;
   margin-top:       1rem;
   padding-left:     1rem;
   padding-right:    1rem;
   font-size:        1.7rem;
   color:            var(--header-text);
   > span {
      white-space:   nowrap;
   }
   .nav-title { 
      flex-grow:     1; 
      font-size:     1.5em;
      font-weight:   750;
      padding:       .3rem;
   }
   .nav-subtitle { 
      padding:       .3rem;
   }
   a {
      color:         var(--header-text);
   }
}

nav {
   display:          flex;
   flex-flow:        row wrap;
   justify-content:  flex-start;
   align-items:      baseline;
   gap:              0.1rem 2.2rem;
   font-size:        2.0rem;
   padding-left:     1rem;
   padding-right:    1rem;
   a {
      color:         var(--header-text);
      padding:       .3rem;
   }
}

main {
   display:          flex;
   flex-flow:        row wrap;
   justify-content:  space-around;
   align-items:      center;
   font-size:        1.2rem;
   gap:              30px 30px;
   padding:          1rem;
}

a { 
   text-decoration: none;
   color: var(--accent-color);
   transition: 0.3s;
}
a:hover, a:active {
   color: var(--accent2-color);
   transition: 0.3s;
}

.intro {
   flex:             1 100%;
   padding:          0rem 1rem 0rem 1rem;
   background-color: var(--text-bkg);
   transition:       0.3s;
   border-radius:    15px;
   box-shadow:       0 4px 8px 0 rgba(1,1,1,.5);
   h1 { font-size:   1.4em; }
   h2 { font-size:   1.17em; }
   h3 { font-size:   1em; }
}

figure {
   display:          flex;
   flex-flow:        column nowrap;
   gap:              0.2rem;
   margin:           0.2rem;
   img, video { 
         max-width:  100%;
         object-fit: scale-down; 
   }
}

figcaption {
   font-family:      'Lexend', sans-serif;
   font-weight:      400;
   font-size:        1.1rem;
   text-align:       center;
   padding-left:     2rem;
   padding-right:    2rem;
}

.rhs {
   float:            right;
   margin:           1rem;
}
.lhs {
   float:            left;
   margin:           1rem;
}

a.card {
   flex:             1 47%;
}
div.card {
   width:            var(--card-width);
   height:           calc(0.7 * var(--card-width));
   box-shadow:       0 4px 8px 0 rgba(1,1,1,.5);
   transition:       0.3s;
   border-radius:    15px;
   color:            var(--main-text);
   background-color: var(--card-bkg);
   h1 {
      text-align:       center;
      font-size:        1.4em;
      padding:          0.6em;
      margin:           0;
      height:           calc(0.1 * var(--card-width) - 1.2rem);
   }
}
div.card:hover {
   color:            var(--accent2-color);
   box-shadow:       0 8px 16px 0 rgba(1,1,1,.8);
}


.cardcontent {
   display:          flex;
   flex-flow:        row;
   justify-content:  space-between;
   align-items:      stretch;
   height:           calc(0.6 * var(--card-width) - 1.2rem);
}

.visual {
   flex:             1 1 calc(0.5 * var(--card-width));
   padding:          0.6rem;
   display:          flex;
   flex-flow:        column;
   align-items:      center;
   justify-content:  center;
   img {
      width:         100%;
      height:        100%;
      object-fit:    contain;
   }
}

.description {
   flex:             1 1 calc(0.5 * var(--card-width));
   padding:          .6em;
   vertical-align:   middle;
}

footer {
   display:          flex;
   flex-flow:        column wrap;
   justify-content:  flex-start;
   align-items:      center;
   font-size:        1rem;
   color:            var(--header-text);
   p { margin:       0.2rem; }
}

dl.group {
   display: grid;
   grid-template-columns: 15em auto;

   dt {
      grid-column-start: 1;
      margin:            0;
      padding:           0.2em;
      padding-right:     0.4em;
      text-align:        right;
   }

   dd {
      grid-column-start: 2;
      margin:            0;
      padding:           0.2em;
      padding-left:      0.4em;
   }
}

.pubentry {
  padding-left: 3rem;
  text-indent: -3rem;
}

.video-display {
   margin:        0.2em;
   object-fit:    scale-down;
}

button {
   border:               0px;
   border-radius:        8px;
   padding:              0.5em; 
   font-size:            1em;
   white-space:          nowrap;
   transition:           0.3s;
   color:                var(--header-text);
   background-color:     var(--accent-color);
   box-shadow:           var(--accent-color) 0 2px 4px;
}
.select:hover {
   transform:            translateY(-3px);
   background-color:     var(--accent2-color);
   box-shadow:           var(--accent2-color) 0 2px 4px;
}
.selected {
   color:                var(--header-text);
   background-color:     var(--bkg);
   box-shadow:           var(--bkg) 0 2px 4px;
}
.selected:hover {
   color:                var(--accent2-color);
   transform:            translateY(-3px);
}
.buttonlist {
   list-style-type:      none;
   li { padding:         0.3em; }
}

@media only screen and (max-width: 500px) {
   html { font-size: 12px; }
   header { font-size: 1.2rem; }
   nav    { font-size: 1.2rem; }
   main   { font-size: 1.1rem; }
   :root { --card-width:     350px; }
   .rhs, .lhs { 
      float:        none; 
      width:        90% !important;
      margin-right: auto; 
      margin-left:  auto;
   } 
   dl.group { grid-template-columns: 12em auto; }
}