:root {
  /*--color-maroon:#8a1538;*/
  --color-maroon     : #424242;  /*#901c3b;*/
  --color-blue       : #003c71;
  --footer-color     : #1a1a1a;    /*#115e67;*/
  --header-color     : #424242a7;  /*#115e67aa; /* #91b9a4e0;  /*#115e67cc;*/
  --ribbon-color     : var(--color-maroon);
  --link-color       : #0a0a0a;   /*#106471; /*var(--footer-color);*/
  --link-color-alpha1: #666666;   /*#10647183;*/
  --link-color-alpha2: #000;      /* #106471aa; */
  font-family        : 'cmu_brightroman','Open Sans', sans-serif;
  font-stretch       : normal;
  letter-spacing     : -0.0pt;
  background-color   : white;
  font-size          : 11pt;
}

body {
  background-color:  rgb(245, 245, 245); 
  color:             #1a1a1a;
  font-size:         108%;
  line-height:       125%;
  padding-top:       100px;
  margin-left:       50px;
  margin-right:      50px;
}

body a{
  color:                  var(--link-color);
  font-stretch:           50%;
  font-size:              100%;
  font-weight:            unset;
  font-family:            'cmu_brightsemibold';
  text-decoration:        underline;
  text-decoration-color:  var(--color-blue);
  text-decoration-style:  dotted;
  text-underline-offset:  1pt;
  word-spacing:           -0.5pt;
}

code {
  background:            #c7c7c7;
  padding:               .1rem .2rem;
  border-radius:         .2rem;
  color:                 var(--color-maroon);
  font-family:           'cmu_typewriter_textbold';
  font-weight:           unset;
}
 

header {
  display:            flex;
  position:           fixed;
  top:                0;
  left:               0;
  right:              0;
  height:             50px;
  line-height:        50px;
  background-color:   var(--header-color);
  font-size:          19pt;
  font-weight:        bold;
  color:              #fff;  /*#e8fff3;*/
  padding-left:       20px;
  border-left:        50px solid var(--ribbon-color);
  /* border-bottom: 1px rgb(125, 125, 125) solid; */
  /* border-top: 0.5px rgb(125, 125, 125) solid;  */
}
header * {
  display:            inline;
  height:             50px;
}


main{
  width: 87vw;
  margin: auto;
}

section {
  margin-left:        10px;
}
section h1 {
  margin-left:        -10px;
  padding-top:        50px;
}

section#Brief {
  margin:            auto;
  padding:           10px 5px 5px 10pt;
  border-left:       10px solid var(--ribbon-color);
  display:           flex;
  justify-content:   center;
  text-align:        left;
  align-items:       stretch;
  background-color:  rgb(221,221,221);
}
#Brief #textheader {
  width:            70vw;
  display:          grid;
  align-items:      end;
}
#Brief div p{
  align-self: center;
  padding: 0pt 10pt 0pt 2pt;
}
#Brief h1{
  margin: 0px;
  padding-top: 0px;
}


#Brief #videoclip {
  display:           flex;
  justify-content:   space-between;
  align-items:       flex-end;
  align-self:        stretch;
  width:             30vw;
  flex-direction:    column;
}
#Brief #contact {
  font-size:         initial;
  height:            3.8rem;
  border-right:      5px solid var(--ribbon-color);
  line-height:       120%;
}
#Brief #contact p{
  margin:            0pt 0pt 0pt 0pt;
  text-align:        right;
  color:             var(--footer-color);
  font-size:         medium;
}
#Brief #contact p#email {
  font-size:         inherit;
  font-family:       'cmu_typewriter_textbold';
  font-weight:       unset;
}
#Brief #news {
  height:             3.8rem;
  overflow-y:         scroll;
  overflow-x:         auto;
  border-right:       var(--ribbon-color) 5px solid;
  border-left:        var(--ribbon-color) 1px dashed;
  scrollbar-color:    var(--link-color-alpha2) var(--link-color-alpha1);
  -webkit-scrollbar   {
    width: 7px;
    background: #111;
  }
  -webkit-scrollbar-thumb {
    border-radius:        4px;
    background-color:     rgba(0, 0, 0, .5);
    -webkit-box-shadow:   0 0 1px rgba(255, 255, 255, .5);
  }
}
#Brief #textheader div#news::-webkit-scrollbar {
  width:              7px;
  background:         var(--link-color-alpha1);
}

#Brief #textheader div#news::-webkit-scrollbar-thumb {
  border-color:       rgba(0, 0, 0, 0.5);
  border-radius:      4px;
  height:             2px;
  background:         var(--link-color-alpha2);
}


h4 {
  margin-top:         5pt;
  margin-bottom:      5pt;
}

li  {
  text-indent:       -14pt;
  padding-left:      14pt;
  margin-left:       7pt;
}

#teaching li{
  margin-left:       14pt;
}


h5{
  font-size:          1.0em;
  font-weight:        bold;
  margin-bottom:      0.5em;
}

#Papers em{
  color:              #444;
  text-decoration:    none;
  font-style:         normal;
}


#Papers li::marker{
  text-indent:        -10pt;
  margin-left:        2pt;
}

#Papers h4{
  border-bottom:      1pt solid var(--color-maroon);
  border-left:        7pt solid var(--color-maroon);
  margin-left:        -7pt;
  padding-left:       7pt;
}


section#OpenSource div#freyja{
  display:            flex;
}
section#OpenSource a {
  background-color:   #8a15381f;
  display:            inline-block;
  line-height:        99%;
}

#Misc ul {
  padding-left:       7pt;
}

footer {
display         : flex;
justify-content : space-between;
padding         : 10px;
margin-top      : 20px;
background-color: var(--ribbon-color);  /*#115e67;*/
color           : #fff;                /*#fefdfa;*/
}


/* Style the tab */
.tab {
  overflow        : hidden;
  border          : 1px solid #ccc;
  background-color: #f1f1f1;
  margin-left     : 10px;
  display         : flex;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float           : left;
  border          : none;
  outline         : none;
  cursor          : pointer;
  padding         : 2px 16px;
  transition      : 0.25s;
  font-family     : inherit;
  font-size       : inherit;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--link-color-alpha2);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--link-color-alpha1);
}

/* Style the tab content */
.tabcontent {
  display:      none;
  border-top:   none;
}

#Research #videogrid {
  display              : inline-grid;
  flex-wrap            : wrap;
  /*height             : 20rem;*/
  grid-template-rows   : 9.5vw 9.5vw 7.5vw 7.0vw;
  grid-template-columns: 12vw 1fr;
  /*max-height         : 1px;*/
  grid-gap             : .2rem;
  margin-right         : 1rem;
  /*max-width          : 40vw;*/
}