.parallax{
    height: 100vh;
    overflow-y: visible;
    overflow-x: hidden;
    perspective: 16px;
}
.langSelect{
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 30px;
    text-align: right;
    z-index: 11;
}
.langSelectItem{
    display: inline;
    margin: 0;
}
.langSelectLink{
    text-decoration-line: none;
    color: rgb(50%, 50%, 50%);
}
.langSelectLink:hover{
    color:rgb(80%, 80%, 80%);
    text-decoration-line: underline;
}
.langSelectLink.selected{
    color: white;
}
header{
    padding: 15% 0% 25% 10%;
    transform-style: preserve-3d;

    animation: headerIn 0.4s ease-in-out;
}
.hubBar{
    position: sticky;
    top: 0;
    min-height: 50px;
    height: 10%;
    padding: 0vh 30px 0vh 10%;
    background-color: black;
    margin: auto;
    display: flex;
    place-items: center;
    z-index: 10;
    opacity: 0%;

    transition: opacity 0.4s ease;
}
.background{
    transform: translateZ(-16px) scale(2);
}
.foreground{
    transform: translateZ(-8px) scale(1.5);
}
.background,
.foreground{
    position: absolute;
    width: 100%;
    object-fit: cover;
    z-index: -10;
}
.spread{
    margin-right: auto;
    margin-left: auto;
}
body
{
    background-color: black;
    color: purple;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 120%;
}
section{
    background-color: rgb(10%, 10%, 10%);
    color: white;
    padding: 3vh 3vw;
    z-index: 1;
    font-size: 1rem;
}
footer
{
    background-color: rgb(10, 10, 10);
    color: white;
    padding: 10px 20px;
    display: flex;
}
.navList
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.navList li a.textLink{
    text-transform: uppercase;
}
li
{
    display: inline;
    margin-right: 20px;
    margin-top: 20px;
}
.letterList li{
    display: list-item;
    list-style-type: lower-alpha;
}
.normList li{
    display: list-item;
    list-style: decimal;
}
h1{
    color: white;
    text-justify: distribute;
}
h1.big{
    font-size: 3rem;
    letter-spacing: 0.6rem;
    line-height: 100%;
}
h2
{
    color: rgb(100, 100, 100);
}
.hubBar h2{
    text-align: right;
    margin: auto;
}
h3{
    font-size: 1.4rem;
    line-height: 20%;
    color: rgb(70%, 70%, 70%);
}
h4{
    font-size: 1.5rem;
    text-decoration-line: underline;
    letter-spacing: 10%;
}
small{
    color: rgb(35%, 35%, 35%);
    line-height: 10%;
}
.darkText{
    color: rgb(90%, 90%, 90%);
}
.textBlock{
    line-height: 200%;
}
.textLink{
    text-decoration: none;
    color: rgb(80%, 80%, 80%);
}
.textLink:hover{
    color: white;
}
.mailLink{
    text-decoration: none;
    color: rgb(50%, 50%, 50%);
}
.mailLink:hover{
    color:white;
    text-decoration-line: underline;
}
.gameInfo{
    background-color: rgb(10%, 10%, 10%);
    color: white;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 40vw 40vw;
    justify-content: center;
    gap: 10rem;
}
.gameScreenshot{
    max-width: 40vw;
    border-radius: 3%;
    opacity: 0;
    transition: all 0.75s ease-in-out;
}
.gameScreenshot.left{
    transform: translate(-10vw, 0);
}
.gameScreenshot.right{
    transform: translate(10vw, 0);
}
.gameScreenshot.appear{
    transform: translate(0, 0);
}
.gameDescr{
    background-color: rgb(15%, 15%, 15%);
    color: rgb(80%, 80%, 80%);
    width: 40vw;
    border-radius: 3%;
    aspect-ratio: 1.78;
    margin: 0;
    padding: 5% 5%;
    box-sizing: border-box;
    font-size: large;
    text-align: justify;
    line-height: 200%;
}
.gameDescrLink{
    text-decoration: none;
    color: white;
    text-decoration-line: underline;
    font-size: medium;
}
.gameDescrLink:hover{
    color: rgb(80, 80, 80);
}
.gameDescrList{
    text-align: left;
    list-style-type:square;
}
.gameDescrListItem{
    display: list-item;
}
.gamePageLink{
    height: 50vh;
    border-radius: 2%;
    transition: all 0.4s ease;
}
.gamePageLink:hover{
    transform: rotate(2deg);
    scale: 1.07;
    border-radius: 5%;
}
.sectionHeader{
    width:100%;
}
.gamesSection{
    padding: 5px 10% 5px 10%;
}
.flexSection{
    display:flex;
}
.appear{
    opacity: 100%;
}
div .inset-l{
    margin-left: 5%;
}
.inset-l p{
    margin-left: 5%;
    line-height: 140%;
}
.compressed{
    margin-right: 50%;
    line-height: 150%;
}
.underline{
    text-decoration-line: underline;
}
@keyframes headerIn{
    from{
        padding-left: 5%;
        opacity: 0%;
    }
}
@keyframes hubBarIn{
    from{
        opacity: 0%;
    }
}
@media (max-aspect-ratio: 1/1) {
    .navList{
        font-size: 0.6rem;
    }
    .compressed{
        margin-right: inherit;
    }
    h1.big{
        font-size: 1rem;
        padding-right: 30%;
        letter-spacing: 30%;
    }
    .background{
        transform: translateZ(-16px) scale(3) translateY(-3rem);
    }
    .foreground{
        transform: translateZ(-8px) scale(2.25) translateY(-3rem);
    }
    .flexSection{
        display: block;
    }
    section{
        padding: 0.5cm 0.5cm;
    }
    header{
        padding: 5% 0% 25% 5%;
    }
    .gameInfo{
        width: 100%;
        height: 100%;
        display: block;
        justify-content: center;
    }
    .gameDescr{
        width: 100%;
        margin: 10% 0 10%;
    }
    .gameScreenshot{
        max-width: 100%;
        border-radius: 3%;
        opacity: 0;
        margin: 10% 0 10%;
        transition: all 0.75s ease-in-out;
    }
    .gameScreenshot.left{
        transform: translate(-10vw, 0);
    }
    .gameScreenshot.right{
        transform: translate(10vw, 0);
    }
    .gameScreenshot.appear{
        transform: translate(0, 0);
        opacity: 1;
    }
    .hubBar h1{
        font-size: 1.1rem;
    }
    h3{
        line-height: 100%;;
    }
    h4{
        line-height: 100%;
    }
    h2{
        font-size: small;
    }
    .hubBar h2{
        grid-row-start: 2;
        grid-row-end: 2;
        grid-column-start: 0;
        grid-column-end: 2;
    }
    .hubBar ul{
        margin-right: 2rem;
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 4;
        grid-column-end: 4;
    }
    .hubBar{
        display: grid;
        grid-template-columns: 20% 60% 10% 10%;
        grid-template-rows: 70% 30%;
    }
}