:root {
    --bg-color: #fef5;
    --bg-color-2: #fdf5;
    --border-color1: #0006;
    --highlighted-txt-color: #fff;
    --gradient-color: #fef;
}

body {
    overflow: hidden;
    position: relative;
    z-index: 0;
    margin: 0;

    background: linear-gradient(to top left,
            var(--gradient-color),
            #000);
    height: 100vh;
    width: 100vw;
}

a {
    text-decoration: none;
    display: block;
}

.MainContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

    width: 25vw;
    height: 100vh;
    border-right: solid #fff;

    background-color: var(--bg-color);
}

.PFP {
    width: 75%;

    border-radius: 100%;
    border: solid 1vh #fff;

    background-color: var(--bg-color-2);
}

.Description {
    height: 60%;
    width: 70%;
    padding: 0.5em;

    font-family: monospace;
    font-size: 200%;
    text-align: center;
    overflow: hidden;
    word-wrap: break-word;

    border: solid #fff;
    border-radius: 2.5vh;

    background-color: var(--border-color1);
    color: #fff;
}

.SocialsContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5%;

    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);

    width: 25vw;
    height: 30vh;

    border: solid #fff;
    border-radius: 5%;

    background-color: var(--border-color1);
}

.SocialElement {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;

    height: 9vh;

    left: 0;
    transition: left 0.25s ease-in-out,
        color 0.25s ease-in-out;
}

.SocialElement2 {
    position: relative;
    display: flex;
    justify-content: right;
    align-items: center;

    height: 9vh;

    right: 0;
    transition: right 0.25s ease-in-out,
        color 0.25s ease-in-out;
}

.SocialElement:hover {
    left: 10%;
    transition: left 0.25s ease-in-out;
}
.SocialElement2:hover {
    right: 10%;
    transition: right 0.25s ease-in-out;
}

.SocialElement:hover p {
    color: var(--highlighted-txt-color);
    transition: color 0.25s ease-in-out;
}
.SocialElement2:hover p {
    color: var(--highlighted-txt-color);
    transition: color 0.25s ease-in-out;
}

.SocialIMG {
    height: 100%;

    border-radius: 15%;
}

.SocialTXT {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;
    width: 100%;

    font-family: monospace;
    text-align: center;
    font-size: 250%;
    font-weight: bold;

    color: #000;
}

.NowPlaying {
    position: relative;
    top: 45vh;
    left: 20vw;

    width: 80vw;
    height: 5vh;

    font-family: monospace;
    text-align: right;
    font-size: 250%;

    color: #000;
    transition: color 0.25s ease-in-out;
}

.NowPlaying:Hover {
    color: var(--highlighted-txt-color);
    transition: color 0.25s ease-in-out;
}

#RotatingBGCube1 {
    position: fixed;
    justify-content: center;
    align-items: center;
    z-index: -1;

    width: 100vh;
    height: 100vh;

    opacity: 0;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: var(--bg-color);
}

#RotatingBGCube1-1 {
    z-index: -1;

    width: 50%;
    height: 50%;
    transform: translate(50%, 50%);

    background-color: var(--bg-color-2);
}

.MusicToggler {
    position: relative;
    height: 15vh;
    width: 20vw;

    top: 40vh;
    left: 50vw;
    border-radius: 100vw;
    transform: translateX(-50%);

    background-color: var(--border-color1);
    border: solid #fff;
}

.MusicThumb {
    position: relative;
    height: 10vh;
    width: 10vh;

    top: 50%;
    left: 10%;
    transform: translate(-10%, -50%);

    border-radius: 100%;

    background-color: #fff;

    transition: top 0.25s ease-out,
        left 0.25s ease-out,
        transform 0.25s ease-out;
}

.MusicThumb.active {
    top: 50%;
    left: 90%;
    transform: translate(-90%, -50%);

    transition: top 0.25s ease-out,
        left 0.25s ease-out,
        transform 0.25s ease-out;
}

/* === Mobile Version === */
@media (max-width: 768px) {
    body {
        height: auto;
        width: 100vw;
        overflow-y: auto;
        background: linear-gradient(to top left, var(--gradient-color), #000);
    }

    .MainContainer {
        position: relative;
        width: 100vw;
        height: auto;
        border-right: none;
        border-bottom: solid #fff;
    }

    .PFP {
        width: 50%;
        border-width: 0.5vh;
        margin-top: 2vh;
    }

    .Description {
        width: 85%;
        font-size: 140%;
        height: auto;
        margin-bottom: 3vh;
    }

    .SocialsContainer {
        position: relative;
        overflow: hidden;
        top: 0;
        left: 0;
        transform: none;

        width: 80vw;
        height: auto;
        margin: 5vh auto;
        border-radius: 3vh;
    }

    .SocialElement,
    .SocialElement2 {
        justify-content: center;
        height: 8vh;
        left: 0;
        right: 0;
        transition: none;
        border: solid 0.1vh #fff;
    }

    .SocialElement:hover,
    .SocialElement2:hover {
        left: 0;
        right: 0;
    }

    .SocialElement p,
    .SocialElement2 p {
        font-size: xx-large;
        color: #fff;
    }

    .SocialIMG {
        height: 7vh;
    }

    .SocialTXT {
        font-size: x-large;
    }

    .NowPlaying {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        text-align: center;
        font-size: xx-large;
        margin-top: 3vh;
    }

    .MusicToggler {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60vw;
        height: 10vh;
        margin-bottom: 5vh;
    }

    .MusicThumb {
        width: 7vh;
        height: 7vh;
    }

    .MusicThumb.active {
        left: 90%;
        transform: translate(-90%, -50%);
    }

    #RotatingBGCube1 {
        width: 100vw;
        height: 100vw;
    }

    #RotatingBGCube1-1 {
        width: 50%;
        height: 50%;
    }
}