:root {
    --base-scale: 0.7;
    --base-scale-2: 0.6;
    --base-scale-3: 0.4;
    --base-scale-4: 0.3;
    --base-scale-5: 0.2;
}

.top_bar {
    background: #000000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.main_container {
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2.08fr 2.2fr 2.2fr 2.2fr 0.6fr;
    grid-template-areas:
        "banner banner"
        "monkey prepare"
        "game_modes axolot"
        "video video"
        "footer footer";
}

#banner {
    grid-area: banner;
    /* background:#ff1b45; */
    background: #000000;
    background-image: url("images/Banner.png");
    background-size: cover;
    background-position: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4fr 1fr;
    grid-template-areas:
        "logo"
        "link";
}

#logo {
    grid-area: logo;
}

#logo img {
    width: calc(0.7*296px);
    height: calc(0.7*230px);
}

#app_store_links {
    grid-area: link;
}

.store_link {
    width: calc(var(--base-scale) * 592px);
    height: calc(var(--base-scale) * 172px);
    margin: calc(var(--base-scale) * 20px);
}

#monkey {
    grid-area: monkey;
    background: #000000;
    /* background:#1010ff; */
}

#monkey img {
    width: auto;
    max-width: 100%;
    object-fit: cover;
}

#prepare_content {
    grid-area: prepare;
    background: #000000;
    /* background:#8080ff; */
    position: relative;
}

#prepare {
    margin-left: 70px;
    margin-right: 70px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

#game_modes_content {
    grid-area: game_modes;
    /* background:#3434ff; */
    background: #000000;
    position: relative;
}

#game_modes {
    margin-left: 70px;
    margin-right: 70px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

#axolot {
    grid-area: axolot;
    background: #000000;
    /* background:#005400; */
}

#axolot img {
    width: auto;
    max-width: 100%;
    object-fit: cover;
}

#video {
    grid-area: video;
    /* background:#aa1010; */
    background: #000000;
    position: relative;
}

.pass_through {
    pointer-events: none;
}

.video_area {
    position: absolute;
    bottom: calc(var(--base-scale)*333.3px);
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    width: calc(var(--base-scale)*1280px);
    height: calc(var(--base-scale)*616px);
}

.video_mask {
    -webkit-mask-image: url("images/PhoneMask.png");
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;

    mask-image: url("images/PhoneMask.png");
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: cover;
}

#npc {
    position: absolute;
    left: 0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    /* left: calc(var(--base-scale)*333.3px); */
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    width: calc(var(--base-scale)*1757px);
    height: calc(var(--base-scale)*670px);
}

#npc_text {
    position: absolute;
    right: 200px;
    left: 0;
    bottom: calc(var(--base-scale)* 25px);
    margin-left: auto;
    margin-right: auto;
    width: auto;
    font-size: calc(var(--base-scale)* 75px);
}

.header {
    font-family: "Anton", sans-serif;
    font-size: calc(var(--base-scale)* 80px);
}

.normal_text {
    font-family: "Montserrat", sans-serif;
    text-align: justify;
    font-size: calc(var(--base-scale)* 40px);
}

#footer {
    grid-area: footer;
    position: relative;
}

@media only screen and (max-width: 1300px) and (min-width: 900px) {
    #logo img {
        width: calc(0.6*296px);
        height: calc(0.6*230px);
    }

    .store_link {
        width: calc(var(--base-scale-3) * 592px);
        height: calc(var(--base-scale-3) * 172px);
        margin: calc(var(--base-scale-3) * 20px);
    }

    .header {
        font-size: calc(var(--base-scale-2)* 80px);
    }

    .normal_text {
        font-size: calc(var(--base-scale-2)* 40px);
    }

    .video_area {
        bottom: calc(var(--base-scale-3)*333.3px);
        width: calc(var(--base-scale-3)*1280px);
        height: calc(var(--base-scale-3)*616px);
    }

    #npc {
        left: 0;
        right:0;
        margin-left: auto;
        margin-right: auto;
        /* left: calc(var(--base-scale-4)*333.3px); */
        width: calc(var(--base-scale-3)*1757px);
        height: calc(var(--base-scale-3)*670px);
    }

    #npc_text {
        bottom: calc(var(--base-scale-3)* 25px);
        font-size: calc(var(--base-scale-3)* 75px);
    }
}

@media only screen and (max-width: 900px) and (min-width: 670px) {
    #logo img {
        width: calc(0.6*296px);
        height: calc(0.6*230px);
    }

    .store_link {
        width: calc(var(--base-scale-3) * 592px);
        height: calc(var(--base-scale-3) * 172px);
        margin: calc(var(--base-scale-3) * 20px);
    }

    .header {
        font-size: calc(var(--base-scale-3)* 80px);
    }

    .normal_text {
        font-size: calc(var(--base-scale-3)* 40px);
    }

    .video_area {
        bottom: calc(var(--base-scale-3)*333.3px);
        width: calc(var(--base-scale-3)*1280px);
        height: calc(var(--base-scale-3)*616px);
    }

    #npc {
        left: 0;
        right:0;
        margin-left: auto;
        margin-right: auto;
        /* left: calc(var(--base-scale-4)*333.3px); */
        width: calc(var(--base-scale-3)*1757px);
        height: calc(var(--base-scale-3)*670px);
    }

    #npc_text {
        bottom: calc(var(--base-scale-3)* 25px);
        font-size: calc(var(--base-scale-3)* 75px);
    }
}


@media only screen and (max-width: 670px) {
    .main_container {
        grid-template-columns: 1fr;
        grid-template-rows: 1.9fr 1.714fr 1.714fr 1.714fr 1.714fr 0.5fr 0.41fr;

        grid-template-areas:
            "banner"
            "monkey"
            "prepare"
            "axolot"
            "game_modes"
            "video"
            "footer";
    }

    #logo img {
        width: calc(0.5*296px);
        height: calc(0.5*230px);
    }

    .store_link {
        width: calc(var(--base-scale-5) * 592px);
        height: calc(var(--base-scale-5) * 172px);
        margin: calc(var(--base-scale-5) * 20px);
    }

    .video_area {
        bottom: calc(var(--base-scale-5)*333.3px);
        width: calc(var(--base-scale-5)*1280px);
        height: calc(var(--base-scale-5)*616px);
    }

    #npc {
        /* left: calc(var(--base-scale-5)*233.3px); */
        left: 0;
        right:0;
        margin-left: auto;
        margin-right: auto;
        width: calc(var(--base-scale-5)*1757px);
        height: calc(var(--base-scale-5)*670px);
    }

    #npc_text {
        right: 100px;
        bottom: calc(var(--base-scale-5)* 25px);
        font-size: calc(var(--base-scale-5)* 75px);
    }

    .header {
        font-size: calc(var(--base-scale-3)* 80px);
    }

    .normal_text {
        font-size: calc(var(--base-scale-3)* 40px);
    }

    #prepare {
        margin-left: 30px;
        margin-right: 30px;
    }

    #game_modes {
        margin-left: 30px;
        margin-right: 30px;
    }
}