html {
    position: relative;
    min-height: 100%;
}

.answer_bg_active {
    display: none;
}

@font-face {
    font-family: 'AssistantBold';
    src: url('Assistant-Bold.ttf');
}

@font-face {
    font-family: 'AssistantSemiBold';
    src: url('Assistant-SemiBold.ttf');
}

@font-face {
    font-family: 'AssistantExtraBold';
    src: url('Assistant-ExtraBold.ttf');
}

#main-wrapper {
    width: 1320px;
    position: fixed;
}

.trivia-content {
    width: 1320px;
    height: 1920px;
    position: relative;
}

#content-welcome {
    background-image: url('/menu_bg.jpg');
}

#content-game {
    background-image: url('/game_bg.png');
}


.input_group {
    position: relative;
}

#welcome-inputs {
    padding-top: 1643px;
    width: 1004px;
    margin: 0 auto;
}

#purchase_popup_input_container > * {
    width: 100%;
}


.text_input {
    height: 80px;
    font-size: 50px;
    color: #fff200;
    width: 100%;
    padding-inline-start: 42px;
    position: relative;
    font-family: AssistantExtraBold;
    border: 0;
    background-color: #0078ff;
    text-align: center;
    letter-spacing: -2px;
}

.placeholder-span {
    pointer-events: none;
    position: absolute;
    transition: 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    font-size: 50px;
    color: #fff200;
    width: 100%;
    right: 0px;
    text-align: center;
    font-family: AssistantBold;
    transform: translate(0, 0);
    opacity: 0.7;
    letter-spacing: -2px;
    border: 0;
}


input:focus + span, input:not(:placeholder-shown) + span {
    font-size: 0px;
    opacity: 0;
}

#toc_click_area {
    background-color: white;
    width: 490px;
    height: 50px;
    position: absolute;
    bottom: 20px;
    left: 610px;
    opacity: 0.0;
}

#toc_checkbox {
    position: absolute;
    left: 1112px;
    top: 1852px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 49px;
    height: 48px;
    background: url("/check.png") no-repeat;
    cursor: pointer;
}

#toc_checkbox:checked {
    background: url("/check_checked.png") no-repeat right 5px top 5px
}

#start_btn {
    position: absolute;
    background-image: url("/btn_start.png");
    left: 158px;
    top: 1754px;
    border: 0;
    width: 325px;
    height: 80px;
}

#instructions_btn {
    position: absolute;
    background-image: url("/btn_instructions.png");
    left: 836px;
    top: 1754px;
    border: 0;
    width: 325px;
    height: 80px;
    display: flex;
    align-items: center;
    margin: 0;
}


.questionText {
    width: 100%;
    height: 320px;
    color: white;
    font-family: AssistantBold;
    text-align: center;
    font-size: 98px;
    line-height: 102px;
    padding: 0 30px;
    padding-top: 350px;
    /* color | offset-x | offset-y | blur-radius */
    text-shadow: #062742a0 -8px 2px 6px;
}

.btn-image {
    border: 0;
    background-color: transparent;
    padding: 0;
    margin: 0;
    position: absolute;
}

#popup_overlay {
    width: 1320px;
    height: 1920px;
    background-color: #00000088;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}


#popup_content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#popup_code {
    position: absolute;
    top: 67%;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 40px;
    font-family: 'AssistantBold';
    color: #0078ff77;
}

#popup_end_score {
    position: absolute;
    top: 47.5%;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 75px;
    font-family: AssistantExtraBold;
    color: #0078ff;
}

#popup_btn_x {
    position: absolute;
    left: 37px;
    top: 59px;
    width: 68px;
    height: 68px;
}

#input_place_name {
    height: 107px;
    font-size: 63.5px;
    color: #fff200;
    width: 100%;
    padding-inline-start: 42px;
    position: relative;
    font-family: AssistantExtraBold;
    border: 0;
    background-color: #0078ff;
    text-align: center;
    letter-spacing: -2px;
}

#game-inputs {
    width: 964px;
    margin: 0 auto;
    position:absolute;
    top: 617px;
    left: 178px
}

.placeholder-span2 {
    pointer-events: none;
    position: absolute;
    transition: 0.2s;
    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    font-size: 63.5px;
    color: #fff200;
    width: 100%;
    right: 0px;
    text-align: center;
    font-family: AssistantBold;
    transform: translate(0, 0);
    opacity: 0.7;
    letter-spacing: -2px;
    border: 0;
}


#timer {
    font-size: 110px;
    color: #fff200;
    text-align: center;
    font-family: AssistantExtraBold;
    letter-spacing: -2px;
    position: absolute;
    width: 389px;
    left: 469px;
    top: 464px;
    height: 111px;
    padding: 0;
    margin: 0;
    line-height: 111px;
}

#btn_next {
    position: absolute;
    left: 410px;
    top: 1795px;
    width: 500px;
    height: 69px;
    margin: 0;
    padding: 0;
    border: 0;
    transition: opacity 0.5s;
    opacity: 0.5;
    pointer-events: none;
}


#btn_skip {
    position: absolute;
    left: 553px;
    top: 804px;
    width: 215px;
    height: 69px;
    margin: 0;
    padding: 0;
    border: 0;
}

#main_img {
    position: absolute;
    height: 1000px;
    left:660px;
    top: 1255px;
    transform: translate(-50%, -50%);
    z-index: -10;
}

* {
    box-sizing: border-box;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

input {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 16px;
}

input[type=text] {
    background-color: #f1f1f1;
    width: 100%;
}

input[type=submit] {
    background-color: DodgerBlue;
    color: #fff;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9;
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.autocomplete-item {
    font-size: 40px;
}