@font-face {
    font-family: "Druk";
    src: url(../Fonts/Druk-Wide-Bold.ttf);
}

a
{
    text-decoration: none;
}

*
{
    margin: 0;
    padding: 0;
    font-family: 'Lato', 'Helvetica', 'sans-serif';
    color: white;
    scroll-behavior: smooth;
}

body
{
    background-color: #000000;
}

button
{
    cursor: pointer;
}

#ignore
{
    height: 3vh;
}

nav
{
    width: 80vw;
    height: 5vh;
    margin: 3vh auto 0px auto;
}

nav > ul
{
    display: flex;
    list-style-type: none;
}

nav > ul > #nav-right
{
    display: flex;
    justify-content: flex-end;
    width: 75vw;
}

nav > ul > #nav-right > li > a 
{
    padding-right:1.5vw;
}

nav > ul li > a, #increase > #study-link
{
    color: #ffffffdc;
    font-size: 2.5vh;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

nav > ul li > a:hover
{
    color: white;
}


#hero-box
{
    background-color: black;
    display: flex;
    background-image: linear-gradient(#933cb5a9, #000000);
    height: 100vh;
    width: 100vw;
    flex-direction: column;
    position: relative;
}

main
{
    width: 80vw;
    margin: 5vh auto 0px auto;
}

main > h1 
{
    font-family: druk;
    letter-spacing: -0.05em;
    font-size: 9vh;
    transition: all 0.7s ease-in-out;
}

main > h1:hover
{
    letter-spacing: 0.2em;
}

main > h2
{
    width: 45vw;
    font-size: 7vh;
}

main > h2 > i
{
    color:#00ff95
}

main > h3 
{
    width: 45vw;
    color: rgba(255, 255, 255, 0.861);
    margin-top: 2vh;
    font-size: 3.5vh;
}

main > button 
{
    padding: 0.5vh 1vh 0.5vh 1vh;
    margin-top: 5vh;
    font-size: 3vh;
    width: 20vw;
    border-radius: 1.5vw;
    background-color: #4100da;
    border-color: transparent;
    transition: all 0.3s ease-in-out;
}

main > button:hover
{
    transform: scale(1.1, 1.1);
    box-shadow: 2px 7px 96px -2px #3f00d2;
}

main > button:active
{
    transform: scale(1.02);
    box-shadow: 1px 4px 88px -2px #3f00d2;
}

#scroll-down
{
    position: absolute;
    bottom: 5vh;
    font-size: 6vh;
    color: #ffffffdc;
    display: flex;
    align-self: center;
    justify-content: center;
    transform: scale(1.1, 1.1);
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    border: white solid 0.3vh;
    transition: all ease-in-out 0.3s;
    animation: fade 1.5s linear;
}

#scroll-down:hover
{
    color: #000;
    background-color: #fff;
    border: #000 solid 0.3vh;
    box-shadow: 0px 0px 30px 7px #3f00d2;
}

#scroll-down:active
{
    transform: scale(1.02);
    box-shadow: 0px 0px 20px 4px #3f00d2;
}

hr
{
    width: 90vw;
    margin: auto;
    visibility: hidden;
}

#increase
{
    width: 100vw;
    height: 100vh;
    text-align: center;
    background-image: linear-gradient(#000000,#246f42a9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#increase > h2
{
    font-size: 10vh;
    margin-top: 5vh;
}

#increase > #study-link
{
    color: #ffffffdc;
    transition: all ease-in-out 0.3s;
    opacity: 1;
}

#increase > #study-link:hover
{
    color: #fff;
}

.fadeOnClick
{
    animation: fade 4s linear;
}

@keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#counter
{
    color: #3f00d2;
    font-size: 25vh;
}

#short-desc
{
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(#28246fa9, #000000);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#short-desc > h2
{
    font-size: 10vh;
    color: #ffffffdc;
    width: 80vw;
    text-align: center;
}

.scroll-desc {
    position: absolute;
    bottom: 1vh;
    display: flex;
    align-self: center;
    font-size: 1.5vh;
    animation: fade 1.5s linear;
}

.slide-out-left {
	-webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

 @-webkit-keyframes slide-out-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
  }