@font-face {
    font-family: amped;
    src: url('../assets/font/amped.ttf') format('truetype');
}
@font-face {
    font-family: jersey;
    src: url('../assets/font/jersey.ttf') format('truetype');
}

body {
    background:black;
    font-family: amped;
    color:white;
    padding:0px;
    margin:0px;
    overflow-x: hidden;
    overflow-y:scroll
}

.nav {
    position: fixed;
    width:100%;
    padding:5px 15px;
    box-sizing: border-box;
    display: flex;
    z-index: 10;
}

.banner {
    z-index: -1;
    margin:0px;
    width:100%;
    margin-bottom:100px;
    display:block;
}

a {
    text-decoration: none;
    color:gray;
}

.nav .left {
    float:left;
    font-size: 20px;
}
.nav .right {
    float:right;
    color:gray;
    margin-left: auto;
    display: flex;
    align-items: center;
}
.nav .right .selected {
    color:white;
    cursor: default;
}
.nav .right span {
    
    margin-right:12px;
}
.nav .right span:hover {
    color:white;
}
.nav .right a {
    cursor: pointer;
}

.footer {
    width:100%;
    bottom:0px;
    margin-top:70.5vh;
    background-image: url('/assets/cover/footer.png');
    height:250px;


    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 10;
}

.footer2 {
    width:100%;
    bottom:0px;
    margin-top:40px;
    background-image: url('/assets/cover/footer.png');
    height:250px;


    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 10;
}

body::-webkit-scrollbar {
    display: none;
  }
  /* width */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #000000;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  @keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px); 
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

img {
  animation: fadeIn 1s ease-out forwards;
  opacity: 0;
}