body {
    background: linear-gradient(45deg, #4a106d 0%, #d33d9c 100%);
    background-attachment: fixed;
    min-height: 100vh;
    margin-top: 1vh;
}

.body-text {
    text-align: center;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 1rem;
    padding: 0.75rem;
    width: fit-content;
    height: fit-content;
    margin-left: auto;
    margin-top: 1rem;
    margin-right: auto;
    color: rgb(111, 121, 255);
    font-size: larger;
    font-family: "Paytone One", sans-serif;
}

#pfp {
    width: 15rem;
    height: 15rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    /* Add this */
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 5rem;
    /* Add this */
    /* Add this */
}

#socials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 90%;
    max-width: 900px;
    padding: 1em;
    text-align: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    align-content: center;
}

#display-text {
    text-align: center;
    color: rgb(78, 228, 228);
    font-size: 4rem;
    font-family: "Paytone One", sans-serif;
}

.social-link {
    transition-duration: 0.25s;
    width: 12rem;
    height: 6rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    display: block;
    /* Add this */
    position: relative;
    background: linear-gradient(45deg, rgba(48, 7, 69, 1) 0%, rgba(206, 30, 112, 1) 100%);
    padding: 1rem;
    border-radius: 5rem;
    text-align: center;
    font-size: 2rem;
    font-family: "Paytone One", sans-serif;
    text-decoration: none;
    /* Add this */
    /* Add this */
}

.social-link:hover {
    transition-duration: 0.25s;
    transform: translateY(-10px) scale(1.05);
    background: linear-gradient(45deg, rgba(48, 8, 62, 0.5) 0%, rgba(205, 30, 111, 0.5) 100%);
}

.social-text {
    display: block;
    align-self: center;
    color: rgb(255, 255, 255);
    font-style: normal;
    font-size-adjust: inherit;
}

.social-image {
    display: block;
    align-self: center;
    margin-top: -0.75rem;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.5;
    width: 7.5rem;
    height: 7.5rem;
}

.home-button {
    transition-duration: 0.25s;
    width: 5rem;
    height: 5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    /* Add this */
    position: absolute;
    background: linear-gradient(45deg, rgba(48, 7, 69, 1) 0%, rgba(206, 30, 112, 1) 100%);
    padding: 1rem;
    border-radius: 3rem;
    text-align: center;
    font-size: 2rem;
    font-family: "Paytone One", sans-serif;
    text-decoration: none;
    /* Add this */
    /* Add this */
}

.home-button:hover {
    transition-duration: 0.25s;
    transform: translateY(-4px) scale(1.05);
    background: linear-gradient(45deg, rgba(48, 8, 62, 0.5) 0%, rgba(205, 30, 111, 0.5) 100%);
}

.home-image {
    display: block;
    align-self: center;
    margin-top: 0rem;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.5;
    width: 5rem;
    height: 5rem;
}

@media (max-width: 975px) {
    body {
        margin-left: 20%;
        margin-right: 20%;
    }

    #socials {
        grid-template-columns: repeat(1, 1fr);
        width: 0%;
        gap: 0rem;
        margin-left: 50%;
        margin-top: -3rem;
    }

    .social-link {
        width: 20rem;
        height: 8rem;
        margin-left: -2.5rem;
        margin-top: 3rem;
    }

    .social-image {
        margin-top: -1rem;
        width: 10rem;
        height: 10rem;
    }

    .home-button {
        width: 2.5rem;
        height: 2.5rem;
    }

    .home-image {
        width: 2.5rem;
        height: 2.5rem;
    }
}