@charset "utf-8";

@font-face {
    font-family: "Montserrat";
    src: url(resource/fonts/Montserrat-VariableFont_wght.ttf) format(TrueType);
}

@font-face {
    font-family: "Coolvetica";
    src: url(resource/fonts//Coolvetica\ Rg.otf);
}

@keyframes backgroundRotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

body {
    margin: 0;
    padding: 0;
}

h1 {
    margin: 0;
    padding: 0;

    font-family: "Coolvetica";
    color: white;
    font-weight: 100;
    font-size: 6vw;
}

p {
    font-family: "Montserrat";
    font-size: 1em;
    line-height: 150%;
    color: white;
}

a {
    color: #009900;
    font-size: 1.15em;
    text-decoration: none;
}

a:not(.gameButton):hover {
    text-decoration: underline;
}

em {
    font-size: 1.5em;
    font-style: normal;
}

#background {
    position: fixed;
    width: 100vw;
    height: 100vh;

    background-color: #003b00;

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

    z-index: -100;
}

#background .burst {
    height: 500vh;

    animation: backgroundRotation 45s linear infinite;

    z-index: 0;
}

header {
    width: 100vw;
    height: 150px;
    position: fixed;
    top: 0;

    box-sizing: border-box;

    padding: 45px;

    display: flex;
    align-items: center;
    gap: 20px;

    background-image: linear-gradient(rgba(0, 0, 0, 0.668), #00000000);

    transition: background-image 0.2s ease;
}

#headerLogo {
    height: 70px;
    z-index: 1;
}

#headerLogo img {
    height: 100%;
}

#headerButtons {
    width: 375px;
    position: absolute;
    right: 45px;
    
    display: flex;
    justify-content: space-between;
    gap: 20px;

    visibility: visible;
}

#headerMenu {
    visibility: hidden;
}

#headerMenuBox {
    width: 45px;
    height: 35px;
    cursor: pointer;
    position: absolute;
    right: 45px;
    top: 55px;

    display: flex;
    flex-direction: column;
    justify-content: space-around
}

#headerMenuBox span {
    width: 100%;
    height: 3px;
    background-color: white;
    position: relative;

    transition: transform 0.2s ease;
}

#headerMenuBody {
    width: 100vw;
    
    height: 100vh;
    background-color:#0000008a;
    position: fixed;
    top: 0;
    right: -100vw;

    box-sizing: border-box;
    padding-top: 150px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;

    transition: right 0.2s ease;
}

#headerMenuBody.active {
    right: 0;
}

#headerMenuBox.active {
    position: fixed;
}

#headerMenuBox.active span:nth-child(1){
    transform: translate(0, 300%) rotate(45deg);
}

#headerMenuBox.active span:nth-child(2){
    transform: translate(0, -300%) rotate(-45deg);
}


#headerMenuBody .button {
    width: 70%;
}

footer {
    width: 100vw;
    height: 85px;

    box-sizing: border-box;

    padding-top: 7px;
    padding-bottom: 15px;

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

footer #socialMediaButtons {
    display: flex;
    align-items: center;

    padding-top: 10px;
    padding-bottom: 10px;
}

footer #socialMediaButtons img {
    width: 25px;
    padding-left: 10px;
    padding-right: 10px;
}

footer span {
    color: white;
    font-family: "Montserrat";
    font-weight: lighter;
}

.button {
    width: 175px;
    height: 45px;
    background-color: white;

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

    position: relative;
    z-index: 10;
    box-shadow: 5px 5px 0px #009900;

    text-decoration: none;
}

.button span {
    font-family: "Coolvetica";
    font-size: 1em;
    color: #009900;
}

.standardPage {
    width: 100vw;
    min-height: calc(100vh - 235px);

    box-sizing: border-box;
    padding: 50px 10vw;
    margin-top: 125px;

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

#homePage {
    width: 100vw;
    min-height: calc(100vh - 125px);

    padding-top: 20px;
    padding-bottom: 20px;

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

}

#homePage .logo {
    width: 45vw;
    margin-bottom: 30px;
    object-position: center;

    margin-bottom: 20px;
}

#homePage .button {
    width: 25vw;
    height: 3.1vw;

    margin-bottom: 20px;
}

#homePage .button span {
    font-size: 1.5vw;
}

.aboutMe h1 {
    font-size: 8vw;
    margin: 0;
    padding: 0;

    align-self: center;
}

.aboutMe img {
    width: 65vw;
    box-shadow: 7px 7px 0px #009900;
}

.aboutMe p {
    width: 65vw;
}

.gameButton {
    background-position: center;
    background-size: cover;
    box-shadow: 7px 7px 0px #009900;
}

.gameButton .hoverCover {
    visibility: hidden;
    width: 0;
    height: 100%;

    box-sizing: border-box;
    padding: 25px;

    overflow: hidden;
    white-space: nowrap;

    background-color: #ffffff87;
    color: #006b00;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    transition: all 0.2s ease;
}

.hoverCover .gameTitle {
    font-size: 25px;
    font-family: "Coolvetica";
}

.hoverCover .gameYear {
    font-size: 25px;

    font-family: "Montserrat";
    font-style: italic;
}

.mostRecent .gameTitle {
    font-size: 50px;
}

.mostRecent .hoverCover {
    padding: 50px;
}

.gameButton:hover .hoverCover {
    visibility: visible;
    width: 100%;
}

.mostRecent {
    width: 70vw;
    height: 500px;

    margin: 25px;
}

.gamesList {
    width: 70vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    column-count: 2;
    gap: 25px;
}

.gamesList .gameButton {
    width: 47%;
    height: 150px;
}


/* GAME THUMBNAILS */
.dexterThumb {
    background-image: url(resource/games/dexter/thumb.png);
}

.suffThumb {
    background-image: url(resource/games/suffocation/thumb.jpg);
}

.cqThumb {
    background-image: url(resource/games/chickenquest/thumb.png);
}

@media screen and (max-aspect-ratio: 1/1) {
    #homePage .logo {
        width: 65vw;
        /*margin-top: 50%;*/
        margin-bottom: 16px;
    }

    #homePage .button {
        width: 40vw;
        height: 4vw;

        margin-bottom: 15px;
    }

    #homePage .button span {
        font-size: 2vw;
    }
    
    .standardPage {
        padding: 25px 10vw;
    }

    #headerButtons {
        visibility: hidden;
    }

    #headerMenu {
        visibility: visible;
    }

    .games .mostRecent {
        height: 350px
    }

    .gamesList {
        flex-direction: column;
    }

    .gamesList .gameButton {
        width: 100%;
    }

    .mostRecent .gameTitle {
        font-size: 35px;
    }
}

@media screen and (max-aspect-ratio: 9/16) {
    h1 {
        font-size: 10vw;
    }

    #homePage .logo {
        width: 85vw;
        margin-bottom: 15px;
    }

    #homePage .button {
        width: 60vw;
        height: 7.5vw;
    }

    #homePage .button span {
        font-size: 3vw;
    }

    .aboutMe h1 {
        font-size: 9vw;
        align-self: flex-start;
    }
    
    .aboutMe img {
        width: 80vw;
        box-shadow: 5px 5px 0px #009900;
    }
    
    .aboutMe p {
        width: 80vw;
    }

    .games .mostRecent {
        width: 80vw;
        height: 250px;
        margin: 25px;
        box-shadow: 5px 5px 0px #009900;
    }
}