h2 {
    color: white;
    text-align: center;
    margin-bottom: 0px;
}

.under-title-text {
    text-align: center;
    margin-top: 5px;
}

h3 { 
    color: white;
    text-align: center;
}

#showcase {
    position: relative; /* needed to position the right side properly */
}

#osu-showcase-wrapper {
    border: 4px solid var(--sydney-main);
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
    width: 60%;
}

#songs-preview {
    border: 4px solid var(--sydney-main);
    border-radius: 15px;
    padding: 10px;
}

#right-side { /* this does come before in the html, but the width calculation is easier to understand this way~ */
    position: absolute;
    right: 0px;
    top: 0px;
    width: calc(40% - 24px - 18px); /* gives a 18px gap between the left and right side, each have 10px padding and 4px border*/
}

#songs-image {
    width: 100%;
    cursor: pointer;
    margin-top: 15px;
}

#gd-display-wrapper {
    display: flex;
}

#maps-showcase-wrapper {
    display: flex;
    flex-direction: column;
}

.gd-thumb {
    display: flex;
    flex-direction: column;
    height: 135px;
    overflow: hidden;
    text-overflow: hidden;
    text-wrap: nowrap;
    width: 100%;
    background-size: cover;
    background-position: center center;
    text-align: right;
    justify-content: center;
    padding-right: 10px;
}

.set-thumb {
    display: flex;
    flex-direction: column;
    min-height: 94px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    text-align: right;
    justify-content: center;
    margin-right: 10px;
}

.gd-title {
    text-align: inherit;
    color: white;
    font-weight: normal;
    font-size: 28px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.gd-link {
    color: inherit;
    text-decoration: none;
}

.gd-artist {
    font-size: 16px;
    margin: 0
}

.gd-text {
    font-family: "Open Sans", sans-serif;
    margin-top: 15px;
    margin-bottom: 0px;
    text-shadow: black 1px 0 5px;
}

.push-text {
    margin-right: 10px;
}

#divider {
    border-left: 4px solid var(--sydney-main);
    height: inherit;
    margin-left: 2%;
    margin-right: 2%;
}

.upper-ranked-text {
    position: absolute; /* only shows up when the relative position is the showcase wrapper */
    color: white;
    font-size: 14px;
    top: calc(15% - 10px);
    width: calc(((33% * 0.6) - 4px)); /* close enough for now, but i wanna find a better solution with js, probably? */
    text-align: center;
    /* should add this to the common folder when i can >_< */
    background: var(--shine);
    -webkit-background-clip: text;
    background-clip: text;
    background-color: #93c47d;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
} @keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.larger-text {
    font-size: 16px;
}

#osugds-logo {
    width: 1.75%;
}

/* mobile */
@media only screen and (max-device-width: 1000px)
{  
    #right-side {
        position: relative;
        width: 100%;
    }

    #osu-showcase-wrapper {
        width: calc(100% - 30px); /* apparently this gets the spacing right, not sure why at all :sob: */
        margin-bottom: 15px;
    }

    #gd-display-wrapper {
        flex-direction: column;
    }

    #osugds-logo {
        width: 2.5%;
    }

    .gd-title {
        margin-right: 10px;
    }

    .gd-artist {
        margin-right: 10px;
    }

    .gd-text {
        margin-right: 10px;
    }

    .gd-thumb {
        margin-right: 10px;
        padding-right: 0px;
    }

    .larger-text {
        font-size: 14px;
    }

    .upper-ranked-text {
        font-size: 12px;
        width: calc(100% - 30px);
        top: 137.5px; /* this is based on nothing and really sucks :3 */
    }
}