:root
{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: "Arial";
}

body
{
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--pageBackground);
}

div.CarouselParent
{
    width: 100%;
    border-bottom: min(0.8vw, 8px) solid var(--generalBoxHighlight);
    transition: transform 0.4s ease;

    display: flex;
    align-items: center;
    justify-content: center;
}
h1.Title
{
    position: absolute;
    top: min(22.5vh, 150px);
    margin: 0;
    font-size: min(12vw, 80px);

    font-weight: bold;
    color: var(--title);
    text-shadow:
        min(0.45vw, 3px) min(0.45vw, 3px) 0 var(--titleShadowHigh),
        max(-0.45vw, -3px) min(0.45vw, 3px) 0 var(--titleShadowMid),
        min(0.45vw, 3px) max(-0.45vw, -3px) 0 var(--titleShadowMid),
        max(-0.45vw, -3px) max(-0.45vw, -3px) 0 var(--titleShadowLow);
    z-index: 5;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

div.Carousel
{
    display: flex;
    will-change: transform;
    transition: transform 0.5s ease-in-out;
}
span.Carousel
{
    margin: 0;
    aspect-ratio: 1 / 0.5625;
    height: min(48vh, 320px);
    flex-shrink: 0;

    background-size: cover;
}

#Left
{
    left: min(7vw, 70px);
}
#Right
{
    right: min(7vw, 70px);
}
button.Carousel
{
    position: absolute;
    height: min(15vw, 100px);
    width: min(15vw, 100px);
    top: min(22.5vh, 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.Carrier
{
    margin: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

h2.Carrier#white
{
    background-color: var(--generalBoxBackground);
    border-top: min(0.8vw, 8px) solid var(--generalBoxHighlight);
    border-bottom: min(0.8vw, 8px) solid var(--generalBoxShading);
    
    color: var(--generalHeading);
    text-shadow:
        min(0.2vw, 2px) min(0.2vw, 2px) 0 var(--generalHeadingShadowHigh),
        max(-0.2vw, -2px) max(-0.2vw, -2px) 0 var(--generalHeadingShadowLow);
}
h2.Carrier#blue
{
    background-color: var(--generalBoxBackgroundB);
    border-top: min(0.8vw, 8px) solid var(--generalBoxHighlightB);
    border-bottom: min(0.8vw, 8px) solid var(--generalBoxShadingB);
    
    color: var(--generalHeadingB);
    text-shadow:
        min(0.2vw, 2px) min(0.2vw, 2px) 0 var(--generalHeadingShadowHighB),
        max(-0.2vw, -2px) max(-0.2vw, -2px) 0 var(--generalHeadingShadowLowB);
}

h2.Carrier
{
    padding: min(1vw, 10px);
    margin: min(3vw, 30px) 0 min(1vw, 10px) 0;
    font-size: min(4vw, 40px);
    font-weight: bold;

    text-align: center;
    position: relative;
    top: min(1vw, 10px);
}

div#white
{
    background-color: var(--generalBoxBackground);
    border-top: min(0.8vw, 8px) solid var(--generalBoxHighlight);
    border-left: min(0.8vw, 8px) solid var(--generalBoxHighlight);
    border-bottom: min(0.8vw, 8px) solid var(--generalBoxShading);
    border-right: min(0.8vw, 8px) solid var(--generalBoxShading);
}
div#blue
{
    background-color: var(--generalBoxBackgroundB);
    border-top: min(0.8vw, 8px) solid var(--generalBoxHighlightB);
    border-left: min(0.8vw, 8px) solid var(--generalBoxHighlightB);
    border-bottom: min(0.8vw, 8px) solid var(--generalBoxShadingB);
    border-right: min(0.8vw, 8px) solid var(--generalBoxShadingB);
}

div.Game
{
    height: min(38.6vw, 386px);
    width: min(28.6vw, 286px);
    margin: min(4vw, 40px);
    border-radius: min(2vw, 20px);

    transition: transform 0.15s ease;
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
}
div.Game:hover
{
    outline: min(0.5vw, 5px) solid var(--generalBoxOutline);
    transform: scaleX(1.08) scaleY(1.06);
}
div.Game:active
{
    outline: min(0.5vw, 5px) solid var(--generalBoxOutline);
    transform: scaleX(0.96) scaleY(0.97);
}

div.Price
{
    margin: 0;
    font-weight: normal;
    font-size: min(3vw, 30px);
    margin: min(1.5vw, 15px);

    position: relative;
    flex: 0 0 auto;
    top: 0;
    color: var(--generalPrice);
}

div.GameBox
{
    width: calc(100% - min(1.6vw, 16px));
    height: calc(100% - min(1.6vw, 16px));
    border-radius: min(2vw, 20px);
    margin: 0;
    
    transition: transform 0.15s ease;
    display: flex;
    flex-direction: column;
}
div.GameBox:hover
{
    filter: brightness(90%);
}
div.GameBox:active
{
    filter: brightness(75%);
}

div.TextGroup
{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
div.ImageGroup
{
    display: flex;
    justify-content: center;
    align-items: center;
}

h1.GameBox#white
{
    color: var(--generalHeading);
}
h1.GameBox#blue
{
    color: var(--generalHeadingB);
}
h1.GameBox
{
    margin: 0 min(1vw, 10px);
    font-size: min(2.2vw, 22px);
    font-weight: bold;

    text-align: center;
    position: relative;
}

p.GameBox#white
{
    color: var(--generalText);
}
p.GameBox#blue
{
    color: var(--generalTextB);
}
p.GameBox
{
    padding: 0;
    margin: min(1vw, 10px) min(2vw, 20px);
    font-size: min(1.8vw, 18px);
    font-weight: normal;
}

h3#white
{
    background-color: var(--generalBoxImageBackground);
    border-top: min(0.6vw, 6px) solid var(--generalBoxImageHighlight);
    border-left: min(0.6vw, 6px) solid var(--generalBoxImageHighlight);
    border-bottom: min(0.6vw, 6px) solid var(--generalBoxImageShading);
    border-right: min(0.6vw, 6px) solid var(--generalBoxImageShading);
}
h3#blue
{
    background-color: var(--generalBoxImageBackgroundB);
    border-top: min(0.6vw, 6px) solid var(--generalBoxImageHighlightB);
    border-left: min(0.6vw, 6px) solid var(--generalBoxImageHighlightB);
    border-bottom: min(0.6vw, 6px) solid var(--generalBoxImageShadingB);
    border-right: min(0.6vw, 6px) solid var(--generalBoxImageShadingB);
}

h3.GameBox
{
    margin: min(2.2vw, 22px);
    height: min(18vw, 180px);
    width: min(18vw, 180px);
    border-radius: min(2.5vw, 25px);
}
h4.GameBox
{
    margin: 0;
    aspect-ratio: 1 / 1;
    height: 100%;

    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* box-shadow: 0 0 min(0.4vw, 4px) min(0.4vw, 4px) var(--generalBoxImageShading); */
    border-radius: min(2vw, 20px);
}