/* animated gradient */
.gradient-bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
/* animated gradient */


body {
    text-align: center;
    color: white;
    font-family: "Montserrat", "Helvetica", "Arial", sans-serif;
}

@media (min-width: 600px) {
    body {
        overflow: hidden;
    }
}

.navbar-brand {
    font-size: 2em;
    font-weight: bold;
    font-family: monospace;
}

.nav-item {
    font-size: 2.5em;
}

.center-of-parent {
    position: relative;
    top: 40%;
}

#card {
    color: black;
    position: relative;
}

.avatar {
    border-radius: 100%;
    width: 100%;
}

.avatar-container {
    padding: 20%;
}

.card-link {
    color: black;
}

.card-link :hover {
    color: grey;
}

.card {
    margin: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    border-radius: 3%;
    width: 95%;
    max-width: 400px;
}