.wrapper { 
    height: 100%;
    width: 100%;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    background: rgb(10,10,10);
    background: linear-gradient(210deg, rgba(10,10,10,1) 0%, rgba(85,85,85,1) 100%);
    background-size: 250% 180%;
    animation: rainbow 5s ease;
    animation-fill-mode: forwards;
}

.subtitle {
    font-size: larger;
    color: #858585;
}

@keyframes rainbow { 
    0%{background-position:10% 82%}
    100%{background-position:95% 19%;}
}

.center {
    margin-top: 30vh;
    text-align: center;
}

.link {
    font-size: 44px;
    color: #858585;
    text-decoration: none;
    transition: all .3s ease;
}

.link:hover {
    color: #424242;
    transition: all .3s ease;
}

.wobble {
    color: white;
    position: relative;
    animation: wobble 0.75s forwards;
}

@keyframes wobble {
    0% { bottom: -0.2em; }
    33% { bottom: 0.2em; }
    66% { bottom: 0; }
    100% { color: #858585; }
}

.footer {
    color: rgb(255 255 255 / 65%);
    text-align: center;
    position: fixed;
    width: 100%;
    height: 13px;
    cursor: default;
}

@media only screen and (min-width:768px) {
    .logo {
        width: 50%;
    }

    .subtitle {
        font-size: larger;
    }

    .footer {
        font-size: small;
        bottom: 80px;
    }
}

@media only screen and (min-width:400px) and (max-width:768px) {
    .logo {
        width: 60%;
    }

    .subtitle {
        font-size: large;
    }

    .footer {
        font-size: medium;
        bottom: 80px;
    }
}

@media only screen and (max-width:400px) {
    .logo {
        width: 80%;
    }

    .subtitle {
        font-size: medium;
    }
    
    .footer {
        font-size: large;
        bottom: 100px;
    }
}