@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;
} */

#page-title {
  padding: 1rem;
}

#team-site-title {
  padding-top: 1.5rem;
}

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: 1.15em;
  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 0.5px 0px #4c56b5;
}
.code a:hover {
  text-shadow: 0.75px 0.75px 0.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: 0.75px 0.75px 0.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: 0.5px 0.5px 0.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: 0.5px 0.5px 0.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: 0.75px 0.75px 0.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: 230px;
  width: 230px;
  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;
  font-size: medium;
}

/* 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) 40%, transparent 65%);
  mask-image: radial-gradient(rgba(0, 0, 0, 1) 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) 40%, transparent 65%);
    mask-image: radial-gradient(rgba(0, 0, 0, 1) 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, 0.2) 7px,
      transparent 30px
    ),
    radial-gradient(white, rgba(255, 255, 255, 0.1) 7px, transparent 20px),
    radial-gradient(
      rgba(190, 145, 223, 0.547),
      rgba(255, 255, 255, 0.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: 1.15em;
    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.4rem;
  }

  .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: 0.75px 0.75px 0.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;
}

img.lightmode-element-only.img-fluid.logo {
  max-height: 4rem;
}

img.darkmode-element-only.img-fluid.logo {
  max-height: 4rem;
}

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

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