@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

:root{
    --background: #efefef;
    --default: #222326;
    --strong: #40424a;
    --basic: #4c4e55;
    --btn: #65afcb;
    --btn-hover: #80c5df;
}

html,
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    font-family: 'Roboto Condensed', sans-serif;
    color: var(--default);
    /* background: var(--background); */
}

.mt-0{margin-top: 0;}
.mb-0{margin-bottom: 0;}

.wrapper{
    padding: 30px;
}
.wrapper .content{
  min-width: 420px;
  max-width: 640px;
  margin: 0 auto;
  background-color: white;
  padding: 45px;
  z-index: 1;
}
h2{font-size: 1.2rem; font-weight: 400; line-height: 1.5; text-align: justify;}
p, ol li, ul li{line-height: 1.2; color: var(--basic); text-align: justify;}
ol, ul{margin-bottom: 20px; padding-left: 15px;}
ol li:not(:first-child),
ul li:not(:first-child){margin-top: 10px;}
ol li strong,
ul li strong{color: var(--strong);}
ol li a,
ul li a{
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.wrapper > .content > ul li:first-child{
  margin-top: 30px;
}
/* ul li a{
  padding: 10px 5px;
  box-shadow: inset 0 0 0 0 var(--btn);
  transition: all 0.4s ease-in-out 0s;
} */

/* ul li a:hover{
  box-shadow: inset 300px 0 0 0 var(--btn-hover);
  color: var(--default);
} */
ul li a{
  position: relative;
}
ul li a::before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #3eaed8;
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

#lottie-wrapper{z-index: 0;}
#lottie-character{
  position: fixed;
  top: calc(50% - 250px);
  left: 2vw;
}
#lottie-planet-01{
  position: fixed;
  top: calc(20% - 150px);
  right: 1.5vw;
}
#lottie-planet-02{
  position: fixed;
  bottom: calc(20% - 100px);
  right: 10vw;
}

@media (hover: hover) and (pointer: fine) {
  ul li a:hover::before {
    left: 0;
    right: auto;
    width: 100%;
  }
}
ul li:not(:first-child){margin-top: 30px;}

@media only screen and (max-width: 699px) {
  html, body{width: 100%;}
  .wrapper{max-width: 100%; position: absolute; z-index: 2;}
  .background{position: fixed;}

  .wrapper > .content{
    min-width: auto;
    max-width: calc( 100% - 60px);
  }
  .wrapper > .content > ul{margin-top: 30px;}

  #basic-nav{
    .nav{
      padding: 8px 10px !important;
    }
  }

  ol li:not(:first-child), 
  ul li:not(:first-child){margin-top: 40px;}
  ol, ul{padding-left: 0;}
  ol li, ul li{
    list-style: none;
    font-size: 1.2rem; 
    text-align: center;
    background-color: var(--btn);
    padding: 10px 20px;
    border-radius: 50px;
  }
  ol li a, ul li a{
    color: white;
    box-shadow: transparent;
    padding: 0;
  }
  ol li:hover, ul li:hover{
    background-color: var(--btn-hover);
    
  }
  ul li a,
  ul li a:hover{
    background-color: transparent;
    box-shadow: none;
    transition: none;
  }
}

@media only screen and (max-width: 499px) {
  #basic-nav {
      .nav {
          padding: 8px 0px !important;
      }
  }

  ol li, ul li{
    font-size: 1rem;
  }
  ol li:not(:first-child), ul li:not(:first-child){
    margin-top: 20px;
  }
}