body {
    background-color: #44C5B9;
    background-image: linear-gradient(-90deg, #4CB8C4 0%, #3CD2AD 100%);
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    font-family: 'Inter', 'Arial', sans-serif;
    height: 100vh;
    width: 100%;
    font-weight: 400;
}

a {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #fff;
    font-weight: 400;
    outline: 0;
    margin: 5px;
    font-size:16px;
    -webkit-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
      opacity: 0.7;

}

a:hover {
    color: #fff;
    opacity: 1.0;


}

.content {
    margin: auto;
    text-align: center;

}

.logo {
    font-size: 36px;
    color: #fff;
    margin: 0;
    padding-bottom: 40px;
    font-weight: 700;
    -webkit-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;

}



/* mobile */

@media (max-width: 768px) {
    .logo {
        font-size: 28px;
    }
}


/* animation */

.animated {
    animation-duration: 0.7s;
    animation-fill-mode: both;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation-name: zoomIn;
}