* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
            
body {
    overflow: hidden;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    text-align: justify;
    color: rgb(35, 35, 35);
    background-color: #f7f7f7;
}

h1 {
    padding-bottom: 16px;
}

h2, h3 {
    padding-bottom: 12px;
}

p {
    padding-bottom: 12px;
}
            
#container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #222;
    background-size: cover;
    background-repeat: no-repeat;
}
            
#carousel, #navigation {
    flex: initial;
    display: block;
    z-index: 1;
}

#carousel {
    overflow: hidden;
    margin-top: -256px;
    width: 700px;
    height: 600px;
    border-radius: 8px;
    background-color: #fff;
    opacity: 0.95;
}

.p-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
} 

[class^="panel_"] {
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
    padding: 48px;
}

[class^="label_"] {
    display: block;
    cursor: pointer;
    margin: 8px 0;
    width: 64px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    color: #aaa;
    background-color: #fff;
    transition: all 0.4s ease;
}
            
[class^="label_"]:hover {
    color: #444;
    background-color: #ffeed9;
}

#navigation {
    margin-left: 24px;
    margin-top: -256px;
}
            
#button_a:checked ~ #navigation .label_a,
#button_b:checked ~ #navigation .label_b,
#button_c:checked ~ #navigation .label_c,
#button_d:checked ~ #navigation .label_d {
     cursor: default;
     color: #fff;
     background-color: #222;
}

#button_a:checked ~ #carousel .p-wrapper {
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}
            
#button_b:checked ~ #carousel .p-wrapper {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#button_c:checked ~ #carousel .p-wrapper {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#button_d:checked ~ #carousel .p-wrapper {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}
    
#trailer {
    padding-bottom: 16px;
    width: 100%;
    height: 60%;
}

#steamStorePanel {
    width: 100%;
}

#g-ytsubscribe {
    top:0;
    left:0;
}

#gc-logo
{
    display: grid;
    place-items: center;
    background-color: #222;
    padding-top: 16px;
    margin-left: -88px;
}
#gc-logo img
{ 
    height: 192px;
    z-index: 1;
    image-rendering: -webkit-optimize-contrast;
}

#team-container
{
    flex-direction:row; 
    display: flex;
}

#team-left
{
    flex:auto; 
    padding:5px 8px 5px 0;
}

#team-right
{
    flex:auto; 
    padding:5px 0px 8px 5px;
}

@media only screen and  (max-width: 64em), 
                    (max-height: 45em) and 
                    (-webkit-max-device-pixel-ratio: 2),
                    (max-device-pixel-ratio: 2) and
                    (max-resolution: 2dppx),
                    (any-hover: none) {
    #navigation {
        display: none;
    }
    #carousel {
        margin-top: 20vh;   
        overflow: hidden;
        width: 100%;
        height: 100%;
        background-color: transparent;
        opacity: 1;
        /* background-image: url("res/GeminiChase/background_placeholder.png"); */
    }
    #button_a:checked ~ #carousel .p-wrapper {
        -webkit-transform: none;
        transform: none; 
    }
                
    #button_b:checked ~ #carousel .p-wrapper {
        -webkit-transform: none;
        transform: none; 
    }
    
    #button_c:checked ~ #carousel .p-wrapper {
        -webkit-transform: none;
        transform: none; 
    }
    
    #button_d:checked ~ #carousel .p-wrapper {
        -webkit-transform: none;
        transform: none; 
    }
    body {
        overflow: auto;
        color: rgb(248, 248, 248);
        font-size: 16px;
        text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
    }
    #gc-logo {
        height: 20vh;
        margin-left:0; 
    }
    /* #team-container
    {
        flex-direction:column; 
        display: flex;
    }
    #team-left
    {
        flex:auto; 
        padding:5px 0px 5px 0;
    }

    #team-right
    {
        flex:auto; 
        padding:5px 0px 0px 5px;
    } */
}

/* if you read this, ignore that this is absolutely ugly xd 
    atleast its obvious now, that im no web dev. */
@media only screen and (max-height: 800px) {
    #carousel {
        /* margin-top: 20vh;         */
    }
    #gc-logo {
        height: 20vh;
    }
}