body {
    background-color: #50066d;
    background-size: repeat;
    color: white;
    font-family: soft;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
    background-image: url(images/yes.png);
    animation: scroll 1s linear infinite;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
}

h1 {
    font-family: soft-boldX;
}

.card {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 1vh;
    flex-direction: row;
    width: 80rem;
    height: 50rem;
    gap: 2vh;
    background-color: rgba(119, 0, 255, 0.5);
    backdrop-filter: blur(50px);
    flex-grow: 0;
    flex-shrink: 0;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.527));
}

.name {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 0.5vw;
}

.main-page {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    padding: 2.5vh;
    height: 60rem;
    width: 60rem;
}

.pfp {
    width: 10rem;
    border-radius: 25%;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.527));
}

.pfp:hover {
    transform: rotateY(360deg);
    transition: 1s;
}

.bi {
    background: linear-gradient(#D60270, #9B4F96, #0038A8);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 5vh;
    height: 60rem;
    background-color: rgba(0, 0, 0, 0.253);
}

@font-face {
    font-family: soft;
    src: url(fonts/ProximaSoft-Medium.ttf);
}

@font-face {
    font-family: soft-bold;
    src: url(fonts/ProximaSoft-Bold.ttf);
}

@font-face {
    font-family: soft-boldX;
    src: url(fonts/ProximaSoft-ExtraBold.ttf);
}

@keyframes scroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 303px 267px;
    }
}