:root {
    --m-card-head-height: 100vw;
    --m-card-body-height: 20vw;
    --m-card-height: calc(var(--m-card-head-height) + var(--m-card-body-height));
}

.m-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--m-card-height);
    display: none;
    font-size: 10vw;
}

@media screen and (max-aspect-ratio: 3/4) and (hover: hover) and (pointer: fine), screen and (hover: none) and (pointer: coarse) {
    /* mobile and browser in less than 4:3 */
    .link-overlay {
        display: none;
    }
}

@media screen and (hover: none) and (pointer: coarse) and (max-device-aspect-ratio: 9/16) {
    /* mobile (excluding tablets [hopefully]) */
    
}

@media screen and (hover: none) and (pointer: coarse) {
    /* tablets */
    .card {
        height: 100vh;
    }
    
}

@media screen and (max-aspect-ratio: 3/4) and (hover: hover) and (pointer: fine), screen and (hover: none) and (pointer: coarse) and (max-device-aspect-ratio: 9/16) and (orientation: portrait) {
    /* mobile in vertical pos and browser in less than 4:3 */
    .card {
        --card-height: var(--m-card-height);
        border-radius: 6vw;
    }

    .card-head {
        display: none;
    }

    .card-body {
        display: none;
    }

    .m-card {
        display: block;
    }

    .m-card-head {
        height: var(--m-card-head-height);
        position: relative;
    }

    .m-card-body {
        height: var(--m-card-body-height);
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #top-logo {
        height: 35vw;
    }

    .getbtn-div {
        width: 26vw;
        height: 10vw;
        line-height: 10vw;
        margin-right: 10%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 3vw;
        text-align: center;
        background-color: white;
        color: black;
        border-radius: 13vw;
    }

    #m-frost-body {
        /* background: rgb(54,23,96);
        background: linear-gradient(55deg, rgba(54,23,96,1) 0%, rgba(84,41,107,1) 17%, rgba(135,71,126,1) 53%, rgba(160,86,135,1) 74%, rgba(167,91,133,1) 85%, rgba(168,91,136,1) 93%, rgba(152,81,132,1) 100%); */
        background: rgb(40,15,74);
        background: linear-gradient(55deg, rgba(40,15,74,1) 0%, rgba(50,21,78,1) 12%, rgba(110,56,103,1) 49%, rgba(125,64,109,1) 59%, rgba(135,69,113,1) 70%, rgba(167,91,133,1) 85%, rgba(168,91,136,1) 93%, rgba(152,81,132,1) 100%);
    }

    #m-frost-banner-ball {
        width: 90%;
    }
    
    #m-frost-title {
        font-size: 15vw;
        color: white;
        text-shadow: 0.3vw 0.3vw 0.5vw rgba(0,0,0,0.5);
    }

    #m-blek-head {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-items: center;
    }

    #m-blek-const {
        width: 75%;
        margin-top: 15vw;
        display: flex;
        justify-content: space-between;
    }

    .m-blek-const-ball {
        width: 13vw;
        height: 13vw;
    }

    #m-blek-title {
        font-family: 'penna';
        font-size: 25vw;
        margin-top: 12vw;
        color: black;
    }

    #m-blek-const_2 {
        width: 30vw;
        margin-top: -3vw;
        margin-left: 45%;
    }

    #m-lifelike-body {
        background-color: rgb(46, 40, 54);
    }

    #m-euclideanskies-head {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        background: rgb(181,221,184);
        /* background: linear-gradient(343deg, rgba(191,231,194,1) 20%, rgba(99,223,255,1) 62%); */
        background: linear-gradient(343deg, rgba(181,221,184,1) 20%, rgba(89,213,255,1) 62%);
    }

    #m-euclideanskies-logo {
        width: 70%;
        margin-top: 8vw;
        margin-bottom: -6vw;
        z-index: 0;
    }
    
    #m-euclideanskies-level {
        width: 80%;
        z-index: 1;
    }

    #m-euclideanskies-body {
        background-color: rgb(121, 227, 221);
    }

    #m-euclideanlands-head {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }

    #m-euclideanlands-logo {
        width: 60%;
        margin-top: 13vw;
        margin-bottom: -6vw;
        z-index: 0;
    }
    
    #m-euclideanlands-level {
        width: 80%;
        z-index: 1;
    }

    footer {
        flex-flow: column;
        margin-top: 8vw;
        margin-bottom: 5vw;
    }

    p {
        font-size: 4vw;
    }

    #press-kit {
        display: none;
    }

    #m-press-kit {
        display: block;
        margin: 0;
        margin-top: 3vw;
        background-color: black;
        background-color: rgb(56,131,230);
        color: white;
    }

    #copyright {
        margin-bottom: 3vw;
        font-size: 3vw;
    }

    #socials {
        width: auto;
        justify-content: space-evenly;
    }

    .sm-icon {
        width: 6vw;
    }
}

@media screen and (hover: none) and (pointer: coarse) and (max-aspect-ratio: 10/16) {
    /* mobile in vertical pos */
}

@media screen and (max-aspect-ratio: 3/4) and (hover: hover) and (pointer: fine) {
    /* browser in 4:3 or less  */
}