@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

* {
    margin: 0;
    padding: 0;
    border: 0px;
    box-sizing: border-box;
    font-family: 'Lilita One', sans-serif;
}

.hero {
    display: grid;
    position: relative;
}

.hero * {
    grid-area: 1/1;
}

.bg
{
    background-image: url(./images/background.jpg);
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}

.container
{
    display: flex;
    overflow-x: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.container::-webkit-scrollbar
{
    display: none;
}

.scrolling
{
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    animation: spin 30s infinite linear;
    width: fit-content;
    height: fit-content;
}
 
.thumbnail-link {
    display: inline-block;
    flex-grow: 0;
}

.thumbnail
{
    width: 600px;
    height: 300px;
    flex: 0;
    border-radius: 10px;
    display: block;
    transition: transform 0.3s ease;
}

.thumbnail:hover
{
    transform: scale(1.1);

}

@keyframes spin {
    from {translate: 0;}
    to {translate: -100%;}
}

.profile
{
    display: flex;
    justify-content: center;
}

.profile-info
{
    min-width: 80vw;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
}

.pfp
{
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position: relative;
    width: 256px;
    height: 256px;
}

.handle,
.tag
{
    position: relative;
    z-index: 3;
    -webkit-text-stroke: 3px black;
    text-shadow: 2px 2px 4px #000000;
}

.handle
{
    font-size: 64px;
    color: white;
}

.tag
{
    font-size: 32px;
    font-style: italic;
    color: gray;
}

.socials
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.social-wrapper
{
    display: flex;
    width: 100%;
    max-width: 80vw;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    flex-direction: column;
}

.social
{
    display: flex;
    justify-content: space-between;
    width: 80vw;
}

.instagram,
.x,
.youtube,
.discord
{
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease;
}

.instagram:hover,
.x:hover,
.youtube:hover,
.discord:hover
{
    transform: scale(1.1);
}

.instagram
{
    width: 320px;
    height: 180px;
    margin-right: -74px;
}

.x
{
    width: 180px;
    height: 180px;
    border-radius: 25px;
}

.find-me
{
    position: relative;
    z-index: 3;
    font-size: 72px;
    -webkit-text-stroke: 2px black;
    color: white;
}

.youtube
{
    width: 257px;
    height: 180px;
}

.discord
{
    width: 180px;
    height: 180px;
}

@media (max-width: 768px) {
    .profile-info {
        min-width: 90vw;
        gap: 12px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .pfp {
        width: 160px;
        height: 160px;
    }

    .handle,
    .tag,
    .find-me {
        -webkit-text-stroke: 1px black;
    }

    .handle {
        font-size: clamp(2.5rem, 8vw, 4rem);
    }

    .tag {
        font-size: clamp(1.25rem, 4vw, 2rem);
    }

    .social-wrapper {
        max-width: 90vw;
        min-height: 300px;
    }

    .social {
        width: 100%;
        justify-content: center;
        gap: 0.75rem;
    }

    .instagram {
        width: 120px;
        height: 68px;
        margin-right: 0;
    }

    .x,
    .youtube,
    .discord {
        width: 70px;
        height: 70px;
    }

    .find-me {
        font-size: clamp(2.5rem, 8vw, 4rem);
    }
}