@import url('https://fonts.googleapis.com/css2?family=Sura:wght@700&display=swap');

body {
    font-family: 'Sura', serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    background: linear-gradient(90deg, hsla(221, 45%, 73%, 1) 0%, hsla(220, 78%, 29%, 1) 100%);
    background-size: 800% 800%;
    -webkit-animation: HueIt 30s ease-in-out infinite;
    -moz-animation: HueIt 30s ease-in-out infinite;
    animation: HueIt 30s ease-in-out infinite;
}

h1 {
    font-size: 6rem;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
    color: #fff;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
h2 {    
    font-size: 4rem;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
    color: #fff;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    
}
@media screen and (max-width: 800px) {
    h1 {
        font-size: 4rem;
    }
}
@media screen and (max-width: 600px) {
    h1 {
        font-size: 3rem;
    }
}
@media screen and (max-width: 400px) {
    h1 {
        font-size: 2rem;
    }
}


footer {
    position: fixed;
    bottom: 0;
    right: 0;
}

footer svg {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    margin-bottom: 12px;
    --svgcolor: #fff;
}

footer a:hover {
    animation: PopIt 1s normal forwards ease-in-out;
}

@-webkit-keyframes HueIt {
    0%{background-position:0% 81%}
    50%{background-position:100% 20%}
    100%{background-position:0% 81%}
}
@-moz-keyframes HueIt {
    0%{background-position:0% 81%}
    50%{background-position:100% 20%}
    100%{background-position:0% 81%}
}
@keyframes HueIt {
    0%{background-position:0% 81%}
    50%{background-position:100% 20%}
    100%{background-position:0% 81%}
}

@keyframes PopIt {
    from {
        opacity: 0;
        transform: scale(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    to {
        transform: scale(1, 1);
    }
}