@charset "utf-8";

/*
    CSS Page of "Exploring Hollow Knight"
    Author: Joel Joaquin Nunez
    Date: 03/24/2026
    Filename: index.css
*/

/* ===== html ===== */
    html {
        background:rgba(0, 0, 0, .95);
    }
/* ===== body and grid layout ===== */
    body {
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(9, 1fr);
        height: 100vh;
        min-height: 910px;
        min-width: 530px;
        max-width: 1280px;
    }
    header {
        grid-column: 1/-1;
        grid-row: 1/3;
    }
    .verticalnav {
        grid-column: 1/3;
        grid-row: 3/9;
    }
    .game1 {
        grid-column: 3/8;
        grid-row: 3/6;
    }
    .game2 {
        grid-column: 8/13;
        grid-row: 3/6;
    }
    .soundtrack {
        grid-column: 3/8;
        grid-row: 6/9;
    }
    .info {
        grid-column: 8/13;
        grid-row: 6/9;
    }
    footer {
        grid-column: 1/-1;
        grid-row: 9/10;
    }
/* ===== header ===== */
    header {
        background: url(hollow-knight-banner.jpg) right center / cover no-repeat;
        align-content: end;
    }
    header > h1 {
        background-color: rgba(255, 255, 255, 0.1);
        text-align: center;
        width: fit-content;
        margin: auto;
    }
/* ===== vertical nav ===== */
    .verticalnav {
        color: white;
        text-align: center;
        min-width: 100px;
    }
    .verticalnav ul {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
    }
    .verticalnav a {
        display: block;
        padding: 20px 0;
    }
    a:hover {
        background-color: rgba(255,255,255, 0.1);
    }
/* ===== containers ===== */
    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;        
        padding: 25px;
        margin: 10px;
        overflow: hidden;
    }
    .info {
        display: flex;
        flex-direction: row;     
        padding: 25px;
        margin: 10px;
        overflow: hidden;
        border-radius: 30px;
        box-shadow: 0 0 10px rgba(255,255,255, .40);
        background-color: rgba(0,0,0,0.8);
    }
    .unity {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 2;
    }
    .unity-txt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 3;
    }
    .unity a {
        display: block;
        color: white;
        height: 50%;
        width: 100%;
    }
    .unity-link {
        background: url(unitylogo.png) center / contain no-repeat;
    }
    .container h3, .unity-txt h3 { 
        color: white;
        margin-bottom: 10px;
        max-width: 100%;
    }
    .container p, .unity-txt p {
        color: white;
        line-height: 1.5em;
        font-style: italic;
        opacity: 0.9;
        overflow: hidden;
        max-width: 100%;
        margin-top: 5px;
    }
    .game1, .game2, .soundtrack {
        padding-right: 35%;
    }
/* ===== container backgrounds ===== */
    .game1 {
        background: url(char_knight_action.png) 105% center / 50% no-repeat;
    }
    .game2 {
        background: 
        url(boss_hornet_02.png) 105% center / 60% no-repeat;
    }
    .soundtrack {
        background: 
        url(boss_trobbio.png) right center / 40% no-repeat;
    }
/* ===== footer ===== */
    .teamcherry {
        width: 120px;
        height: 100px;
        margin: auto;
    }
    .teamcherry a {
        display: block;
        height: 100%;
        width: 100%;
        color: white;
    }
    .tc-link {
        background: url(team_cherry_logo_big_red.png) center / contain no-repeat;
    }
        /* ===== media queries ===== */
            @media (max-width: 768px) {
                body {
                    grid-template-columns: repeat(12, 1fr);
                    grid-template-rows: repeat(9, 1fr);
                }
        /* ===== responsive grid layout ===== */
                header {
                    grid-column: 1/13;
                    grid-row: 1/3;
                }
                .verticalnav {
                    grid-column: 1/3;
                    grid-row: 3/9;
                }
                .game1 {
                    grid-column: 3/13;
                    grid-row: 3/5;
                }
                .game2 {
                    grid-column: 3/13;
                    grid-row: 5/7;
                }
                .soundtrack {
                    grid-column: 3/8;
                    grid-row: 7/9;
                }
                .info {
                    grid-column: 8/13;
                    grid-row: 7/9;
                }
                footer {
                    grid-column: 1/13;
                    grid-row: 9/10;
                }
        /* ===== small screen tweaks ===== */
                .soundtrack {
                    padding: 10px;
                    margin: 5px;
                    padding-right: 35%;
                }
                .info {
                    padding: 10px;
                    margin: 5px;
                }
                .soundtrack h3, .info h3 {
                    margin-bottom: 0px;
                }
            }