@font-face {
  font-family: Audiowide;
  src: url(../fonts/Audiowide/Audiowide-Regular.ttf);
}

@font-face {
  font-family: Exo;
  src: url(../fonts/Exo/Exo-VariableFont_wght.ttf);
}

html,body {
    margin: 0;
    padding: 0;
    font-family: Exo, sans-serif;
}

.section {
    height: 100dvh;
    width: 100dvw;
    margin: 0;
    padding: 0;
}

.bg {
    overflow: hidden;
    height: 100dvh;
    width: 100dvw;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -999;
    background: radial-gradient(circle at 50dvw 150dvh, rgb(0 255 140), rgb(33 0 42), rgb(0 0 0));
}

.bg2 {
    overflow: hidden;
    height: 100dvh;
    width: 100dvw;
    margin: 0;
    padding: 0;
    top: 100dvh;
    left: 0;
    position: absolute;
    z-index: -999;
    background: radial-gradient(circle at 50dvw -50dvh, rgb(0 255 140), rgb(24, 0, 65), rgb(0 0 0));
}

.section h1 {
    position: relative;
    top: 20dvh;
    margin: 0 auto;
    width: fit-content;
    color: rgb(200,200,200);
    font-family: Audiowide, sans-serif;
    font-weight: bolder;
    font-size: 8em;
    animation-name: title-anim;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 0;
    animation-fill-mode: forwards;
}

.section h6 {
    opacity: 0%;
    position: relative;
    top: 18dvh;
    margin: 0 auto;
    width: fit-content;
    color: rgba(200, 200, 200, 0.508);
    font-family: Audiowide, sans-serif;
    font-weight: bolder;
    font-size: 2.4em;
    animation-name: subtitle-anim;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.7s;
}

.nav {
    position: relative;
    top: 25dvh;
    margin: 0 auto;
    width: 0;
    opacity: 0;
    background-color: rgba(0,0,0,0.3);
    padding: 0;
    animation-name: nav-anim;
    animation-duration: 1s;
    animation-delay: 0.7s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.nav-border-top, .nav-border-bottom {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 2dvh;
}

.nav-border-top {
    border-top: solid 1px white;
    border-left: solid 1px white;
    border-right: solid 1px white;
}

.nav-border-bottom {
    border-bottom: solid 1px white;
    border-left: solid 1px white;
    border-right: solid 1px white;
}

.nav-content {
    width: 100%;
    margin: 0;
    height: 20dvh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    opacity: 0%;
    animation-name: subtitle-anim;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
}

.nav-card {
    width: 150px;
    height: 15dvh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    border: solid 1px rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.8s;
    margin: auto 1dvw;
}

.nav-card-maintenance {
    width: 450px;
    height: 20dvh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    border: solid 1px rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.8s;
    margin: auto 1dvw;
}

.nav-card:hover {
    background-color: rgba(0,0,0,0.3);
    border: solid 1px rgba(255,255,255,1);
}

.nav-card img, .nav-card-maintenance img {
    width: 40%;
    margin: auto auto 0 auto;
}

.nav-card p, .nav-card-maintenance p {
    margin: 0 auto auto auto;
    font-size: 1.5em;
    color: white;
}

.anim-line {
    opacity: 0%;
    position: absolute;
    z-index: -998;
    animation-name: line-anim;
    animation-iteration-count: infinite;
    filter: blur(2px);
    transform: rotate(90deg);
}

#anim-line1, #anim-line3, #anim-line5, #anim-line7, #anim-line9 {
    height: 3px;
    width: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 15px rgb(255, 0, 183);
    animation-duration: 30s;
}

#anim-line2, #anim-line4, #anim-line6, #anim-line8, #anim-line10 {
    height: 3px;
    width: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 15px rgb(0, 255, 195);
    animation-duration: 60s;
}

#anim-line11, #anim-line13, #anim-line15, #anim-line17, #anim-line19 {
    height: 3px;
    width: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 15px rgb(255, 255, 255);
    animation-duration: 45s;
}

#anim-line12, #anim-line14, #anim-line16, #anim-line18, #anim-line20 {
    height: 3px;
    width: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 15px rgb(200, 0, 255);
    animation-duration: 50s;
}

.anim-line:nth-of-type(1){
    top: 20dvh;
    left: 56dvw;
    animation-delay: 5s;
}

.anim-line:nth-of-type(3){
    top: 60dvh;
    left: 36dvw;
    animation-delay: 1s;
}

.anim-line:nth-of-type(5){
    top: 40dvh;
    left: 76dvw;
    animation-delay: 0;
}

.anim-line:nth-of-type(7){
    top: 38dvh;
    left: 86dvw;
    animation-delay: 10s;
}

.anim-line:nth-of-type(9){
    top: 10dvh;
    left: 79dvw;
    animation-delay: 7s;
}

.anim-line:nth-of-type(2){
    top: 5dvh;
    left: -5dvw;
    animation-delay: 3s;
}

.anim-line:nth-of-type(4){
    top: 25dvh;
    left: -12dvw;
    animation-delay: 1s;
}

.anim-line:nth-of-type(6){
    top: 44dvh;
    left: 3dvw;
    animation-delay: 10s;
}

.anim-line:nth-of-type(8){
    top: 55dvh;
    left: 36dvw;
    animation-delay: 4s;
}

.anim-line:nth-of-type(10){
    top: 88dvh;
    left: 26dvw;
    animation-delay: 5s;
}

.anim-line:nth-of-type(11){
    top: 77dvh;
    left: 16dvw;
    animation-delay: 3s;
}

.anim-line:nth-of-type(12){
    top: 65dvh;
    left: 3dvw;
    animation-delay: 6s;
}

.anim-line:nth-of-type(13){
    top: 41dvh;
    left: 25dvw;
    animation-delay: 8s;
}

.anim-line:nth-of-type(14){
    top: 48dvh;
    left: 36dvw;
    animation-delay: 15s;
}

.anim-line:nth-of-type(15){
    top: 59dvh;
    left: 41dvw;
    animation-delay: 5s;
}

.anim-line:nth-of-type(16){
    top: 68dvh;
    left: 14dvw;
    animation-delay: 9s;
}

.anim-line:nth-of-type(17){
    top: 18dvh;
    left: 23dvw;
    animation-delay: 4s;
}

.anim-line:nth-of-type(18){
    top: 63dvh;
    left: 68dvw;
    animation-delay: 12s;
}

.anim-line:nth-of-type(19){
    top: 31dvh;
    left: 19dvw;
    animation-delay: 8s;
}

.anim-line:nth-of-type(20){
    top: 78dvh;
    left: 30dvw;
    animation-delay: 15s;
}

.anim-bubbles {
    opacity: 100%;
    position: absolute;
    z-index: -998;
    animation-name: bubble-anim;
    animation-iteration-count: infinite;
    width: 60dvw;
    height: 60dvw;
    border-radius: 30dvw;
    box-shadow: 0 0 150px rgb(0 0 0);
    filter: blur(25px);
}

.anim-bubbles:nth-of-type(1) {
    animation-duration: 15s;
    animation-delay: -1s;
    top: 30dvh;
    left: -9dvw;
    background: linear-gradient(135deg, rgba(255, 44, 150,0.3),rgba(134, 19, 77, 0.5));
}

.anim-bubbles:nth-of-type(2) {
    animation-duration: 19s;
    animation-delay: -5s;
    top: 45dvh;
    left: 30dvw;
    background: linear-gradient(135deg, rgba(44, 255, 150,0.3),rgba(2, 144, 73, 0.5));
}

.anim-bubbles:nth-of-type(3) {
    animation-duration: 25s;
    animation-delay: -10s;
    top: 25dvh;
    left: 60dvw;
    background: linear-gradient(135deg, rgba(255, 178, 35, 0.3),rgba(112, 79, 2, 0.5));
}

@keyframes line-anim {
    0% {opacity: 0; width: 0dvw;}
    5% {opacity: 100%; width: 10dvw;}
    30% {width: 25dvw;}
    95% {width: 75dvw;}
    100% {width: 80dvw; opacity: 0%;}
}

@keyframes title-anim {
    0% {opacity: 0%; top: 50dvh; text-shadow: none;}
    10% {opacity: 100%; top: 50dvh; text-shadow: none;}
    50% {top: 20dvh; text-shadow: none;}
    100%{ text-shadow: 0 0 7px rgb(0, 255, 132);}
}

@keyframes subtitle-anim {
    0% {opacity: 0%;}
    100% {opacity: 100%;}
}

@keyframes nav-anim {
    0% {opacity: 0%; width: 0;}
    100% {opacity: 100%; width: 65dvw;}
}

@keyframes fade-in {
    0% { opacity: 0%;}
    100% {opacity: 100%;}
}

@keyframes bubble-anim {
    0% { transform: translate(0);}
    33% { transform: translate(5dvw, 5dvh);}
    66% { transform: translate(0, -5dvh);}
    100% { transform: translate(0, 0);}
}