@font-face {
    font-family: Yarden;
    src: url("yarden-regular-alefalefalef.otf") format("opentype");
}

@font-face {
    font-family: YardenBold;
    font-weight: bold;
    src: url("yarden-bold-alefalefalef.otf") format("opentype");
}

#sample_img{
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    pointer-events: none;
    z-index: 10;
    opacity: 0.5;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;

}

.parent {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

.container1 {
    height: 100%;
    aspect-ratio: 16/9;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.container2 {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: contain;
    position: relative;
}

#welcome_container {
    background-image: url('welcome_bg.jpg');
}

#menu_container {
    background-image: url('menu_bg.jpg');
}

#puzzle_instructions_container {
    background-image: url('puzzle/instructions_bg.jpg');
}

#puzzle_select_container {
    background-image: url('puzzle/select_bg.jpg');
}

#artivive_container {
    background-image: url('artivive/background.jpg');
}

#puzzle_game_container {
    background-image: url('puzzle/game_bg1_easy.jpg');
}

#quiz_container {
    background-image: url('quiz/background.jpg');
    flex-direction: column;
    justify-content: flex-start;
}

#about_container {
    background-image: url('about/about_background.jpg');
}

#anims_container {
    background-image: url('anims/anims_background.jpg');
}

#welcome_btn {
    height: 20.83%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: calc(100% * 787 / 1080);
}

.menu_btn {
    position: absolute;
}

#book_cover {
    background-image: url('book/cover_background.jpg');
}

#book_pages {
    background-image: url('book/pages_background.jpg');
}

#book_cover_next {
    position: absolute;
    height: calc(100% * 167 / 1080);
    left: calc(100% * 843 / 1920);
    top: calc(100% * 867 / 1080);
}

#book_menu_btn {
    position: absolute;
    height: calc(100% * 134 / 1080);
    left: calc(100% * 1616 / 1920);
    top: calc(100% * 40 / 1080);
}

#book_menu_btn > img {
    height: 100%;
}

#book_pages_next {
    position: absolute;
    height: calc(100% * 167 / 1080);
    left: calc(100% * 804 / 1920);
    top: calc(100% * 867 / 1080);
    z-index: 100;
}

#book_pages_prev {
    position: absolute;
    height: calc(100% * 164 / 1080);
    left: calc(100% * 979 / 1920);
    top: calc(100% * 867 / 1080);
    z-index: 100;
}

#book_page_img {
    position: absolute;
    height: calc(100% * 679 / 1080);
    left: calc(100% * 270 / 1920);
    top: calc(100% * 199 / 1080);
}

#puzzle_back_to_menu_btn {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 898 / 1920);
    top: calc(100% * 904 / 1080);
}

#puzzle_instructions_continue_btn {
    position: absolute;
    height: calc(100% * 164 / 1080);
    left: calc(100% * 63 / 1920);
    top: calc(100% * 874 / 1080);
}

#puzzle_select_back_btn {
    position: absolute;
    height: calc(100% * 160 / 1080);
    left: calc(100% * 898 / 1920);
    top: calc(100% * 897 / 1080);
}

#puzzle_game_back_btn {
    position: absolute;
    height: calc(100% * 160 / 1080);
    left: calc(100% * 898 / 1920);
    top: calc(100% * 897 / 1080);
}

#puzzle_select_1_easy_btn {
    position: absolute;
    height: calc(100% * 214 / 1080);
    left: calc(100% * 324 / 1920);
    top: calc(100% * 649 / 1080);
}

#puzzle_select_1_hard_btn {
    position: absolute;
    height: calc(100% * 128 / 1080);
    left: calc(100% * 198 / 1920);
    top: calc(100% * 700 / 1080);
}

#puzzle_select_2_easy_btn {
    position: absolute;
    height: calc(100% * 214 / 1080);
    left: calc(100% * 946 / 1920);
    top: calc(100% * 649 / 1080);
}

#puzzle_select_2_hard_btn {
    position: absolute;
    height: calc(100% * 128 / 1080);
    left: calc(100% * 820 / 1920);
    top: calc(100% * 700 / 1080);
}

#puzzle_select_3_easy_btn {
    position: absolute;
    height: calc(100% * 214 / 1080);
    left: calc(100% * 1521 / 1920);
    top: calc(100% * 649 / 1080);
}

#puzzle_select_3_hard_btn {
    position: absolute;
    height: calc(100% * 128 / 1080);
    left: calc(100% * 1395 / 1920);
    top: calc(100% * 700 / 1080);
}

#game_div {
    position: absolute;
    height: calc(100% * 660 / 1080);
    width: calc(100% * 1800 / 1920);
    left: calc(100% * 108 / 1920);
    top: calc(100% * 208 / 1080);
    overflow: hidden;
}

body {
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    background-color: #fff;
    margin: 0;
    padding: 0;
    border-width: 0;
}

#menu {
    position: relative;
    list-style-type: none;
    padding-left: 5px;
    z-index: 1000;
    /* 1 */
    display: inline-block;
    text-align: center;
}

#menu li {
    margin: 2px;
    padding: 4px 10px;
    border-radius: 5px;
    background-color: #ffff80;
}

#menu li:hover {
    background-color: #ffDD60;
}


.polypiece {
    display: block;
    overflow: hidden;
    position: absolute;
}

.moving {
    transition-property: top, left;
    transition-duration: 1s;
    transition-timing-function: linear;
}

.gameCanvas {
    display: none;
    overflow: hidden;
    position: absolute;
}

#remaining_time {
    position: absolute;
    z-index: 140;
    right: calc(100% * 128 / 1920);
    top: calc(100% * 70 / 1080);
    color: white;
    font-size: 4cqw;
}

@media (min-aspect-ratio: 16/9) {
    #remaining_time {
        font-size: 7cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #remaining_time {
        font-size: 4cqw;
    }
}

#artivive_menu_btn {
    position: absolute;
    height: calc(100% * 179 / 1080);
    left: calc(100% * 1500 / 1920);
    top: calc(100% * 20 / 1080);
}

#artivive_menu_btn > img {
    height: 100%;
}

#artvive_video {
    position: absolute;
    height: calc(100% * 541 / 1080);
    left: calc(100% * 795 / 1920);
    top: calc(100% * 407 / 1080);
}

#quiz_question_text {

}

#quiz_answers_container {
    direction: rtl;
    margin-right: calc(100% * 0 / 1920);
    margin-top: calc(100% * 65 / 1080);
    height: calc(100% * 422 / 1080);
}

.quiz_answer_row {
    display: flex;
    height: 25%;
    color: white;
    font-family: YardenBold;
}

#quiz_question_text {
    font-family: YardenBold;
    color: #fbc552;
}

@media (min-aspect-ratio: 16/9) {
    #quiz_question_text {
        font-size: 7.111cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #quiz_question_text {
        font-size: 4cqw;
    }
}

.quiz_answer_text {
    padding-top: 1%;
    font-size: 2.6cqw;
    /* color | offset-x | offset-y | blur-radius */
    text-shadow: #000000aa -5px 5px 10px;
    cursor: pointer;
}

.quiz_number_img {
    height: 90%;
}

#video_bg_img {
    width: 100%;
}

#quiz_video_btn_menu {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 850 / 1920);
    top: calc(100% * 904 / 1080);
}

#quiz_video_btn_next {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 115 / 1920);
    top: calc(100% * 890 / 1080);
}

#quiz_question_btn_next {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 115 / 1920);
    top: calc(100% * 890 / 1080);
}

#quiz_question_btn_prev {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 285 / 1920);
    top: calc(100% * 890 / 1080);
}

#quiz_video {
    position: absolute;
}

#about_btn_menu {
    position: absolute;
    height: calc(100% * 200 / 1080);
    left: calc(100% * 38 / 1920);
    top: calc(100% * 818 / 1080);
}

#about_video {
    position: absolute;
    height: calc(100% * 784 / 1080);
    left: calc(100% * 285 / 1920);
    top: calc(100% * 210 / 1080);
}

#anims_btn_next {
    position: absolute;
    height: calc(100% * 164 / 1080);
    left: calc(100% * 56 / 1920);
    top: calc(100% * 859 / 1080);
}

#anims_btn_prev {
    position: absolute;
    height: calc(100% * 161 / 1080);
    left: calc(100% * 228 / 1920);
    top: calc(100% * 859 / 1080);
}

#anims_btn_menu {
    position: absolute;
    height: calc(100% * 134 / 1080);
    left: calc(100% * 1596 / 1920);
    top: calc(100% * 905 / 1080);
}

#anims_frame {
    position: absolute;
    height: calc(100% * 760 / 1080);
    left: calc(100% * 510 / 1920);
    top: calc(100% * 212 / 1080);
}

#anims_video {
    position: absolute;
    z-index: 100;
}

#anims_title {
    font-family: YardenBold;
    color: #fb8952;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 4.5%;
    margin: 0;
    text-shadow: #00000077 10px -10px 20px;
}

@media (min-aspect-ratio: 16/9) {
    #anims_title {
        font-size: 7.111cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #anims_title {
        font-size: 4cqw;
    }
}