@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&family=Roboto:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');


/*-- scss:defaults --*/
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #ddd !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

$blue:   #5d8198 !default;
$indigo: #376795 !default;
$purple: #480B6A !default;
$pink:   #A52C60 !default;
$red:    #e76254 !default;
$orange: #ef8a47 !default;
$yellow: #ffd06f !default;
$green:  #02b875 !default;
$teal:   #aadce0 !default;
$cyan:   #72bcd5 !default;

$primary:       $blue !default;
$secondary:     $gray-500 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$font-family-sans-serif:      Roboto, sans-serif !default;
$font-family-serif:           Roboto, serif !default;

$font-size-base:              1.25rem !default;

$h1-font-size: $font-size-base * 2.8;
$h2-font-size: $font-size-base * 1.85;
$h3-font-size: $font-size-base * 1.5;
$h4-font-size: $font-size-base * 1.2;
$h5-font-size: $font-size-base * 1;
$h6-font-size: $font-size-base * 0.8;

$toc-font-size: 1.1rem;
$sidebar-font-size: 1.1rem;
$sidebar-font-size-section: 0.9rem;

$navbar-hl: $red !default;

$link-color: $blue;
$link-hover-color: $red;
$link-decoration: none !default;
$link-hover-decoration: underline !default;

$monokai-bg: #2e3440;


/*-- scss:rules --*/

html {
  margin: 0 auto;
  max-width: 90%;
  overflow-x: hidden;
}

a {
  font-weight: 100;
}

ul {
  font-size: 1rem;
  font-weight: 100;
}

p {
  font-size: 1rem;
  font-weight: 100;
}

h1, h2, h3 {
  font-family: Yanone Kaffeesatz;
  font-weight: 700;
}

h4, h5, h6 {
  font-weight: 400;
}

.navbar li {
  font-size: 0.6rem;
  text-transform: uppercase;
}

.navbar-title {
  font-size: 0.6rem;
  font-weight: 100;
  text-transform: uppercase;
}

.nav-footer p {
  font-size: 0.7rem;
  font-weight: 100;
  color: $gray-800;
}

.references {
  font-weight: 100;
}

@media(min-width:768px) {
  ul {
    font-size: 1rem;
  }
  
  p {
    font-size: 1rem;
  }
  
  .navbar li {
    font-size: 0.9rem;
  }
  
  .navbar-title {
    font-size: 0.9rem;
  }
  
  .nav-footer p {
    font-size: 0.8rem;
  }
}


@media(min-width:992px) {
  ul {
    font-size: 1.2rem;
  }
  
  p {
    font-size: 1.2rem;
  }
  
  .navbar li {
    font-size: 1rem;
  }
  
  .navbar-title {
    font-size: 1rem;
  }

  .nav-footer p {
    font-size: 0.8rem;
  }
}


/*-- TITLE PAGE --*/

.title-block {
  margin: 1em 0;
  padding-bottom: 1em;
}

.course-title {
  font-size: 1rem;
  font-weight: 400;
  color: $gray-600;
}

.course-subtitle {
  font-size: 3rem;
  font-family: Yanone Kaffeesatz;
  font-weight: 700;
  color: $red;
}

.course-detail p {
  font-size: 1rem;
  font-weight: 100;
  color: $gray-600;
}

.course-icon {
  font-size: 30pt;
  display: block;
  margin: 50px auto 0 -10px;
}

.course-info {
  border-bottom: 1px solid $gray-200;
  padding-bottom: 1em;
}

.course-info p {
  font-size: 1rem;
}

.course-info ul {
  list-style: none;
  font-size: 1rem;
  text-indent: -0.7rem;
  padding-left: 1.4rem;
}

.summary-points ul {
    list-style: none;
}

.summary-points ul li:before {
  font: var(--fa-font-solid);
  content: '\f35a';
  font-size: 1rem;
  margin: 0 15px 0 -20px;
}

@media(min-width:768px) {
  .course-title {
    font-size: 1.1rem;
  }
  
  .course-subtitle {
    font-size: 4rem;
  }
  
  .course-detail p {
    font-size: 1.1rem;
  }
  
  .course-icon {
    font-size: 60pt;
    margin: 30px auto 0 -10px;
  }
  
  .course-info p {
    font-size: 0.8rem;
  }
  
  .course-info ul {
    font-size: 0.8rem;
  }
  
  .summary-points ul li:before {
    font-size: 0.8rem;
  }
}

@media(min-width:992px) {
  .course-title {
    font-size: 1.2rem;
  }
  
  .course-subtitle {
    font-size: 4.9rem;
  }
  
  .course-detail p {
    font-size: 1.2rem;
  }
  
  .course-icon {
    font-size: 80pt;
    margin: -10px auto 0 -10px;
  }
  
  .course-info p {
    font-size: 1rem;
  }
  
  .course-info ul {
    font-size: 1rem;
  }
  
  .summary-points ul li:before {
    font-size: 1rem;
  }
}


/*-- SYLLABUS --*/

.course-info-syllabus ul {
  list-style: none;
  font-size: 1rem;
}

.course-info-syllabus {
  border: none!important;
}

.recommended-lit td, tr, th, tbody {
  border: none!important;
}

.grading {
  font-weight: 100;
}

.grading td, tr, th, tbody {
  border: none!important;
  border-spacing:0 !important;
  padding-bottom: 0;
  padding-top: 0;
  font-size: 1rem;
}

@media(min-width:768px) {
  .course-info-syllabus ul {
    font-size: 0.8rem;
  }
  
  .grading td, tr, th, tbody {
    font-size: 1.1rem;
  }
}

@media(min-width:992px) {
  .course-info-syllabus ul {
    font-size: 1rem;
  }
  
  .grading td, tr, th, tbody {
    font-size: 1.2rem;
  }
}


/*-- SCHEDULE --*/

.schedule-table th {
  font-weight: 400;
  font-size: 0.6rem;
}

.schedule-table td, tr, tbody {
  font-weight: 100;
  font-size: 0.6rem;
  border-bottom: 0.5px solid $gray-400;
}

@media(min-width:768px) {
  .schedule-table th {
    font-size: 1rem;
  }
  
  .schedule-table td, tr, tbody {
    font-size: 1rem;
  }
}

@media(min-width:992px) {
  .schedule-table th {
    font-size: 1rem;
  }
  
  .schedule-table td, tr, tbody {
    font-size: 1rem;
  }
}


/*-- POSTER --*/

.poster-table th {
  font-weight: 400;
  font-size: 0.6rem;
}

.poster-table td, tr, tbody {
  font-size: 0.6rem;
  border-bottom: 0.5px solid $gray-400;
}

@media(min-width:768px) {
  .poster-table th {
    font-size: 1rem;
  }
  
  .poster-table td, tr, tbody {
    font-size: 1rem;
  }
}

@media(min-width:992px) {
  .poster-table th {
    font-size: 1rem;
  }
  
  .poster-table td, tr, tbody {
    font-size: 1rem;
  }
}

/*-- GALLERY --*/

figcaption {
  font-size: 14px;
  color: firebrick;
  margin: auto;
  text-align: center;
}