body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.pfp {
    width: min(15rem, 100%);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;


    border-radius: 10000px;
    box-shadow: 2px 2px 10px var(--babyblue);
}

.pfp:hover {
    box-shadow: none;
    animation: spin 0.67s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/* Buttons */
.button-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    width: min(24rem, 100%);
    max-width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

@media (max-width: 520px) {
    .button-wrapper {
        flex-direction: column;
    }
}

.fade {
    animation: slideIn 0.5s ease-in-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.mainscreen-btn {
    width: 7rem;
    height: 3rem;
    border-radius: 100px;

    /* border: solid white 1px; */
    border: none;

    color: white;
    font-weight: bold;
    font-size: large;
    text-decoration: none;
    transition: scale 0.2s ease-in-out;

    display: flex;
    justify-content: center;
    align-items: center;

}

.mainscreen-btn:hover {
    scale: 1.05;
}

.mainscreen-btn:active {
    scale: 0.9;
}

.blog-btn {
    background-color: var(--babyblue);
    box-shadow: 0px 2px 10px var(--babyblue);

}

.gallery-btn {
    background-color: white;
    color: var(--girlpink);
    box-shadow: 0px 2px 10px white;
}

.project-btn {
    background-color: var(--girlpink);
    box-shadow: 0px 2px 10px var(--girlpink);
}

/* Description */
.description {
    margin: 0;
    margin-top: 2rem;
}