@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/************************************/
/*        Course Page Style         */
/************************************/

#course-header {
  background: linear-gradient(315deg, var(--mint-green-color) 30%, var(--medium-lavender-color) 30%);
}

#course-header .page-section.wider {
  margin-top: 1.5em;
  margin-bottom: 1em;
}


/************************************/
/*      Course Overview Style       */
/************************************/

#course .text {
  text-align: left;
}

#course .info {
  margin-bottom: 1em;
}

#course .info .text {
  line-height: 1.5em;
}

#course .overview {
  max-width: 38em;
}

#course .heading:not(:first-child) {
  margin-top: 2em;
}

#course .splash-image img {
  max-width: 400px;
  width: 100%;
  margin-top: 1em;
}

#course .goals {
  max-width: 32em;
  width: 100%;
  margin-top: 2em;
}

#course .goals ul {
  margin-left: 0.95em;
  text-align: left;
}


/************************************/
/*      Resources Section Style     */
/************************************/

#course .resources {
  margin-top: 2em;
}

#course .resources .item {
  margin-right: 2em;
  margin-top: 1em;
}

#course .resources a {
  margin-right: 0.25em;
  min-width: 5em;
}

#course .resources .icon {
  font-size: 2.75em;
}

#course .resources .title {
  font-size: 0.85em;
}

#course .resources .text {
  font-size: 0.8em;
  margin-bottom: 1em;
  text-align: left;
  max-width: 12em;
}


/************************************/
/*      Syllabus Section Style      */
/************************************/

#course .syllabus-section {
  margin-top: 2em;
  -webkit-region-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

#course ul {
  margin-left: 0.95em;
  text-align: left;
  max-width: 41em;
}

#course .syllabus-section a {
  overflow-wrap: break-word;
}


/************************************/
/*      Readings Section Style      */
/************************************/

#course .readings .item {
  margin-top: 2em;
}

#course .readings .item img {
  max-height: 300px;
  height: 100%;
}

#course .readings .item .text {
  margin-top: 0.5em;
  text-align: left;
}


/************************************/
/*      Course Schedule Style       */
/************************************/

#course .schedule .heading {
  background: var(--mint-green-color);
  padding: .6em 1.2em .6em 1.2em;
  margin-top: 2em;
}

#course .schedule .week {
  padding: 1.2em;
  -webkit-region-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

#course .schedule .week.odd {
  background: var(--light-mint-color);
}

#course .schedule .week.even {
  background: var(--lighter-mint-color);
}

#course .schedule .week.odd.off {
  background: var(--light-gray-color);
}

#course .schedule .week.even.off {
  background: var(--lighter-gray-color);
}

#course .schedule .week-number {
  font-size: 0.8em;
  margin-bottom: 0.25em;
}

#course .schedule .meets-on {
  font-size: 0.7em;
  margin-bottom: 0.3em;
}

#course .schedule .topic-title {
  font-size: 0.95em;
  font-weight: 500;
  margin-bottom: 0.25em
}

#course .schedule .topic-subtitle {
  font-style: italic;  
  font-size: 0.85em;
}

#course .schedule .topics {
  font-size: 0.85em;
  margin-top: 1em;
}

#course .schedule .subheading {
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.5em;
  margin-top: 1em;
}

#course .schedule ul.weekly-readings {
  font-size: 0.85em;
  margin-left: 0.95em;
  text-align: left;
  line-height: 1.5em;
  max-width: none;
}

#course .schedule .assignment {
  font-size: 0.85em;
  line-height: 1.5em;
}


/************************************/
/*       Syllabus Print Style       */
/************************************/


@media print {
  @page { margin: 1in;}
  
  #main-container {
    width: 100%;
  }
  
  #main-container .inner-container {
    margin: 0em;
  }
    
  #header {
    display: none;
  }

  #course-header .page-section.wider,
  #course-header .summary {
    margin-top: 0em;
    margin-bottom: 0em;
  }

  #course-header .summary .heading,
  #course-header .summary .subheading,
  #course .heading,
  #course .text {
    color: #000000;
  }
  
  #course a {
    font-weight: inherit !important;
    color: #000000 !important;
  }
  
  #course .page-section.wider {
    margin-top: 0.5em;
  }
  
  #course .overview {
    max-width: none;
  }

  #course .splash-image img,
  #course .resources {
    display: none;
  }
  
  #course .readings .item img {
    height: 220px;
  }
  
  #course .readings .item .text {
    margin-top: 0.5em;
    font-size: 0.8em;
    line-height: 1.2em;
  }
  
  #course .schedule .heading {
    padding: 0em;
    margin-bottom: 0.25em;
  }
  
  #course .schedule .week {
    padding: 0.75em;
    border: 1px solid var(--black-color);
  }
  
  #footer {
    display: none;
  }

}
/**************************************************************/
/*  Flexbox Ultralight                                        */
/*  Version 1.0                                               */
/*  by Johanna Brewer                                         */
/*  Copyright 2019                                            */
/*  Download: https://github.com/deadroxy/flexbox-ultralight  */
/**************************************************************/

.flexbox {
  display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
  display: -moz-box;      /* OLD: Firefox (buggy) */
  display: -ms-flexbox;   /* MID: IE 10 */
  display: -webkit-flex;  /* NEW, Chrome 21+ */
  display: flex;          /* NEW: Opera 12.1, Firefox 22+ */
}

.flexbox.horizontal {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.flexbox.horizontal-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse; 
  -moz-box-orient: horizontal;
  -moz-box-direction: reverse; 
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flexbox.vertical {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flexbox.vertical-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse; 
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.flexbox.center {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.flexbox.start {
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.flexbox.end {
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.flexbox.stretch {
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.flexbox.flex-0 {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0;
  -ms-flex: 0;
  flex: 0;
}

.flexbox.flex-1 {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flexbox.wrap {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexbox.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flexbox.justify-space-between {
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}

.flexbox.justify-space-around {
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
}
@font-face {
  font-family: 'FontAwesome';
  src: url(/type/fontawesome/fa-regular-400.eot);
  src: url(/type/fontawesome/fa-regular-400.eot?#iefix) format('embedded-opentype'),
       url(/type/fontawesome/fa-regular-400.woff2) format('woff2'),
       url(/type/fontawesome/fa-regular-400.woff) format('woff'),
       url(/type/fontawesome/fa-regular-400.ttf) format('truetype'),
       url(/type/fontawesome/fa-regular-400.svg#fontawesome) format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'FontAwesomeSolid';
  src: url(/type/fontawesome/fa-solid-900.eot);
  src: url(/type/fontawesome/fa-solid-900.eot?#iefix) format("embedded-opentype"),
       url(/type/fontawesome/fa-solid-900.woff2) format("woff2"),
       url(/type/fontawesome/fa-solid-900.woff) format("woff"),
       url(/type/fontawesome/fa-solid-900.ttf) format("truetype"),
       url(/type/fontawesome/fa-solid-900.svg#fontawesome) format("svg");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'FontAwesomeBrands';
  src: url(/type/fontawesome/fa-brands-400.eot);
  src: url(/type/fontawesome/fa-brands-400.eot?#iefix) format('embedded-opentype'),
       url(/type/fontawesome/fa-brands-400.woff2) format('woff2'),
       url(/type/fontawesome/fa-brands-400.woff) format('woff'),
       url(/type/fontawesome/fa-brands-400.ttf) format('truetype'),
       url(/type/fontawesome/fa-brands-400.svg#fontawesome) format('svg');
  font-weight: 400;
  font-style: normal;
}
/************************************/
/*           Footer Style           */
/************************************/

#footer {
  background: var(--black-color);
  color: var(--white-color);
  font-size: 1em;
  height: 8em;
  margin-top: 4em;
}

#footer-content {
  height: 8em;
  width: 100%;
}

@media (min-width:72em) {
  #footer-content {
    width: 72em;
  }
}

#footer-content .left,
#footer-content .right {
  font-size: 0.85em;
}

#footer-content .left {
  margin-left: 1.2em;
}

#footer-content .right {
  margin-right: 1.2em;
}

#footer-content .right .social-item {
  margin-left: 1em;
  font-size: 1.8em;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-size: 12pt;
  -webkit-text-size-adjust:none;
  -moz-text-size-adjust:none;
  -ms-text-size-adjust:none;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}

#site-container {
  position: relative;
  width: 100%;
  height: 100%;
  height: auto !important;
  min-height: 100%;
  font-family: "Rubik", "FontAwesomeBrands", "FontAwesomeSolid", "FontAwesome";
  font-weight: 400;
  background: var(--white-color);
}


/************************************/
/*           Link Style             */
/************************************/

a {
  color: var(--hot-pink-color);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  cursor: pointer;
  color: var(--bright-orange-color);
  text-decoration: none;
}
/************************************/
/*          Header Style            */
/************************************/

#header {
  background-color: var(--black-color);
  height: 2.5em;
  z-index: 100;
}

#header-content {
  height: 2.5em;
  width: 100%;
}

@media (min-width:72em) {
  #header-content {
    width: 72em;
  }
}

#header-content a.logo {
  color: var(--white-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.2em;
  margin-left: 1.3em;
}

#header-content a.item {
  color: var(--white-color);
  text-decoration: none;
  font-size: .85em;
  margin-right: 1.1em;
}

#header-content a.item.last {
  margin-right: 1.9em;
}

#header-content a.item:hover {
  cursor: pointer;  
  color: var(--hot-pink-color);
}

#header-content a.item.selected {
  color: var(--hot-pink-color);
}

#header-content a.item:active {
  color: var(--bright-orange-color);
}

#header-content #veggieburger {
  display: none;
}

#header-content #veggieburger a {
  color: var(--white-color);
  font-size: 1.5em;
  line-height: 1.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#header-content #veggieburger a:hover {
  text-shadow: var(--bright-orange-color) 0px 0px 100px;
}

#veggieburger-menu {
  display: none;
  background-color: var(--black-color);
  color: var(--white-color);
  font-size: .85em;
  width: 100%;
  padding-top: 0.4em;
  padding-bottom: 0.8em;
  position: absolute;
  top: 40px;
  z-index: 10;
}

#veggieburger-menu a {
  color: var(--white-color);
  text-decoration: none;
  margin-right: 1.2em;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

#veggieburger-menu a:hover {
  cursor: pointer;  
  color: var(--hot-pink-color);
}

#veggieburger-menu a:active {
  color: var(--bright-orange-color);
}

#veggieburger-menu a.selected {
  color: var(--hot-pink-color);
}

@media (max-width:46em) {
  #header-content #full-menu {
    display: none;
  }
  
  #header-content #veggieburger {
    display: inherit;
  }
}

@media (min-width:46em) {
  #veggieburger-menu {
    display: none !important;
  }
}
/************************************/
/*         Home Page Style          */
/************************************/

#welcome-section {
  background: var(--mint-green-color);
}

#welcome-section .welcome-image img {
  max-width: 555px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

#welcome-section .welcome {
  max-width: 34em;
  width: 100%;
  margin-top: 1em;
  margin-bottom: 3em;
}

#welcome-section .welcome .marquee {
  font-weight: 500;
  font-size: 2.3em;
  line-height: 1.3em;
  margin-bottom: 0.3em;
  color: var(--black-color);
}

#welcome-section .welcome .subtitle {
  font-weight: 500;
  font-size: 1.15em;
  color: var(--black-color);
}

#welcome-section .welcome .text {
  font-size: 1.1em;
  line-height: 1.6em;
  color: var(--black-color);
  margin-top: 1.8em;
  margin-bottom: 1.8em;
}

#welcome-section .welcome a.social-item:not(:first-child) {
  margin-left: 0.5em;
}

#welcome-section .welcome a.social-item {
  font-size: 2em;
  text-decoration: none;
  color: var(--hot-pink-color);
}

#welcome-section .welcome a.social-item:hover {
  color: var(--pale-yellow-color);
}


/************************************/
/*        Bio Section Style         */
/************************************/

#bio-section .bio {
  margin-top: 2em;
  margin-bottom: 2em;
  max-width: 37em;
  width: 100%;
}

#bio-section .bio .heading {
  font-weight: 500;
  font-size: 1.5em;
  color: var(--black-color);
}

#bio-section .bio .text {
  font-size: 1em;
  line-height: 1.6em;
  color: var(--black-color);
  margin-top: 0.8em;
}

#bio-section .logos {
  max-width: 26em;
  width: 100%;
}

#bio-section .logos a {
  margin: 0.8em;
}


/************************************/
/*        Book Section Style        */
/************************************/

#book {
  background: linear-gradient(225deg, var(--hot-pink-color) 42%, var(--pale-yellow-color) 42%);
  margin-top: 1em;
  margin-bottom: 2em;
}

#book .book-image img {
  max-width: 444px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

#book .book-details {
  max-width: 37em;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 3em;
}

#book .book-details .title {
  font-weight: 500;
  font-size: 1.8em;
  line-height: 1.1em;
  color: var(--black-color);
}

#book .book-details .subtitle {
  font-weight: 500;
  font-size: 1.15em;
  color: var(--black-color);
  margin-top: 0.4em;
}

#book .book-details .subheading {
  font-weight: 400;
  font-size: 0.9em;
  color: var(--black-color);
  margin-top: 0.4em;
}

#book .book-details .text {
  font-size: 0.95em;
  line-height: 1.6em;
  color: var(--black-color);
  margin-top: 1.6em;
}

#book .book-details .book-buttons {
  margin-top: 2em;
}

#book .book-details .book-buttons a {
  margin-right: 1em;
  border: 3px solid var(--hot-pink-color);
  font-weight: 500;
  font-size: 1em;
  padding: 0.5em 0.75em 0.5em 0.75em;
  text-align: center;
}

#book .book-details .book-buttons a:hover{
  background: var(--hot-pink-color);
  color: var(--white-color);
  mix-blend-mode: multiply;
}

/************************************/
/*      Contact Section Style       */
/************************************/

#contact .contact-overview {
  margin-bottom: 2em;
  max-width: 30em;
  width: 100%;
}

#contact .contact-overview .heading {
  font-weight: 500;
  font-size: 1.5em;
  color: var(--black-color);
}

#contact .contact-overview .text {
  font-size: 1em;
  line-height: 1.6em;
  color: var(--black-color);
  margin-top: 0.8em;
}

#contact .contact-details {
  max-width: 30em;
  width: 100%;
}

#contact .contact-details .text {
  font-size: 1em;
  line-height: 1.6em;
  color: var(--black-color);
}

#contact .contact-details .text:first-child{
  margin-right: 3em;
  margin-bottom: 2em;
}

#contact .contact-details a.social-item:not(:first-child) {
  margin-left: 0.5em;
}

#contact .contact-details a.social-item {
  font-size: 1.4em;
  text-decoration: none;
  color: var(--hot-pink-color);
}

#contact .contact-details a.social-item:hover {
  color: var(--bright-orange-color);
}


/************************************/
/*        News Section Style        */
/************************************/

#news-section .heading {
  font-weight: 500;
  font-size: 1.5em;
  color: var(--white-color);
  padding: 0.85em;
  background: linear-gradient(315deg, var(--mint-green-color) 20%, var(--medium-lavender-color) 20%);
  margin-bottom: 1.75em;
}

#news-section .news-items {
  margin-left: 1em;
  margin-right: 1em;
}

#news-section .item {
  margin-bottom: 1.75em;
  max-width: 30em;
  -webkit-region-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

#news-section .item .date {
  color: var(--gray-color);
  font-size: 0.9em;
  font-weight: 500;
  min-width: 6em;
  line-height: 1.5em;
  margin-top: 0.3em;
  margin-bottom: 0em;
}

#news-section .item .description {
  font-size: 1em;
  color: var(--black-color);
  line-height: 1.6em;
  text-align: justify;
}

#news-section img {
  max-width: 480px;
  width: 100%;
  margin-top: 1em;
}
#house .caption {
  font-size: .9em;
  color: var(--gray-color);
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 3em;
  text-align: center;
}

#house img {
  max-width: 100%;
}

#house img.two-up {
  max-width: 94%;
}
a.sm2_button {
  position:relative;
  display:inline-block; /* If you worry about old browser bugs, Firefox 2 might not like this and may need -moz-inline-box instead. :D */
  width:17px;
  height:18px;
  min-width:17px;
  min-height:18px;
  text-align:center;
  line-height: 20px;
  /* and, a bit of round-ness for the cool browsers. */
  border-radius:6px;
  margin-top:-1px; /* vertical align tweak */
  color: var(--white-color);
  font-size: 10px;
  text-decoration: none;
  margin-right: 0.5em;
  padding-left: 1px;
}

a.sm2_button:before {
  content: "\25B6 \FE0E";  
}

a.sm2_button.sm2_paused:before{
  content: "=";
  font-weight: 700;
  font-size: 16px;
  line-height: 17px;
}

a.sm2_button.sm2_paused {
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
}

a.sm2_button:focus {
  outline:none; /* maybe evil, but don't show the slight border outline on focus. */
}

a.sm2_button {
  background-color:var(--medium-lavender-color);
}

a.sm2_button.sm2_playing {
  background-color:#71D371
}

a.sm2_button.sm2_paused {
  background-color:var(--gray-color);
}

@media(hover: hover) and (pointer: fine) {
  a.sm2_button:hover,
  a.sm2_button.sm2_playing:hover,
  a.sm2_button.sm2_paused:hover {
    background-color:var(--bright-orange-color);
  }
}
/************************************/
/*        Music Header Style        */
/************************************/

#music-header {
  background: linear-gradient(315deg, var(--pale-yellow-color) 20%, var(--bright-orange-color) 20%);
}

#music-header .page-section.wider {
  margin-top: 0.7em;
  margin-bottom: 0.2em;
}

#music-header .summary a {
  color: var(--white-color);
}

#music-header .summary a:hover {
  color: var(--pale-yellow-color);
}


/************************************/
/*        Cover Flow Styles         */
/************************************/

.flow-container {
}

.flow-item  {
  margin-bottom: 0.8em;
  margin-left: 1.2em;
  margin-right: 1.2em;
  max-width: 152px;
}

.flow-item .image.square {
  min-width: 150px;
  min-height: 150px;
  max-width: 150px;
  max-height: 150px;
  border: 1px solid #CCCCCC;
}

.flow-item .image.square:hover {
  cursor: pointer;
  border: 1px solid var(--hot-pink-color);
}

.flow-item .image.square.empty {
  background: var(--gray-color);
  text-align: center;
  line-height: 4.75em;
  font-size: 2em;
  color: var(--white-color);
}

.flow-item .image.square.empty::after {
  content: "?";
}

.flow-detail {
  display: none !important;
  width: 100%;
  background: #FAF9FA; /* Probably not... */
  padding: 2em;
  margin-bottom: 1.8em;
  margin-right: 1.2em;
  margin-left: 1.2em;
  border: 1px dotted var(--gray-color);
}

.flow-detail hr {
  margin-bottom: 1em;
}

.flow-detail .image.square {
  min-width: 300px;
  min-height: 300px;
  max-width: 300px;
  max-height: 300px;
  border: 1px solid #999999;
}

.flow-detail .image.square.empty {
  background: var(--gray-color);
  text-align: center;
  line-height: 6.25em;
  font-size: 3em;
  color: var(--white-color);
}

.flow-detail .image.square.empty::after {
  content: "?";
}

.flow-detail .right-column {
  max-width: 300px;
}

.slug {
  width: 1.1em;
  text-align: right;
  margin-right: 0.6em;
  color: var(--gray-color);
}

@media (max-width:30em) {
  .flow-detail {
    padding: 1.2em;
    margin-right: 0em;
    margin-left: 0em;
  }
  
  .flow-detail .image.square {
    display: none !important;
  }
}


/************************************/
/*         Music Show Style         */
/************************************/

.text.smaller.double-spaced .flexbox {
  margin-bottom: 0.6em;
}

.right-column {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0;
  -ms-flex: 0;
  flex: 0;
  margin-bottom: 1em;
}

.right-column .image.square {
  min-width: 300px;
  min-height: 300px;
  max-width: 300px;
  max-height: 300px;
  margin-bottom: 1.1em;
}

.right-column .image.square img {
  width: 100%;
  height: auto;
}

.music .right-column .text.smaller {
  min-width: 300px;
}

.music hr {
  margin-top: .1em;
  margin-bottom: .7em;
}

@media (max-width:30em) {
  .right-column {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  
  .right-column .image.square {
    min-width: 200px;
    min-height: 200px;
    max-width: none;
    max-height: none;
    width: 100%;
  }
}
/************************************/
/*        Global Page Style         */
/************************************/

#main-container {
  width: 100%;
  max-width: 56.25em;
}

@media (min-width:59.25em) {
  #main-container {
    width: 56.25em;
  }
}

#main-container .inner-container {
  margin-left: 1.5em;
  margin-right: 1.5em;
  margin-top: 4em;
  margin-bottom: 3em;
}

.page-section {
  max-width: 62em;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
}

.page-section.wider {
  max-width: 72em;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
}

.page-section.widest {
  max-width: 80em;
}

.page-section.flush-bottom {
  margin-bottom: 0em;
}

.page-section .inner {
  margin-right: 2em;
  margin-left: 2em;
}


/************************************/
/*        Text Layout Style         */
/************************************/

.heading {
  font-size: 1.1em;
  font-weight: 500;
  color: var(--black-color);
}

.heading:not(:first-child) {
  margin-top: 3em;
}

.heading.first {
  margin-top: 0em;
}

.subheading {
  font-size: .9em;
  font-weight: 500;
  color: var(--black-color);
  line-height: 1.5em;
  margin-top: 1.5em;
}

.subheading.first {
  margin-top: 0em;
}

.subheading.caption {
  margin-top: 0.5em;
  text-align: center;
}

.text {
  font-size: .9em;
  font-weight: 400;
  color: var(--black-color);
  line-height: 1.5em;
  text-align: justify;
}

.text.light,
.subheading.light {
  color: var(--gray-color);
}

.text.smaller {
  font-size: .8em;
}

.text p:not(:first-child) {
  margin-top: 1.5em;
}

.text.smaller p:not(:first-child) {
  margin-top: 1em;
}

hr {
  border: 0px;
  border-bottom: 3px solid var(--black-color);
  height: 3px;
}


/************************************/
/*        Page Header Style         */
/************************************/

.summary {
  margin-top: 2em;
  margin-bottom: 2em;
  max-width: 46em;
  width: 100%;
}

.summary .heading {
  font-weight: 500;
  font-size: 1.5em;
  color: var(--white-color);
}

.summary .subheading {
  font-weight: 500;
  font-size: 1em;
  color: var(--white-color);
  margin-top: 0.5em;
}

.summary .text {
  font-size: 1em;
  line-height: 1.6em;
  color: var(--white-color);
  margin-top: 0.8em;
}

.summary .text.smaller {
  font-size: 0.9em;
  line-height: 1.5em;
}

a.boldwhite {
  color: var(--pale-yellow-color);
  font-weight: 700;
}

a.boldwhite:hover {
  color: var(--bright-orange-color);
  font-weight: 700;
}


/************************************/
/*          Project Style           */
/************************************/

.initiatives .item {
  margin-top: 3em;
}

.initiatives .item.first {
  margin-top: 2em;
}

.initiatives .item.padded-bottom {
  margin-bottom: 2em;
}

.initiatives .item img {
  max-width: 460px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  margin-top: 1em;
  margin-bottom: 1em;
}

.initiatives .item .text-section {
  max-width: 32em;
  width: 100%;
}

.initiatives .item .title {
  font-weight: 500;
  font-size: 1.2em;
  color: var(--black-color);
  text-decoration: none;
}

.initiatives .item .subtitle {
  font-weight: 400;
  font-size: 0.9em;
  color: var(--gray-color);
  margin-top: 0.5em;
}

.initiatives .item .description {
  font-size: 0.9em;
  line-height: 1.5em;
  color: var(--black-color);
  margin-top: 1.5em;
}

.initiatives .item .description p:not(:first-child) {
  margin-top: 1em;
}
/************************************/
/*       Portofolio Page Style      */
/************************************/

#portfolio-header {
  background: linear-gradient(315deg, var(--bright-orange-color) 30%, var(--hot-pink-color) 30%);
}

#portfolio-header .page-section.wider {
  margin-top: 0.7em;
  margin-bottom: 0.2em;
}

#portfolio-see-more {
  background: linear-gradient(315deg, var(--hot-pink-color) 70%, var(--bright-orange-color) 70%);
  margin-bottom: -4em;
}

/************************************/
/*     Publications Page Style      */
/************************************/

#publications-header {
  background: linear-gradient(315deg, var(--medium-lavender-color) 30%, var(--loud-purple-color) 30%);
}

#publications-header .page-section.wider {
  margin-top: 1.5em;
  margin-bottom: 1em;
}

#publications strong {
  font-weight: 500;
}

#publications .item {
  margin-top: 1.75em;
  -webkit-region-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

#publications .item.first {
  margin-top: 0em;
}

#publications .item .description {
  font-size: 0.85em;
  color: var(--black-color);
  line-height: 1.5em;
}

#publications hr {
  margin-top: .1em;
  margin-bottom: 1.2em;
}

#publications a {
  color: var(--medium-lavender-color);
}

#publications a:hover {
  color: var(--bright-orange-color);
}
/************************************/
/*       Research Page Style        */
/************************************/

#research-header {
  background: linear-gradient(315deg, var(--hot-pink-color) 30%, var(--pale-yellow-color) 30%);
}

#research-header .summary .heading,
#research-header .summary .text {
  color: var(--black-color);
}

#research-header .page-section.wider {
  margin-top: 1.5em;
  margin-bottom: 1em;
}

#research-overview .text {
  margin-top: 2em;
  margin-bottom: 2em;
  max-width: 46em;
  width: 100%;
  font-size: 1em;
  line-height: 1.6em;
  color: var(--black-color);
}

#research-overview img {
  max-width: 240px;
  width: 100%;
}

#research-overview .project-foci {
  margin-top: 1.5em;
}

#research-overview .project-foci .item {
  margin-right: 2.8em;
  line-height: 2em;
  text-align: left;
}

#research-overview .project-foci .item .icon {
  width: 2em;
  text-align: center;
}


/************************************/
/*      Research Projects Style     */
/************************************/

#research-projects .heading {
  font-weight: 500;
  font-size: 1.5em;
  color: var(--white-color);
  padding: 0.85em;
  background: linear-gradient(315deg, var(--loud-purple-color) 20%, var(--hot-pink-color) 20%);
}

#research-projects .initiatives .item {
  margin-top: 4em;
}

#research-projects .initiatives .item.first {
  margin-top: 3em;
}



/************************************/
/*       People Section Style       */
/************************************/

#people-section .heading {
  font-weight: 500;
  font-size: 1.5em;
  color: var(--white-color);
  padding: 0.85em;
  background: linear-gradient(315deg, var(--mint-green-color) 20%, var(--loud-purple-color) 20%);
  margin-bottom: 1em;
}

#people-section .heading.former {
  font-weight: 500;
  font-size: 1.5em;
  color: var(--black-color);
  padding: 0em;
  background: none;
  margin-bottom: 0em;
}

#people-section .researcher {
  margin-top: 1em;
}

#people-section .researcher.first {
  margin-top: 0em;
}

#people-section .researcher.former {
  max-width: 34em;
  width: 100%;
}

#people-section .researcher img {
  max-width: 9em;
  border-radius: 9em;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  margin-right: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}

#people-section .researcher.former img {
  max-width: 6em;
  border-radius: 6em;
}

#people-section .researcher .text-section {
  max-width: 40em;
  min-width: 10em;
}

#people-section .researcher .text-section .name {
  font-weight: 500;
  font-size: 1.1em;
  color: var(--black-color);
  text-decoration: none;
}

#people-section .researcher .text-section .participation,
#people-section .researcher .text-section .role {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--gray-color);
  margin-top: 0.3em;
}

#people-section .researcher.former .text-section .participation,
#people-section .researcher.former .text-section .role {
  font-size: 0.8em;
}

#people-section .researcher .text-section .bio {
  text-align: justify;
  font-weight: 400;
  font-size: 0.85em;
  line-height: 1.35em;
  color: var(--black-color);
  margin-top: 0.85em;
}

#people-section .researcher.former .text-section .status {
  font-weight: 400;
  font-size: 0.8em;
  color: var(--gray-color);
  margin-top: 0.3em;
}


/************************************/
/*        Join Section Style        */
/************************************/

#join-section .heading {
  font-weight: 500;
  font-size: 1.5em;
  color: var(--white-color);
  padding: 0.85em;
  background: linear-gradient(315deg, var(--pale-yellow-color) 20%, var(--bright-orange-color) 20%);
  margin-bottom: 1em;
}

#join-section .text {
  max-width: 36em;
  width: 100%;
  font-size: 0.95em;
  line-height: 1.5em;
  color: var(--black-color);  
}

#join-section .text p:not(:first-child) {
  margin-top: 1.2em;
}

#join-section img {
  max-width: 460px;
  width: 100%;
  margin: 0.8em;
  padding: 5px;
  border: 5px solid var(--mint-green-color);
}

#join-section .caption {
  margin-bottom: 1.5em;
  color: var(--gray-color);
  font-size: 0.9em;
  text-align: center;
}

/************************************/
/*     Lab Contact Section Style    */
/************************************/

#lab-contact-section .heading {
  font-weight: 500;
  font-size: 1.5em;
  color: var(--black-color);
}

#lab-contact-section .contact-overview {
  margin-bottom: 1.5em;
  max-width: 30em;
  width: 100%;
}

#lab-contact-section .contact-overview .heading {
  font-weight: 500;
  font-size: 1.5em;
  color: var(--black-color);
}

#lab-contact-section .contact-overview .text {
  font-size: 1em;
  line-height: 1.6em;
  color: var(--black-color);
  margin-top: 0.8em;
}

#lab-contact-section .contact-details {
  max-width: 30em;
  width: 100%;
}

#lab-contact-section .contact-details .text {
  font-size: 1em;
  line-height: 1.6em;
  color: var(--black-color);
  margin-right: 2em;
}

#lab-contact-section .contact-details .text:first-child {
  margin-right: 3em;
  margin-bottom: 1.5em;
}

#lab-contact-section .contact-details .text.compact p:not(:first-child) {
  margin-top: 0.75em;
}

/************************************/
/*       Teaching Page Style        */
/************************************/

#teaching-header {
  background: linear-gradient(315deg, var(--mint-green-color) 30%, var(--medium-lavender-color) 30%);
}

#teaching-header .page-section.wider {
  margin-top: 1.5em;
  margin-bottom: 1em;
}

#teaching .item {
  margin-top: 1em;
  font-size: 0.95em;
  line-height: 1.3em;
  -webkit-region-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

#teaching .item .date {
  color: var(--gray-color);
  font-size: 0.75em;
  min-width: 6em;
  
}

#teaching .item .number {
  font-size: 0.9em;
  min-width: 5em;
}

#teaching a {
    color: var(--medium-lavender-color);
}

#teaching a:hover {
  color: var(--bright-orange-color);
}
/************************************/
/*            Variables             */
/************************************/

:root {              
  --black-color:           #301349;
  --gray-color:            #76798C;
  --light-gray-color:      #CACCD3;
  --lighter-gray-color:    #D8D8DE;
  --white-color:           #FFFFFF;                     
  --mint-green-color:      #42F6CA;
  --light-mint-color:      #CBFAEE;
  --lighter-mint-color:    #E6FAF5;
  --hot-pink-color:        #FF4398;
  --bright-orange-color:   #F89356;
  --pale-yellow-color:     #FFFFA1;
  --medium-lavender-color: #A86AD0;
  --loud-purple-color:     #512F8E;

}
/************************************/
/*          CV Page Style           */
/************************************/

#cv-header {
  background: linear-gradient(315deg, var(--loud-purple-color) 30%, var(--mint-green-color) 30%);
}

#cv-header .summary .heading,
#cv-header .summary .text {
  color: var(--black-color);
}

#cv-header .page-section.wider {
  margin-top: 1.5em;
  margin-bottom: 1em;
}

#cv strong {
  font-weight: 500;
}

#cv img.biopic {
  float: right;
  margin-left: 1em;
  max-width: 110px;
  border-radius: 110px;
}

#cv .heading {
  margin-bottom: .5em;
}

#cv .text {
  font-size: .925em;
  color: var(--black-color);
  line-height: 1.5em;
  text-align: left;
}

#cv .smaller-text {
  font-size: 0.85em;
  color: var(--black-color);
  line-height: 1.5em;
}

#cv .smaller-text p:not(:first-child) {
  margin-top: 1em;
}

#cv .smaller-text .bolder {
  font-weight: 500;
}

#cv .item {
  margin-top: 1.5em;
  -webkit-region-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

#cv .item.first {
  page-break-before: avoid;
  margin-top: 0em;
}

#cv .item .date {
  color: var(--gray-color);
  font-size: 0.7em;
  margin-bottom: 0.15em;
}

#cv .item .date.padded {
  min-width: 5em;
  line-height: 1.5em;
  margin-top: 0.2em;
  margin-bottom: 0em;
}

#cv .item .date.padded.wide {
  min-width: 7em;
}

#cv .item .date.padded.extrawide {
  min-width: 8em;
}

#cv .item .title {
  font-size: 0.925em;
  font-weight: 500;
  color: var(--black-color);
  margin-bottom: 0.1em;
}

#cv .item .description {
  font-size: 0.85em;
  color: var(--black-color);
  line-height: 1.5em;
}

#cv .item .description.padded {
  margin-top: 0.4em;
}

#cv .item .description.light {
  color: var(--gray-color);
}

#cv .item .description p:not(:first-child) {
  margin-top: 1em;
}

#cv .description .smaller {
  font-size: 0.975em;
}

#cv .item .description a.inline {
  font-size: .725em;
  vertical-align: top;
}

#cv .item .description .code {
  color: var(--gray-color);
  display: inline;
}

#cv .item .floating-image {
  display: inline-block;
  float: right;
  margin-left: 2em;
}

#cv hr {
  page-break-before: avoid;
  margin-bottom: 1.2em;
  margin-top: -0.4em;
}

#cv a {
  color: var(--medium-lavender-color);
}

#cv a:hover {
  color: var(--bright-orange-color);
}

@media (max-width:56.25em) {
  #cv img.biopic {
    max-width: 80px;
    border-radius: 80px;
  }
}


/************************************/
/*          CV Print Style          */
/************************************/

#cv .print-only {
  display: none;
}

#cv .print-header {
  display: none;
  margin-bottom: 2em;
}

#cv .print-header .heading {
  font-size: 1.3em;
  margin-top: 0em;
}

#cv img.printpic {
  margin-right: 1.2em;
  max-width: 70px;
  border-radius: 70px;
  margin-top: 0.35em;
}

@media print {
  @page { margin: 1in;}
  
  #main-container {
    width: 100%;
  }
  
  #main-container .inner-container {
    margin: 0em;
  }
  
  #cv hr {
    margin-bottom: 1em;
    border-bottom: 2px solid var(--black-color);
    height: 2px;
  }
  
  #cv .no-print {
    display: none;
  }
  
  #cv .print-only {
    display: inherit;
  }
  
  #cv .print-header {
    display: inherit;
  }
  
  #cv img.biopic {
    display: none;
  }
  
  #cv .item img.floating-image {
    display: none;
  }
  
  #cv .item .description.experience {
    display: none;
  }
  
  #cv a {
    color: var(--black-color);
  }
  
  #cv .item .description a.inline {
    display: none;
  }
  
  #header {
    display: none;
  }
  
  #cv-header {
    display: none;
  }
  
  #footer {
    display: none;
  }

}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */