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

img {
    width: 70px;
}

body {
    font-size: 19px;
    top: 20px;
    animation: fade-in 2s;
    font-family: coolvetica;
    color: aliceblue;
    background-image: url('../img/mhc_bg.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

body a {
    font-family: coolvetica;
    color: aliceblue;
}

a.navbutton {
    padding: 14px 5px;
    transition: color 300ms ease-out 100ms
}
a.navbutton:hover {
    color: #eb3a3a;
}



div.download {
    position: relative;
    top: 150px;
}
div.downloadinfo {
    position: relative;
    top: 250px;
}
div.info {
    font-size: 19px;
    position: relative;
    top: 150px;
}

a.button {
    backdrop-filter: blur(7.9px);
    -webkit-backdrop-filter: blur(7.9px);
    padding: 14px 16px;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.589);
    border-radius: 15px;
    transition: background-color 300ms ease-out 100ms
}

a.button:hover {
    animation: ease-in-out 2s;
    background-color: rgba(0, 166, 255, 0.836);
}
footer {
    position: relative;
    top: 400px;
    bottom: 2px;
}

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

    100% {
        opacity: 1;
    }
}