div.DisplayParent
{
    width: 100%;
    margin: min(4.5vw, 45px) 0 0 0;

    position: relative;
    display: flex;
    justify-content: center;
}
div.Display
{
    padding: min(2.5vw, 25px);
    margin: 0;
    
    border-radius: min(1vw, 10px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--titleBoxBackground);
    border-top: min(0.6vw, 6px) solid var(--titleBoxHighlight);
    border-left: min(0.6vw, 6px) solid var(--titleBoxHighlight);
    border-bottom: min(0.6vw, 6px) solid var(--titleBoxShading);
    border-right: min(0.6vw, 6px) solid var(--titleBoxShading);
}

div.CarouselParent
{
    position: relative;
    aspect-ratio: 1 / 0.5625;
    height: min(40vw, 400px);
    border-bottom: min(0.8vw, 8px) solid var(--titleBoxHighlight);
    border-radius: min(0.5vw, 5px) min(0.5vw, 5px) 0 0;
    
    overflow: hidden;
    border-top: min(0.6vw, 6px) solid var(--barButtonShadingB);
    border-left: min(0.6vw, 6px) solid var(--barButtonShadingB);
    border-bottom: min(0.6vw, 6px) solid var(--barButtonHighlightB);
    border-right: min(0.6vw, 6px) solid var(--barButtonHighlightB);
}
p.CarouselParent
{
    aspect-ratio: 1 / 0.5625;
    height: min(40vw, 400px);
    margin: 0;
    padding: 0;
    transition: transform 0.4s ease;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.Carousel
{
    display: flex;
    will-change: transform;
    transition: transform 0.5s ease-in-out;
}
video.Carousel
{
    aspect-ratio: 1 / 0.5625;
    height: min(40vw, 400px);
    margin: 0;
    padding: 0;

    flex-shrink: 0;
    border: none;
    background-size: cover;
}
span.Carousel
{
    aspect-ratio: 1 / 0.5625;
    height: min(40vw, 400px);
    margin: 0;
    flex-shrink: 0;
    background-size: cover;
}

div.VideoOverlay
{
    --index: 0;
    position: absolute;
    aspect-ratio: 1 / 0.5625;
    height: min(40vw, 400px);

    left: calc(var(--index) * min(40vw, 400px) / 0.5625);
    margin: 0;
    transition: opacity 0.2s ease;
}
div.VideoOverlayBackground
{
    aspect-ratio: 1 / 0.5625;
    height: min(40vw, 400px);
    left: 0;
    margin: 0;
    pointer-events: auto;
    z-index: 0;
}
p.VideoOverlay
{
    position: absolute;
    width: min(3.5vw, 35px);
    height: min(3.5vw, 35px);
    border-radius: min(2vw, 20px);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;

    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-position: center;
    z-index: 2;

    background-color: var(--titleBoxBackgroundB);
    border-top: min(0.3vw, 3px) solid var(--titleBoxHighlightB);
    border-left: min(0.3vw, 3px) solid var(--titleBoxHighlightB);
    border-bottom: min(0.3vw, 3px) solid var(--titleBoxShadingB);
    border-right: min(0.3vw, 3px) solid var(--titleBoxShadingB);
    outline: min(0.15vw, 1.5px) solid var(--videoOverlayOutline);
}

button.VideoOverlay
{
    width: min(2.7vw, 27px);
    height: min(2.7vw, 27px);
    margin: min(0.5vw, 5px) min(1vw, 10px);
    border-radius: min(0.5vw, 5px);
    cursor: pointer;

    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
    pointer-events: auto;
    z-index: 2;

    background-repeat: no-repeat;
    background-size: 90% 90%;
    background-position: center;
    transition: transform 0.1s ease;

    background-color: var(--titleBoxBackgroundB);
    border-top: min(0.3vw, 3px) solid var(--titleBoxHighlightB);
    border-left: min(0.3vw, 3px) solid var(--titleBoxHighlightB);
    border-bottom: min(0.3vw, 3px) solid var(--titleBoxShadingB);
    border-right: min(0.3vw, 3px) solid var(--titleBoxShadingB);
    outline: min(0.15vw, 1.5px) solid var(--videoOverlayOutline);
}
button.VideoOverlay:hover
{
    outline: min(0.25vw, 2.5px) solid var(--barButtonOutline);
    filter: brightness(90%);
    transform: scaleX(1.1) scaleY(1.1);
}
button.VideoOverlay:active
{
    outline: min(0.25vw, 2.5px) solid var(--barButtonOutline);
    filter: brightness(75%);
    transform: scaleX(0.96) scaleY(0.96);
}

div.VideoProgress
{
    width: 87%;
    height: min(1vw, 10px);
    margin: min(1vw, 10px) min(1.5vw, 15px);
    border-radius: min(0.5vw, 5px);
    padding: 0;

    position: absolute;
    bottom: 0;
    left: 0;
    cursor: pointer;
    pointer-events: auto;

    background-color: var(--titleBoxBackground);
    border-top: min(0.3vw, 3px) solid var(--titleBoxHighlight);
    border-left: min(0.3vw, 3px) solid var(--titleBoxHighlight);
    border-bottom: min(0.3vw, 3px) solid var(--titleBoxShading);
    border-right: min(0.3vw, 3px) solid var(--titleBoxShading);
    outline: min(0.15vw, 1.5px) solid var(--videoOverlayOutline);
}
div.VideoProgress:hover span
{
    outline: min(0.25vw, 2.5px) solid var(--barButtonOutline);
    filter: brightness(90%);
    transform: scaleX(1.1) scaleY(1.1) translate(-50%, -50%);
}
div.VideoProgress:active span
{
    outline: min(0.25vw, 2.5px) solid var(--barButtonOutline);
    filter: brightness(75%);
    transform: scaleX(0.96) scaleY(0.96) translate(-50%, -50%);
}

p.VideoProgress
{
    width: 100%;
    height: 100%;
    border-radius: min(0.5vw, 5px);
    padding: 0;
    margin: 0;

    pointer-events: none;
    position: relative;
    right: min(0.3vw, 3px);
    bottom: min(0.3vw, 3px);

    background-color: var(--progressBarBackground);
    border-top: min(0.3vw, 3px) solid var(--progressBarHighlight);
    border-left: min(0.3vw, 3px) solid var(--progressBarHighlight);
    border-bottom: min(0.3vw, 3px) solid var(--progressBarShadow);
    border-right: min(0.3vw, 3px) solid var(--progressBarShadow);
}
span.VideoProgress
{
    width: min(2vw, 20px);
    height: min(2vw, 20px);
    border-radius: min(1vw, 10px);

    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;
    pointer-events: none;

    background-color: var(--titleBoxBackgroundB);
    border-top: min(0.3vw, 3px) solid var(--titleBoxHighlightB);
    border-left: min(0.3vw, 3px) solid var(--titleBoxHighlightB);
    border-bottom: min(0.3vw, 3px) solid var(--titleBoxShadingB);
    border-right: min(0.3vw, 3px) solid var(--titleBoxShadingB);
    outline: min(0.15vw, 1.5px) solid var(--videoOverlayOutline);
}

#Left
{
    left: min(3vw, 30px);
}
#Right
{
    right: min(3vw, 30px);
}
button.Carousel
{
    position: absolute;
    height: min(7vw, 70px);
    width: min(7vw, 70px);
    top: min(15vw, 150px);

    border: none;
    background: none;
    cursor: pointer;
    
    background-size: 100% 100%;
    transition: transform 0.1s ease, opacity 0.2s ease;
    z-index: 5;
}
button.Carousel.Bottom
{
    opacity: 0;
}
button.Carousel:hover
{
    transform: scale(1.1);
    filter: brightness(90%);
}
button.Carousel:active
{
    transform: scale(0.95);
    filter: brightness(75%);
}

div.MediaBar
{
    width: 100%;
    border-radius: 0 0 min(0.5vw, 5px) min(0.5vw, 5px);
    position: relative;
    display: flex;
    flex-direction: row;

    box-sizing: border-box;
    border-top: min(0.3vw, 3px) solid var(--barButtonHighlightB);
    border-left: min(0.3vw, 3px) solid var(--barButtonHighlightB);
    border-bottom: min(0.3vw, 3px) solid var(--barButtonShadingB);
    border-right: min(0.3vw, 3px) solid var(--barButtonShadingB);
}
span.MediaBar
{
    position: absolute;
    height: min(7vw, 70px);
    border-radius: min(0.2vw, 2px);
    pointer-events: none;

    z-index: 1;
    transition: transform 0.4s ease;
    outline: min(0.4vw, 4px) solid var(--barButtonOutline);
}

button.MediaBar
{
    position: relative;
    height: min(7vw, 70px);
    border-radius: min(0.2vw, 2px);
    margin: 0;
    padding: 0;
    flex: 1 1 auto;

    cursor: pointer;
    transition: transform 0.1s ease;
    pointer-events: auto;

    background-size: cover;
    border-top: min(0.3vw, 3px) solid var(--barButtonHighlightB);
    border-left: min(0.3vw, 3px) solid var(--barButtonHighlightB);
    border-bottom: min(0.3vw, 3px) solid var(--barButtonShadingB);
    border-right: min(0.3vw, 3px) solid var(--barButtonShadingB);
}
button.MediaBar:hover
{
    /* outline: min(0.25vw, 2.5px) solid var(--barButtonOutline); */
    filter: brightness(90%);
    transform: scaleX(1.08) scaleY(1.08);
}
button.MediaBar:active
{
    /* outline: min(0.25vw, 2.5px) solid var(--barButtonOutline); */
    filter: brightness(75%);
    transform: scaleX(0.96) scaleY(0.96);
}

div.VideoIcon
{
    position: absolute;
    width: min(2.5vw, 25px);
    height: min(2.5vw, 25px);
    border-radius: min(2vw, 20px);

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

    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-position: center;
    z-index: 2;

    background-color: var(--titleBoxBackgroundB);
    border-top: min(0.3vw, 3px) solid var(--titleBoxHighlightB);
    border-left: min(0.3vw, 3px) solid var(--titleBoxHighlightB);
    border-bottom: min(0.3vw, 3px) solid var(--titleBoxShadingB);
    border-right: min(0.3vw, 3px) solid var(--titleBoxShadingB);
    outline: min(0.15vw, 1.5px) solid var(--videoOverlayOutline);
}

p.Display
{
    padding: 0;
    margin: 0;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.GameInfo
{
    width: min(40vw, 400px);
    margin: 0;

    display: flex;
    justify-content: left;
    align-items: center;
}
p.GameInfo
{
    margin: min(2vw, 20px) min(2vw, 20px) 0 min(2vw, 20px);
    width: min(24vw, 240px);
    height: min(3.5vw, 35px);
    padding: 0 min(0.75vw, 7.5px);
    border-radius: min(0.5vw, 5px);

    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    font-size: min(1.65vw, 16.5px);

    background-color: var(--barButtonBackgroundB);
    border-top: min(0.2vw, 2px) solid var(--barButtonShadingB);
    border-left: min(0.2vw, 2px) solid var(--barButtonShadingB);
    border-bottom: min(0.2vw, 2px) solid var(--barButtonHighlightB);
    border-right: min(0.2vw, 2px) solid var(--barButtonHighlightB);
    color: var(--generalInfoB);
}
h1.GameInfo
{
    margin: min(2vw, 20px) 0 0 0;
    font-weight: bold;
    font-size: min(2.7vw, 27px);
    color: var(--generalHeading);
}
h2.GameInfo
{
    padding: 0;
    margin: min(2vw, 20px) 0 0 0;
    width: min(10vw, 100px);
    height: min(3.5vw, 35px);
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: end;

    font-weight: 600;
    font-size: min(1.8vw, 18px);
    color: var(--generalHint);
}

div.Download
{
    position: relative;
    bottom: min(0.1vw, 1px);
    width: min(25vw, 250px);
    height: min(4vw, 40px);
    margin: min(2.5vw, 25px) 0 0 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}
button.Download
{
    width: min(25vw, 250px);
    height: min(4vw, 40px);
    margin: 0;
    padding: 0;
    
    border-radius: min(0.5vw, 5px);
    box-sizing: content-box;
    cursor: pointer;
    z-index: 1;

    transition: transform 0.1s ease;
    position: relative;
    pointer-events: auto;
}
button.Download:hover
{
    outline: min(0.25vw, 2.5px) solid var(--barButtonOutline);
    filter: brightness(90%);
    transform: scaleX(1.04) scaleY(1.1);
}
button.Download:active
{
    outline: min(0.25vw, 2.5px) solid var(--barButtonOutline);
    filter: brightness(75%);
    transform: scaleX(0.98) scaleY(0.95);
}

p.DownloadHint
{
    width: min(30vw, 300px);
    margin: min(2.5vw, 25px) 0 0 0;
    padding: 0;

    text-align: center;
    font-size: min(1.8vw, 18px);
    color: var(--generalHint);
}

p.Download
{
    width: 100%;
    height: min(4vw, 40px);
    margin: 0;
    padding: 0;

    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
span.Download
{
    margin: 0 min(1vw, 10px);
    font-weight: 600;
    font-size: min(1.25vw, 12.5px);
    color: var(--barButtonB);
}
img.Download
{
    width: min(2.2vw, 22px);
    height: min(2vw, 20px);
    margin: 0 min(1vw, 10px);
    flex: 0 0 auto;

    border-radius: min(0.5vw, 5px);
    background-repeat: no-repeat;
    background-size: 90% 90%;
    background-position: center;
    
    background-color: var(--downloadIconBackgroundB);
    border-top: min(0.2vw, 2px) solid var(--downloadIconShadingB);
    border-bottom: min(0.2vw, 2px) solid var(--downloadIconHighlightB);
    border-left: min(0.2vw, 2px) solid var(--downloadIconShadingB);
    border-right: min(0.2vw, 2px) solid var(--downloadIconHighlightB);
}

div#hidden, button#hidden, h1#hidden {
    display: none;
}
div.DownloadOptions {
    width: min(20vw, 200px);
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    
    border-radius: min(0.5vw, 5px);
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: var(--barButtonBackgroundB);
    border-top: min(0.2vw, 2px) solid var(--barButtonHighlightB);
    border-bottom: min(0.2vw, 2px) solid var(--barButtonShadingB);
    border-left: min(0.2vw, 2px) solid var(--barButtonHighlightB);
    border-right: min(0.2vw, 2px) solid var(--barButtonShadingB);
}

button.DownloadOptions {
    width: min(20vw, 200px);
    height: min(4.5vw, 45px);
    flex: 0 0 auto;
    padding: 0;
    margin: 0;

    border-radius: min(0.5vw, 5px);
    cursor: pointer;
    pointer-events: auto;
    font-weight: 600;
    font-size: min(1.25vw, 12.5px);

    transition: transform 0.1s ease;
    background-color: var(--barButtonBackgroundB);
    border-top: min(0.2vw, 2px) solid var(--barButtonHighlightB);
    border-left: min(0.2vw, 2px) solid var(--barButtonHighlightB);
    border-bottom: min(0.2vw, 2px) solid var(--barButtonShadingB);
    border-right: min(0.2vw, 2px) solid var(--barButtonShadingB);
    color: var(--barButtonB);
}
button.DownloadOptions:hover
{
    outline: min(0.25vw, 2.5px) solid var(--barButtonOutline);
    filter: brightness(90%);
    transform: scaleX(1.04) scaleY(1.1);
}
button.DownloadOptions:active
{
    outline: min(0.25vw, 2.5px) solid var(--barButtonOutline);
    filter: brightness(75%);
    transform: scaleX(0.98) scaleY(0.95);
}

div.Section
{
    width: 100%;
    display: flex;
    flex-direction: column;
    /* transition: transform 0.4s ease; */
}
/* div.Section:hover
{
    transform: ScaleX(1.02) ScaleY(1.02);
} */

@media (max-width: 1300px) {
    div.Display {
        flex-direction: column;
    }

    h2.GameInfo {
        width: min(12vw, 120px);
    }
    p.GameInfo {
        width: min(42vw, 420px);
    }
    div.GameInfo {
        width: min(60vw, 600px);
    }

    p.DownloadHint {
        width: min(80vw, 800px);
    }
}

@media (max-width: 700px) {
    h1.GameInfo {
        font-size: min(3.2vw, 32px);
    }
    h2.GameInfo {
        font-size: min(2.4vw, 24px);
    }
    p.GameInfo {
        height: min(4.2vw, 42px);
        font-size: min(2.3vw, 23px);

        border-top: min(0.3vw, 3px) solid var(--barButtonShadingB);
        border-left: min(0.3vw, 3px) solid var(--barButtonShadingB);
        border-bottom: min(0.3vw, 3px) solid var(--barButtonHighlightB);
        border-right: min(0.3vw, 3px) solid var(--barButtonHighlightB);
    }

    p.DownloadHint {
        font-size: min(2.4vw, 24px);
    }

    span.Download
    {
        font-size: min(1.5vw, 15px);
    }

    div.Download
    {
        width: min(35vw, 350px);
        height: min(5.5vw, 55px);
    }
    p.Download
    {
        height: min(5.5vw, 55px);
    }
    button.Download#blue
    {
        width: min(35vw, 350px);
        height: min(5.5vw, 55px);

        border-top: min(0.3vw, 3px) solid var(--barButtonHighlightB);
        border-left: min(0.3vw, 3px) solid var(--barButtonHighlightB);
        border-bottom: min(0.3vw, 3px) solid var(--barButtonShadingB);
        border-right: min(0.3vw, 3px) solid var(--barButtonShadingB);
    }

    div.DownloadOptions {
        width: min(26vw, 260px);
    }

    button.DownloadOptions {
        width: min(26vw, 260px);
        height: min(5.5vw, 55px);
    }
}