@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Merienda:wght@300..900&display=swap');

body {
    background-image: url("../images/background.png");
    background-size: cover;
    background-color: black;
    min-height: 100vh;
    animation-name: fade-in;
    animation-duration: 1s;
    font-weight: 300;
    font-family: "Kalam", cursive;
    /* font-family: "Merienda", cursive; */
}

.main-card {
    box-shadow: 0px 0px 7px 1px #000000af;
    background-color: rgba(5, 4, 8, 0.88);
    animation-name: bounce-in;
    animation-duration: 0.5s;
}

.link-box {
    background-color: rgba(43, 43, 48, 0.447);
}

.link {
    text-decoration: none;
    color: white;
    font-size: 30px;
}

#pfp {
    width: 40%;
    filter: drop-shadow(0px 0px 5px #e8e8e891);
}

@keyframes bounce-in {
    0% {transform: translateY(-20px); opacity: 0;}
    100% {transform: translateY(0px); opacity: 1;}
}

@keyframes fade-in {
    0% {background-color: black;}
    100% {opacity: 1;}
}