@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&family=Poppins:wght@200;400;800&display=swap');
:root{
  --black: #1E1E1E;
  --white: #ffffff;
  --grey: #3e3e3e;
  --orange: #F56A01;
  --lightorange: #fcb045;
  --lo1: #ffffad;
  --lo2: #ffd493;
  --lo3: #9affff;
  --lo4: #18ffb1;
  --lo5: #ff9f8c;
  --lo6: #a9bcff;
  --lo7: #ffbdda;
  --transparent: #0000007b;
  --shadow:  inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1),
              0 0 0 1px hsla(230, 13%, 9%, 0.075),
              0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
              0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
              0 3.5px 6px hsla(230, 13%, 9%, 0.09);
  --glass:   rgba(46, 46, 46, 0.95);
              box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
              backdrop-filter: blur( 50px );
              -webkit-backdrop-filter: blur( 50px );
}

@media (prefers-color-scheme: dark) {
  :root{
    --black: #1E1E1E;
    --white: #ffffff;
    --grey: #3e3e3e;
  }
}

@media (prefers-color-scheme: light) {
  :root{
    --black: #fcfbfacc;
    --white: #1E1E1E;
    --grey: #f1f1f1;
    --transparent: #0000001c;
    --glass:   rgba(240, 240, 240, 0.95);
                box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
                backdrop-filter: blur( 50px );
                -webkit-backdrop-filter: blur( 50px );
  }
}

html {
  scroll-behavior: smooth;
  min-height: 100vh;
}

body{
    background-color: var(--black);
    color: var(--white);
    margin: 2em 2em;
    font-family: 'Poppins', sans-serif;
}

.mainNav{
    position: sticky;
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    right: 0;
    z-index: 999;
    top: 2rem;
    user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    display: flex;
    justify-content: space-between;
  }
  
  .mainNav ul{
    display:inline-block;
    background-color: var(--glass);
    border-radius: 1.5rem;
  }

  .mainNav li{
    display:inline-block;
    text-decoration: none;
  }
  
  .mainNav ul, .mainNav a{
    color: var(--white);
    margin: 0;
  }
  
    .breadcrumb a:hover{
    color: var(--orange);
    text-decoration: none;
    transition: all 0.1s;
  }

.breadcrumb {
  padding: 1.5rem;
  
}

  #readingGuideBtn{
    float: right;
  }

a {
  text-decoration: none;
  color: var(--orange);
}

a:hover {
  text-decoration: underline;
  color: var(--white);
  transition: all 0.1s;
}

.button{
  display: block;
  background-color: var(--glass);
  color: var(--white);
  text-align: center;
  padding: 1.5rem 1.5rem;
  text-decoration: none;
  border-radius: 1.5rem;
  user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select: none; 
}

.button:hover{
  color: var(--white);
  background-color: var(--orange);
  text-decoration: none;
  transition: all 0.1s;
}

img{
  user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select: none; 
}

#lo1{
  background-color: var(--lo1);
}

#lo2{
  background-color: var(--lo2);
}

#lo3{
  background-color: var(--lo3);
}

#lo4{
  background-color: var(--lo4);
}

#lo5{
  background-color: var(--lo5);
}

#lo6{
  background-color: var(--lo6);
}

#lo7{
  background-color: var(--lo7);
}

@media screen and (min-width: 1280px) {
    .maxViewWidth {
      width: 1100px;
      margin-left: auto;
      margin-right: auto;
    }
  }