@import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');


/* Color Variables */

:root {
  --primary-blue: #7acdfa;
  --white: #ffffff;
  --purple: #a44ae5e7;
  --pink: #f30dff;
  --green: #4EC9B0;
  --mauve: #DEA3A2;
  --yellow: #eaeea2;
  --orange: #CE9178;
  --dark-blue: #3175ad;
  --gray: #506a7f ;
  --periwinkle: #5e60ce ;
  --bg-dark: rgba(255, 255, 255, 0.782);
  --cottage-sage: #7dcd90;
  --lavender: #8f97e3;
  --camping-sage: #b7cb99;

  
}


/* GENERAL TAG STYLES */

body::before{
    display: block;
    content: '';
    height: 40px;
    box-shadow: none;
}

button{
  background: var(--gray);
  color: white;
  border-radius: 5px;
  text-decoration: none !important;
  padding: 5px;

}
button:focus{
  box-shadow: white;
}

.title{
  color: #f2ebd7;
}

/* .dark-mode #cloud-intro{
  z-index: -1;
} */

#hiddenButton{
  margin-left: 3rem;
  margin-top: 5rem;
  position: absolute;
  z-index: 2;
  background-color: #8f97e3da;
}

/* #hiddenButton:focus{
  outline: 5px solid white;
} */


 body, .cloud-container{
  width: 100%;
  height: 100%;
  min-width: 500px;
  min-height: fit-content;
  margin: 0;
  z-index: -2;
  /* padding-top: 1rem;; */
  overflow: scroll;
  font-size: 1em;
  font-family: 'Cabin', sans-serif;
}
.cloud-container{
  background-color: #00a0c4;
	background: linear-gradient(to bottom, #29b0cf 1%,#b0d6f7 100%);
}

.light-mode #cloud-intro{
  position: relative;
  height: 100%;
  min-height: 600px;
  background: 
            url(assets/cloud_small.png) 0 300px,
              url(assets/cloud_blurr.png) 900px 250px;
	animation: wind 200s linear infinite;
  animation-direction: alternate;
}
@keyframes wind{
  0% {
    background-position: 0 200px, 0 300px, 100px 250px;
  }
  100% {
    background-position: 1000px 200px, 1200px 300px, 1100px 250px;
  }

}


/* .home {
  background: linear-gradient(to bottom right, #7400b8, #6930c3, #5e60ce, #5390d9, #4ea8de, #48bfe3, #56cfe1, #64dfdf, #72efdd, #80ffdb);
  color: #ffffff;
} */

code{
  color: #ffe799;
  padding: 3px;
  text-shadow: 0px .5px 0px #4c56b5;

}
.code a:hover{
  text-shadow: .75px .75px .75px #ffffff;
  color: rgb(255, 255, 255);

}
.navbar-dark{
  background-color: #aae9c5;
  box-shadow:  1.5px 1.5px 3px 0.3px #186b7b9d;
  border-image: linear-gradient(to right, #8f97e3, #025171);
  border-bottom: 5px solid;
  border-image-slice: 1;
  width: 100%;
  /* display: flex !important;
  align-items: baseline !important; */
  /* linear-gradient(to right, #FE9F9F, #FEC79F, #fadf94, #BEFE9F, #9FFEC5, #9FEDFE, #CFA3DF, #FE9FE9);
  border-bottom: 10px solid; */
  /* background-image: url('../static/assets/cottage-core/vines.jpg'); */
}
/* 
.navbar-collapse{
  display: flex;
  align-items: baseline;
  
} */

.navbar-dark.container-fluid{
  justify-content: space-between !important;
}

.nav-link{
  color: #0e3812 !important;
  font-size: 25px;
  align-self: self-start;
  padding-left: 20px !important;
}

.fixed-top{
  top: 0 !important; 
}
.navbar-brand{
  color: #0e3812 !important;
  max-inline-size: 13rem;
  margin-left: 0%;
}

.hidden-button{
  padding-top: 10rem;
}

.box{
  /* background-color: rgba(135, 151, 243, 0.654);
  width: 100%;
  padding: 15px;
  color: black; */
  /* padding: 0.5rem 1rem;
  position: relative;
  background-color: white;
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 1.75rem; */
  margin-bottom: 3px !important;
  padding: 1.5rem 2rem;
  background: #1e7084e2;
  border-radius: 0.25rem;
  color: white;
  border-radius: 5px;
  box-shadow: rgb(47, 47, 47) 0px 1px 2px;
  
}
/* .box::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  z-index: -1;
  background-image: linear-gradient(to bottom right, #7400b8, #6930c3, #5e60ce, #5390d9, #4ea8de, #48bfe3, #56cfe1, #64dfdf, #72efdd, #80ffdb);
  border-radius: 1.75rem;
} */


.authors-box{
  color: white;
  padding: 15px;


}
.header{
  font-weight: bold;
  color:#ffffff;
}

.header ul{
  padding: 0; 
  list-style-type: none;
}

.primary-blue{
  color: var(--primary-blue)
}

.green{
  color: var(--mauve);
}

/* Removes button outline */
.btn:focus {
  outline: none;
  box-shadow: none;
}

#log-in {
  width: 20%;
  height: 160px;
  position: absolute;
  top: 40%;
  left: 40%;
  z-index: 1;
  padding: 1em;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 0.25rem;
  background: rgb(255, 255, 255);
  box-shadow: 1px 1px 3px 0.1px #858484;
}

.blur {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

.hidden {
  display: none;
}

/* .container {
  padding: 1.5rem 4rem;
  background-color: var(--gray);
  border-radius: 0.25rem;
  
  overflow-y: scroll;

} */

  /** ---------------------- LINK STYLING ---------------------- **/

  a { 
    color: rgb(255, 255, 255);
    text-decoration: underline;
    border-radius: 10px;
    border-color: #000000;
  }

  a:hover {
    text-shadow: .75px .75px .75px #ffffff;
    color: rgb(255, 255, 255);


  }

  .link-page {
    font-weight: normal;
  }
  

  .link-page a {
    -webkit-text-fill-color: #9bc99e;
    font-style: normal;
    font-weight: bolder;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    padding: 1px 2px;
  }

  .link-page box {
    background-color: #6830c3b5;

    text-shadow: .5px .5px .5px #252c6c;
  }

  .link-page-overview a{
    -webkit-text-fill-color: #2e3b6a;
    font-style: normal;
    font-weight: bolder;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    padding: 1px 2px;
  }

  .link-page-overview a:hover{
    text-shadow: .5px .5px .5px #1d2eae;

  }
  /* go to the past BUTTON STYLING */

  .past-btn{
  background: var(--gray);
  box-shadow: var(--gray) 0 10px 20px -15px;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 11px 22px;
  border: 0;
}
  
/* On the Horizon Box */

.horizon-box{
  position: relative;
  margin-top: 6rem;
  margin-bottom: 10px !important;
  background-color: #8f97e3cf;
  width: 100%;
  border-radius: 5px;
  padding: 1.5rem 2rem;
  color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.647) 5px 4px 5px;
}

.horizon-box .header{
  color: white;
}

.horizon-item{
  margin: 10px;
  text-align: center;
  list-style: none;

}

.horizon-item a{
  -webkit-text-fill-color: rgb(255, 255, 255);
}

.horizon-item a:hover{
  -webkit-text-fill-color: rgb(255, 255, 255);
  text-shadow: 1px 1px 1px #707de2;
}

/* Past Lectures Button */

.past-btn{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px;
  width: 100%;

}
.past-btn:hover {
  box-shadow: 0px 2px 7px 0px rgba(146, 115, 115, 0.24);
 
}
.past-link a{
  -webkit-text-fill-color: rgb(255, 255, 255);
  text-shadow: 1px 1px 1px #000000;

}

.past-link a:hover{
  -webkit-text-fill-color: rgb(255, 255, 255);
  text-shadow: 1px 1px 1px #000000;

}

.past-text{
  font-size: large;
}

.down-ar{
  font-size: 0.8em;
}
/*Itinerary Stuff*/

.itinerary {
  padding: 1.5rem 4rem;
  background: #0c2d45bd;
  border-radius: 0.25rem;
  overflow-y: inherit;
  margin-top: 3rem;
  margin-bottom: 3rem;
  /* box-shadow: rgba(0, 0, 0, 0.647) 5px 4px 5px; */
}

.itinerary li{
  list-style: none;
}
.itinerary a:hover {
  text-shadow: .75px .75px .75px #74a993;

}
/* SCHEDULE CUSTOM STYLING */

.plan {
  margin-bottom: 0.5em;
}

.plan ul {
  margin-bottom: 0;
  margin-left: 3.5em;
}

.date {
  font-weight: bold;
  color: var(--primary-blue)
}

.kind {
  width: 3.5em;
  display: inline-block;
  color: var(--mauve);
  font-weight: 700;
}

.horizon-item{
  margin: 10px;
  text-align: center;
  list-style: none;

}


/* TEAM PROFILES */

.profile{
  height: 210px;
  width: 210px;
  margin: 10px;
}

.profile-image{
  height: 200px;
  width: 200px;
  object-fit: cover;
}

.profile-image:hover{
  box-shadow: 0 0 10px var(--primary-blue);
}

#profile-page img {
  max-width: 300px;
  max-height: 300px;
}

#profile-page figcaption {
  display: none;
}

/* Team Site Login  */

#log-in {
  width: 20%;
  height: 160px;
  position: absolute;
  top: 40%;
  left: 40%;
  z-index: 1;
  padding: 1em;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 0.1rem;
  background: rgb(255, 255, 255);
  box-shadow: 1px 1px 3px 0.1px #858484;
}

.blur {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

.hidden {
  display: none;
}

/* EXERCISE PAGE */

.btn-ov{
  -webkit-text-fill-color: #ffffff;
  font-weight: 700;
}

.overview-item ul{
  margin: 0;
  padding: 0;
  
}

.overview-item ul li{
  list-style: square;
}
.overview-item a{
  text-decoration: none;
}
.overview-item code{
  background-color: inherit;
}
.overview-item:hover code{
text-decoration: none;}

.code{
  background-color: #000000;
}
.toc {
  font-size: 0.9rem;
}
.toc > ul {
  margin-top: 0rem;
}
.toc ul {
  padding-inline-start: 1em;
}

#menu-overview {
  position: sticky;
  top: 4em;
  max-height: 74vh;
  overflow-y: scroll;
}

/* FOOTER */

.footer-text{
  font-size: 12px;
}

.footer-text a{
  -webkit-text-fill-color: #175389;
  text-decoration: underline;
}

/* TEAM Career Site */

.career-nav{
  font-size: larger;
  font-weight: 500;
  margin-right: 30px;
}


/* Code formatting for unhighlighted syntax */

.terminal{
  background-color: #0D1B27;
}

.sun{ 
  margin-top: -7rem;
  margin-left: -3rem;
  width: 15rem;
  height: 15rem;
  position: absolute;
}

.light-mode .sun {
  margin-top: -7rem;
  margin-left: -3rem;
  width: 15rem;
  height: 15rem;
  position: absolute;
  background: radial-gradient(transparent 50%, white), radial-gradient(yellow, transparent 70%);
  -webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
  mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
  border-radius: 50%;
  
  &::after,
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
  mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
  }
  
  &::before {
    background: repeating-conic-gradient(from 0deg, yellow 0deg 20deg, transparent 20deg 40deg);
    animation: rotate 720s linear, scale 3s linear infinite;
  }
  
  &::after {
    background: radial-gradient(rgb(255, 202, 26), rgb(255, 193, 22) 27%, transparent calc(27% + 3px) 100%), radial-gradient(gold, transparent 70%), repeating-conic-gradient(from 0deg, gold 0deg 5deg, transparent 5deg 10deg);
    transform: rotate(15deg);
    animation: rotate 360s linear;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.container h1 {
  margin-top: 0.5em;
  font-weight: bold;
}

#exercises-page .content h2, #exercises-page .content h3 {
  margin-bottom: 1em;
  margin-top: 1em;
  font-weight: bold;
}

#exercises-page .content img {
  max-width: 100%;
}

#exercises-page .turtle-talk {
  margin-top: 32px;
  background: rgba(0, 67, 0, 0.576);
  float: clear;
  display: flex;
  border-radius: 32px;
  padding: 16px;
  margin-bottom: 16px;
}

#exercises-page .owl-talk {
  margin-top: 32px;
  background: rgba(94, 29, 1, 0.655);
  float: clear;
  display: flex;
  border-radius: 32px;
  padding: 16px;
  margin-bottom: 16px;
}

#exercises-page .fox-talk {
  margin-top: 32px;
  background: rgba(197, 97, 3, 0.776);
  float: clear;
  display: flex;
  border-radius: 32px;
  padding: 16px;
  margin-bottom: 16px;
}

#exercises-page .turtle-talk figure, 
#exercises-page .fox-talk figure, 
#exercises-page .owl-talk figure {
  width: 25%;
  margin-right: 16px;
  flex: 1;

}

#exercises-page .turtle-talk figure img,
#exercises-page .fox-talk figure img,
#exercises-page .owl-talk figure img {
  border-radius: 32px;
  border-width: 8px;
  margin-right: 16px;

}

#exercises-page .turtle-talk figcaption,
#exercises-page .fox-talk figcaption,
#exercises-page .owl-talk figcaption {
  display: none;
}

#exercises-page .turtle-talk .message,
#exercises-page .fox-talk .message,
#exercises-page .owl-talk .message {
  width: 75%;
  flex: 3;
}

h1{
  color: rgb(255, 255, 255) !important;
  text-shadow: 1px 1px 1px #000000;

}

.ms-auto{
  margin-left: 0 !important;
}

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.switches li {
  position: relative;
  counter-increment: switchCounter;
}

.switches label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

.switches span:last-child {
  position: relative;
  width: 50px;
  height: 26px;
  border-radius: 15px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
  background: #c2c0f6;
  transition: all 0.3s;
}

.switches span:last-child::before,
.switches span:last-child::after {
  content: "";
  position: absolute;
}

.switches span:last-child::before {
  left: 1px;
  top: 1px;
  width: 24px;
  height: 24px;
  background: var(--white);
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.3s;
}

.switches span:last-child::after {
  top: 50%;
  right: 8px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/uncheck-switcher.svg);
  background-size: 12px 12px;
}

.switches [type="checkbox"]:checked + label span:last-child {
  background: #025171;
}

.switches [type="checkbox"]:checked + label span:last-child::before {
  transform: translateX(24px);
}

.switches [type="checkbox"]:checked + label span:last-child::after {
  width: 14px;
  height: 14px;
  left: 8px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/checkmark-switcher.svg);
  background-size: 14px 14px;
}

#mode-label {
  padding-right: 1em;
}


/** SCREEN SIZE SPECIFIC STYLING **/

/* All mobile devices */ 
@media screen and (max-width: 1025px) {
    /* Navbar spacing */
    .navbar-expand {padding: 0 5px}
    .navbar-collapse {width: 60%; overflow: auto}
    .mode-switch {display: none;}
    .navbar-nav {padding: 0em; margin-right: auto; margin-left: auto}
    .nav-item { margin-left: 0em !important;}
    .switches {display: none}
    p img {
      width: 100%;
    }
}

/* iphone 5c, galaxy fold... */
@media screen and (max-width: 350px) {
  .absolute-page {padding-top: 3em}

  /* Font sizes */
  h1 {font-size: 28px !important;}
  h2 {font-size: 25px !important;}
  h4 {font-size: 17px !important}
  a {font-size: 15px !important}

  .navbar-expand, .fa-bars {padding: 0 15px}
    .navbar-expand {max-height: 75px;}
    .navbar-collapse {width: 60%; overflow: auto}
    .navbar-nav {
      margin-right: auto; 
      margin-left: auto; 
      background-color: rgb(255, 255, 255); 
      position: absolute; z-index: 2; 
      padding-right: 30px; 
    }
/* Anchors hidden on mobile 
      Some updates to container/box spacing for vertical display*/
  .hide-mobile {display: none} 
  .row {width: 100% !important}
  .horizon-box {width: 90vw} 
  .itinerary-col {margin-left: 5%;}
  #readings.box {margin-top: 1.5em;}
  #hamburger {display: block;}

  div .col-12 {margin-left: 5%}
  .content {margin-left: 5%; margin-right: 5%}

  /* Dark mode hidden in mobile Nav
        Search changed to be vertical with filter feature */
  .switches {display: none}
  .search {width: auto !important; margin: 8px}
}

/* iphone 6/7/8 galaxy s5 pixel2...*/
@media screen and (max-width: 413px) and (min-width: 351px) {
  .absolute-page {padding-top: 4em}
  h2 {font-size: 30px !important;}
  h4 {font-size: 20px !important}
  a {font-size: 18px !important}
  .hide-mobile {display: none} 
  .row {width: 100% !important}
  .horizon-box {width: 90vw} 
  .itinerary-col {margin-left: 5%}
  #readings.box {margin-top: 1em;}
  div .col-12 {margin-left: 5%}
  .content {margin-left: 5%; margin-right: 5%}
  #mode-label {display: none}
  .form-switch {padding-left: 0}
  .switches {display: none}
  .search {width: auto !important; margin: 8px}
}

/* iphone 6/7/8 plus */
@media screen and (max-width: 450px) and (min-width: 414px) {
  .absolute-page {padding-top: 4em}
  h2 {font-size: 32px !important;}
  h4 {font-size: 20px !important}
  a {font-size: 20px !important}
  .hide-mobile {display: none} 
  .row {width: 100% !important}
  .horizon-box {width: 90vw} 
  .itinerary-col {margin-left: 5%}
  #readings.box {margin-top: 1.5em;}
  div .col-12 {margin-left: 5%}
  .content {margin-left: 5%; margin-right: 5%}
  #mode-label {display: none}
  .form-switch {padding-left: 0}
  .switches {display: none}
  .search {width: auto !important; margin: 8px}
}

/* surface duo*/
@media screen and (max-width: 749px) and (min-width: 451px) {
  /* div .col-12 {margin-left: 5%}
  .content {margin-left: 5%; margin-right: 5%} */
  h2 {font-size: 25px !important;}
  h4 {font-size: 16px !important}
  /* .col-lg-4 {
    padding-right: 10%} */
  .form-switch {padding-left: 0}
  #mode-label {display: none}
  .search {width: auto !important; margin: 8px}
}
/* ipads*/
@media screen and (max-width: 1025px) and (min-width: 750px) {
  .absolute-page {padding-top: 1em}
  a.nav-link {font-size: 25px !important}
  h2 {font-size: 30px !important;}
  h4 {font-size: 16px !important}
  .col-lg-4 {
    padding-right: 10%}
} 

.dark-mode .itinerary {
  padding: 1.5rem 4rem;
  background:#061b3c79;
  border-radius: 0.25rem;
  overflow-y: inherit;
  margin-top: 3rem;
  margin-bottom: 3rem;
  border: solid #8f97e3cf 2px;
  
}

.past-btn a{
  padding: 0;
}

.dark-mode .past-btn{
  background-color: rgba(162, 162, 162, 0.81);
}

.dark-mode .cloud-container{
  background: #061b3c;

}
.dark-mode #cloud-intro{
  font-family: 'Cabin', sans-serif;
  background-color: #061b3c;
  min-height: 600px;
  background-image:
  radial-gradient(rgb(150, 140, 222), rgba(255,255,255,.2) 7px, transparent 30px),
  radial-gradient(white, rgba(255,255,255,.1) 7px, transparent 20px),
  radial-gradient(rgba(190, 145, 223, 0.547), rgba(255,255,255,.1) 2px, transparent 30px);
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  
}

/* .dark-mode .sun {
  display: none;
} */

.dark-mode{  
  body{
    font-size: 1em;
    font-family: 'Cabin', sans-serif;
  }
  .sun{
    background-color: #c5c6c7;
    /* position:absolute; */
    /*padding: 10px;*/
    /* left: 40%; */
    margin-top: -5rem !important;
    margin-left: -1rem !important;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    box-shadow: 5px 0 10px 3px rgba(229,229,229,0.3),
                0 0 10px 2px rgba(229,229,229,0.3),
                5px 0 10px 3px rgba(229,229,229,0.3),
                 0px 0 3px 2px rgba(229,229,229,0.3);

    margin: auto;
    
  }
  
  
  .sun::after{
    content: "";
    background-color: rgba(162, 162, 162, 0.81);
    display: block;
    position: absolute;
    left:  90px;
    top:  30px;
    width: 30px;  
    height: 30px;
    border-radius:50%;
    box-shadow: 3px 0 0 1px rgba(98, 98, 98, 0.51),
                  7px 45px 0 -5px rgba(162, 162, 162, 0.9),
                  9px 45px 0 -5px rgba(100, 100, 100, 0.51),
                 35px 20px 0 -10px rgba(162, 162, 162, 0.9),
                 37px 20px 0 -10px rgba(100, 100, 100, 0.51);
  }
  
  /* @keyframes pulsate  {
      0% { opacity: 0.0; }
      50% { opacity: 1.0; }
      100% { opacity: 0.0; }
  } */
}

.dark-mode{
  background-color: #061b3c;;

  h1{
    color: white !important;
  }
  .link-page a{
    -webkit-text-fill-color: #fdfdfd;
    font-style: normal;
    font-weight: normal;
    color: rgb(221, 240, 246);
    text-decoration: none;
    border-radius: 10px;
  }

  .itinerary a:hover {
    text-shadow: 1px 1px 1px rgb(222, 215, 230);


  }
  .authors-box{
    background-color: var(--lavender) !important;
  }
  
  .kind{
    width: 3.5em;
    display: inline-block;
    color: var(--lavender);
    font-weight: bolder;
    font-size: 1.40rem;
  }

  .date{
    font-weight: bold;
    color: #ffffff;
  }

  .navbar-dark{
    background-color: #061b3c;
  }

  .title{
    color: var(--camping-sage);
  }

  .nav-link{
    color: var(--camping-sage) !important;
  }



  #mode-label{
    color: var(--camping-sage) !important;
  }

  .horizon-box{
    background-color: #8f97e399;
  }

  .box{
    margin-bottom: 3px !important;
    padding: 1.5rem 2rem;
    background: #061b3c;
    border-radius: 0.25rem;
    color: white;
    border-radius: 5px;
    border: solid #8f97e3cf 2px;
  }

  .overview-item ul{
    margin: 0;
    padding: 0;
    color: white !important;

    
  }
  .horizon-item a:hover{
    -webkit-text-fill-color: rgb(255, 255, 255);
    text-shadow: 1px 1px 1px rgb(215, 217, 230);
  }

  
  .overview-item ul li{
    list-style: square;
  }
  .overview-item a{
    text-decoration: none;
    -webkit-text-fill-color: white;
  }
  .overview-item code{
    background-color: inherit;
  }
  .overview-item:hover code{
  text-decoration: none;}

  a:hover {
    text-shadow: .75px .75px .75px #ecedf1;
    color: rgb(255, 255, 255);


  }
  .footer-text{
    background-color: #061b3c;
    color: white;
  }

  figcaption{
   -webkit-text-fill-color: white;
  }

}


.darkmode-element-only {
  display: none;
}

.lightmode-element-only {
  display: unset;
}

.dark-mode .darkmode-element-only {
  display: unset;
}
.dark-mode .lightmode-element-only {
  display: none;
}

.hide-mode-switch{
  display: none;
}

/* YouTube Modal Styles */
.youtube-modal {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(3px);
}

.youtube-modal-content {
  position: relative;
  width: 90%;
  height: 90%;
  max-width: 1200px;
  margin: 2.5% auto;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.youtube-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  z-index: 10000;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 8px;
  width: 80px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.youtube-modal-close::before {
  content: "×";
}

.youtube-modal-close:hover::before {
  content: "CLOSE";
  font-size: 12px;
  font-weight: normal;
}

.youtube-modal-close:hover,
.youtube-modal-close:focus {
  background: rgba(0, 0, 0, 1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.youtube-modal-body {
  width: 100%;
  height: 100%;
}

.youtube-modal-body iframe {
  border: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .youtube-modal-content {
    width: 95%;
    height: 80%;
    margin: 10% auto;
  }
  
  .youtube-modal-close {
    top: 8px;
    right: 10px;
    font-size: 20px;
    width: 70px;
    height: 53px;
  }
}

/* Animation for modal */
.youtube-modal {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.youtube-modal-content {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}