#spuddy{
    position: absolute;
    top: -8px;
    left: -8px;
    background: rgba(0,0,0,0.25);
}

@keyframes pulse {
    0%{
        scale: 1.0;
    }
    50%{
        scale: 1.05;
    }
    100%{
        scale: 1.0;
    }

}

.main{
    display: flex;
    gap: 32px;
}

.socials{
    padding: 32px 0;
    gap: 32px;
    display: flex;
    flex-direction: column;
}

.socials a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 2px rgba(0,0,0,0.7);
    padding: 8px;
    border-radius: 8px;
    overflow: hidden;
    transition: 0.25s;
}

.socials a img, .socials a span{
    z-index: 2;
}

.socials a img{
    width: 32px;
}

#spudcloud{
    transition: 0.25s;
    background: #FD5400;
    box-shadow: 0 3px 3px rgba(149, 52, 0, 0.7);
}

#xitter{
    background: #00B2EF;
    box-shadow: 0 3px 3px rgba(0, 97, 149, 0.7);
}

#yt{
    background: #f1f1f1;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.7);
    color: black;
    text-shadow: none;
}

#ig{
    color: black;
    text-shadow: none;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.7);
}

.socials a:hover{
    box-shadow: 0 6px 5px rgba(149, 52, 0, 0.7);
    transform: translateY(-2px);
    animation: pulse 0.5s infinite;
}

#spudcloud:hover canvas{
    filter: brightness(1.1) saturate(2);
}


.diddy{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 64px 0;
}

.wvlogo{
    perspective: 500px;
}

.wvlogo img{
    width: 100%;
}

@media screen and (max-width: 1100px){
    .wvlogo{
        width: 75%;
    }

    .main{
        flex-direction: column;
    }

    h2{
        font-size: 32px;
    }

    a, p{
        font-size: 40px;
    }

    .socials a img{
        width: 64px;
    }
}