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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    font-family: "Hacked", Arial, Helvetica, sans-serif;
}

section {
    width: 100%;
    height: 100vh;
    color: #fff;
    background: linear-gradient(0deg, #002c4a, #004677, #0066ad, #0096ff);
    background-size: 400% 400%;
    position: relative;
    -webkit-animation: change 3s ease-in-out forwards;
    animation: change 3s ease-in-out forwards;
}

h1 {
    font-size: 15vw;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-animation:fadein 3s forwards;
    animation: fadein 3s forwards;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.link {
    font-size: 1vw;
    color: #004677;
    position:absolute;
    width:100%;
    bottom:10px;
    text-align:center;
    opacity: 0;
    -webkit-animation:fadein 3s forwards;
    animation: fadein 3s forwards;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

a:link {
    color: #004677;
}

a:visited {
    color: #004677;
}

a:hover {
    color: #004677;
}

a:active {
    color: #004677;
}

@keyframes change {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 100%;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
    }
  }