.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main */

@media screen and (max-width: 1024px) {
    :root {
        font-size: 85%;
    }
}

@media screen and (max-width: 768px) {
    :root {
        font-size: 70%;
    }
}

/* Footer */

.footer {
    background-color: #333;
    padding: 1rem;
}

.footer-content {
    color: #aaa;
}

a.footer-content:link, a.footer-content:visited {
    color: #aaa;
}

a.footer-content:hover, a.footer-content:active {
    color: #eee;
}

/* Social */

.social-image {
    width: 24px;
    height: 24px;
}

.social-buttons {
    position: absolute;
    padding-left: 1rem;
    padding-top: 1rem;
}

.social-item {
    display: inline;
    padding: 0.75rem;
}

/* Stores */

.stores {
    margin-top: 1rem;
    max-width: 600px;
}

.store-column {
    padding: 0.2rem;
}

.store {
    /* margin: 0.2rem; */
    width: 166px;
    height: 50px;
    background: url(common/stores_coming_soon.png) center / cover;
}

.store.apple {
    background-position-y: 0px;
}

.store.google {
    background-position-y: -50px;
}

.store.amazon {
    background-position-y: -102px;
}

.store.coming_soon {
    background-position-y: 50px;
}

@media screen and (max-width: 1024px) {
    .store {
        width: calc(166px * 0.85);
        height: calc(50px * 0.85);
    }

    .store.apple {
        background-position-y: 0px;
    }

    .store.google {
        background-position-y: calc(-50px * 0.85);
    }

    .store.amazon {
        background-position-y: calc(-102px * 0.85);
    }

    .store.coming_soon {
        background-position-y: calc(50px * 0.85);
    }
}

/************/
/* ORIGINAL */
/************/

.crossme-original {
    --logo-w: 412px;
    --logo-h: 300px;

    --video-w: 1000px;
    --video-h: 912px;
}

.crossme-original.title {
    color: #fff;
    text-shadow: -1px -1px 3px #291315, 1px -1px 3px #291315, -1px 1px 3px #291315, 1px 1px 3px #291315;
}

.crossme-original.bg {
    background-image: url(original/bg.jpg);
    background-size: 128px;
    background-repeat: repeat;
}

.crossme-original.logo {
    width: calc(var(--logo-w) / 2);
    height: calc(var(--logo-h) / 2);
    background: url(original/logo.png) center / cover;
}

.crossme-original.video-back {
    margin-top: 1rem;
    margin-bottom: 1rem;    
    width: calc(var(--video-w) / 2);
    height: calc(var(--video-h) / 2);
    background: url(original/video_back.jpg) center / cover;
}

.crossme-original.video {
    width: calc(var(--video-w) / 2 * 0.935);
    height: calc(var(--video-h) / 2 * 0.935);
}

@media screen and (max-width: 1024px) {
    .crossme-original.logo {
        width: calc(var(--logo-w) / 2 * 0.9);
        height: calc(var(--logo-h) / 2 * 0.9);
    }

    .crossme-original.video-back {
        width: calc(var(--video-w) / 2 * 0.85);
        height: calc(var(--video-h) / 2 * 0.85);
    }
    
    .crossme-original.video {
        width: calc(var(--video-w) / 2 * 0.94 * 0.85);
        height: calc(var(--video-h) / 2 * 0.94 * 0.85);
    }
}

@media screen and (max-width: 768px) {
    .crossme-original.logo {
        width: calc(var(--logo-w) / 2 * 0.8);
        height: calc(var(--logo-h) / 2 * 0.8);
    }

    .crossme-original.video-back {
        width: calc(var(--video-w) / 2 * 0.55);
        height: calc(var(--video-h) / 2 * 0.55);
    }
    
    .crossme-original.video {
        width: calc(var(--video-w) / 2 * 0.94 * 0.55);
        height: calc(var(--video-h) / 2 * 0.94 * 0.55);
    }
}

/*********/
/* COLOR */
/*********/

.crossme-color {
    --logo-w: 379px;
    --logo-h: 300px;

    --video-w: 1000px;
    --video-h: 826px;
}

.crossme-color.title {
    color: #fff;
    text-shadow: -1px -1px 3px #291315, 1px -1px 3px #291315, -1px 1px 3px #291315, 1px 1px 3px #291315;    
}

.crossme-color.bg {
    background-image: url(color/bg.jpg);
    background-size: 128px;
    background-repeat: repeat;
}

.crossme-color.logo {
    width: calc(var(--logo-w) / 2);
    height: calc(var(--logo-h) / 2);
    background: url(color/logo.png) center / cover;
}

.crossme-color.video-back {
    margin-top: 1rem;
    margin-bottom: 1rem;    
    width: calc(var(--video-w) / 2);
    height: calc(var(--video-h) / 2);
    background: url(color/video_back.jpg) center / cover;
}

.crossme-color.video {
    width: calc(var(--video-w) / 2 * 0.935);
    height: calc(var(--video-h) / 2 * 0.935);
}

@media screen and (max-width: 1024px) {
    .crossme-color.logo {
        width: calc(var(--logo-w) / 2 * 0.9);
        height: calc(var(--logo-h) / 2 * 0.9);
    }

    .crossme-color.video-back {
        width: calc(var(--video-w) / 2 * 0.85);
        height: calc(var(--video-h) / 2 * 0.85);
    }
    
    .crossme-color.video {
        width: calc(var(--video-w) / 2 * 0.94 * 0.85);
        height: calc(var(--video-h) / 2 * 0.94 * 0.85);
    }
}

@media screen and (max-width: 768px) {
    .crossme-color.logo {
        width: calc(var(--logo-w) / 2 * 0.8);
        height: calc(var(--logo-h) / 2 * 0.8);
    }

    .crossme-color.video-back {
        width: calc(var(--video-w) / 2 * 0.55);
        height: calc(var(--video-h) / 2 * 0.55);
    }
    
    .crossme-color.video {
        width: calc(var(--video-w) / 2 * 0.94 * 0.55);
        height: calc(var(--video-h) / 2 * 0.94 * 0.55);
    }
}

/************/
/* FILIPINO */
/************/

.filipino {
    --logo-w: 437px;
    --logo-h: 300px;

    --video-w: 1000px;
    --video-h: 813px;
}

.filipino.title {
    color: #53472b;
    text-shadow: -1px -1px 3px #edca76, 1px -1px 3px #edca76, -1px 1px 3px #edca76, 1px 1px 3px #edca76;    
}

.filipino.bg {
    background-image: url(filipino/bg.jpg);
    background-size: 128px;
    background-repeat: repeat;
}

.filipino.logo {
    width: calc(var(--logo-w) / 2);
    height: calc(var(--logo-h) / 2);
    background: url(filipino/logo.png) center / cover;
}

.filipino.video-back {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: calc(var(--video-w) / 2);
    height: calc(var(--video-h) / 2);
    background: url(filipino/video_back.jpg) center / cover;
}

.filipino.video {
    width: calc(var(--video-w) / 2 * 0.95);
    height: calc(var(--video-h) / 2 * 0.95);
}

@media screen and (max-width: 1024px) {
    .filipino.logo {
        width: calc(var(--logo-w) / 2 * 0.9);
        height: calc(var(--logo-h) / 2 * 0.9);
    }

    .filipino.video-back {
        width: calc(var(--video-w) / 2 * 0.85);
        height: calc(var(--video-h) / 2 * 0.85);
    }

    .filipino.video {
        width: calc(var(--video-w) / 2 * 0.95 * 0.85);
        height: calc(var(--video-h) / 2 * 0.95 * 0.85);
    }
}

@media screen and (max-width: 768px) {
    .filipino.logo {
        width: calc(var(--logo-w) / 2 * 0.8);
        height: calc(var(--logo-h) / 2 * 0.8);
    }

    .filipino.video-back {
        width: calc(var(--video-w) / 2 * 0.55);
        height: calc(var(--video-h) / 2 * 0.55);
    }

    .filipino.video {
        width: calc(var(--video-w) / 2 * 0.95 * 0.55);
        height: calc(var(--video-h) / 2 * 0.95 * 0.55);
    }
}

/************/
/* SUDOKU */
/************/

.sudoku {
    --logo-w: 316px;
    --logo-h: 54px;

    --video-w: 558px;
    --video-h: 994px;
}

.sudoku.title {
    color: #c4b84d;
}

.sudoku.bg {
    background-image: url(sudoku/bg.jpg);
    background-size: 128px;
    background-repeat: repeat;
}

.sudoku.logo {
    margin-top: 1rem;
    width: calc(var(--logo-w) / 2);
    height: calc(var(--logo-h) / 2);
    background: url(sudoku/logo.png) center / cover;
}

.sudoku.video-back {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: calc(var(--video-w) / 2);
    height: calc(var(--video-h) / 2);
    background: url(sudoku/video_back.jpg) center / cover;
}

.sudoku.video {
    width: calc(var(--video-w) / 2 * 0.97);
    height: calc(var(--video-w) / 2 * 0.97);
}

@media screen and (max-width: 1024px) {
    .sudoku.logo {
        width: calc(var(--logo-w) / 2 * 0.9);
        height: calc(var(--logo-h) / 2 * 0.9);
    }

    .sudoku.video-back {
        width: calc(var(--video-w) / 2 * 0.85);
        height: calc(var(--video-h) / 2 * 0.85);
    }

    .sudoku.video {
        width: calc(var(--video-w) / 2 * 0.97 * 0.85);
        height: calc(var(--video-h) / 2 * 0.97 * 0.85);
    }
}

@media screen and (max-width: 768px) {
    .sudoku.logo {
        width: calc(var(--logo-w) / 2 * 0.8);
        height: calc(var(--logo-h) / 2 * 0.8);
    }

    .sudoku.video-back {
        width: calc(var(--video-w) / 2 * 0.7);
        height: calc(var(--video-h) / 2 * 0.7);
    }

    .sudoku.video {
        width: calc(var(--video-w) / 2 * 0.97 * 0.7);
        height: calc(var(--video-h) / 2 * 0.97 * 0.7);
    }
}