/* Goes to root */
/* @import "/styles-root.css"; */
  
  /* Base reset */
  * {
    margin: 0;
    padding: 0;
  }
  
  /* box-sizing and font sizing */
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  
  html {
    box-sizing: border-box;
  
    /* Set font size for easy rem calculations
     * default document font size = 16px, 1rem = 16px, 100% = 16px
     * (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
    */
    font-size: 62.5%;
    scroll-behavior: smooth;
  }
  
  /* 1200px / 16px = 75em */
  @media (max-width: 75em) {
    html {
      font-size: 60%;
    }
  }
  
  /* 980px / 16px = 61.25em */
  @media (max-width: 61.25em) {
    html {
      font-size: 58%;
    }
  }
  
  /* 460px / 16px = 28.75em */
  @media (max-width: 28.75em) {
    html {
      font-size: 55%;
    }
  }
  
  /* Base styles */
  
  body {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem; /* 18px */
    font-weight: 400;
    line-height: 1.4;
    color: var(--main-dark);
  }
  
  h1,
  h2 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    text-align: center;
  }
  
  h1 {
    font-size: 6rem;
  }
  
  h2 {
    font-size: 4.2rem;
  }
  
  ul {
    list-style: none;
  }
  ol{
    list-style: disclosure-closed;
    
  }
  
  a {
    text-decoration: none;
    transition: all .3s;
    position: relative;
    color: var(--main-light);
  }
  a:not(.btn){
    
  }
  a:not(.btn):after{
    content:"";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width:100%;
    margin-top:0px;
    /* background:var(--main-gradient); */
    transition:all .35s;
  }
  p a:after{
    background:var(--main-gradient);
  }
  p a:not(.btn):hover,
  p a:not(.btn):focus,
  p a:not(.btn):active,
  li a:not(.btn):hover,
  li a:not(.btn):focus,
  li a:not(.btn):active{
    color: var(--main-three);
  }
  a:not(.btn):hover,
  a:not(.btn):focus,
  a:not(.btn):active{
    cursor: pointer;
  }
  a:not(.btn):hover:after,
  a:not(.btn):focus:after,
  a:not(.btn):active:after{
    bottom: -3px;
    width: 0px;
    /* background:var(--main-gradient); */
  }
  p{
    margin-bottom:2rem;
  }
  b{
    color: var(--main-three);
  }
  u{
    text-decoration: none; 
    position: relative;
  }
  u:after{
    content:"";
    position: absolute;
    bottom:0;
    left: 0;
    height:2px;
    width: 100%;
    background-color: var(--main-four);
  }

  img {
    display: block;
    width: 100%;
  }


/* Colors and BGs */
.color-one{
  color: var(--main-one)
}
.color-two{
color: var(--main-two)
}
.color-three{
color: var(--main-three)
}
.color-four{
color: var(--main-four)
}
.color-light{
color: var(--main-light)
}
.color-dark{
color: var(--main-dark)
}
/*  */
.bg-one{
  background-color: var(--main-one)
}
.bg-two{
background-color: var(--main-two)
}
.bg-three{
background-color: var(--main-three)
}
.bg-four{
background-color: var(--main-four)
}
.bg-light{
background-color: var(--main-light)
}
.bg-dark{
background-color: var(--main-dark)
}
.bg-gradient-main{
background: var(--main-gradient)
}
.bg-gradient-dark{
  background: var(--main-gradient-dark)
}


/* Buttonss */

  .btn {
    display: inline-block;
    position: relative;
    padding: 1rem 2rem;
    border-radius: 2px;
    transition: background 0.3s ease-out;
    cursor: pointer;
    opacity: 1;
    margin-top:0px;
    transition: all .3s;
    margin-bottom:1rem;
  }
  .btn:after {
    content: "";
    position: absolute;
    bottom:0px;
    left: 0px;
    width: 100%;
    background-color: transparent;
    height:2px;
    transition: all .3s;
  }

  .btn:hover,
  .btn:focus,
  .btn:active{
    opacity: .95;
    margin-top:2px;
  }
  .btn:hover:after,
  .btn:focus:after,
  .btn:active:after{
    content: "";
    position: absolute;
    bottom:0px;
    left: 0px;
    height:4px;
  }
  .btn-dark{
    font-size: 2rem;
    cursor: pointer;
    background: var(--main-dark);
    color: var(--main-light);
    transition: background 0.3s ease-out;
    
  }
  .btn-light{
    font-size: 2rem;
    cursor: pointer;
    background: var(--main-light);
    color: var(--main-dark);
    transition: background 0.3s ease-out;
    
  }
  .btn-one{
    font-size: 2rem;
    cursor: pointer;
    background: var(--main-one);
    color: var(--main-light);
    transition: background 0.3s ease-out;
    
  }
  .btn-two{
    font-size: 2rem;
    cursor: pointer;
    background: var(--main-two);
    color: var(--main-light);
    transition: background 0.3s ease-out;
    
  }
  .btn-gradient{
    font-size: 2rem;
    cursor: pointer;
    background: var(--main-gradient);
    color: var(--main-light);
    transition: background 0.3s ease-out;
    
  }
  
  .btn-show-all {
    font-size: 2rem;
    background: var(--main-dark);
    transition: background 0.3s ease-out;
    cursor: pointer;
  }
  
  .btn-show-all:hover {
    background: var(--main-one);
  }
  
  .btn-show-all:hover > i {
    transform: translateX(2px);
  }
  
  .btn-show-all > i {
    margin-left: 10px;
    transform: translateX(0);
    transition: transform 0.3s ease-out;
  }