:root {
    --background: #E0FFFF;
    --text-color: #003366;
}

.dark {
    --background: #003366;
    --text-color: #E0FFFF;
}

.img {
    background: var( --background);
}

html,body {
    position: relative;
    font-size: 1rem;
    background: var( --background);
}

h1{
    text-align: center;
    width: 100%;
    margin: 0 auto;
    font-family: Palatino;
    font-weight: bold;
    color: var(--text-color);
}


.popup-header {
    margin-top: 1%;
    margin-right: 3%;
    color: #393939;
    border-bottom-color: #393939;
    border-bottom: 10px ;
}

.settings-title{
    margin-top: 2%;
    margin-left: 3%;
    color: white;
    font-weight: bold;
    font-size: 30px;
    position: center;
}

.text-color{
    color : var(--text-color);
    font-family: Palatino;
    font-weight: bold;
    font-size: 18px;
}

.hr-settings-lang{
    margin-left: 15%;
    margin-top: 2%;
    width: 70%;
    height: 3px;
    background: var( --text-color);;
}

.text-settings{
    color: white;
    display: inline-block;
    font-size: 25px;
    margin-top: 16%;
}

.custom-select {
    width: 70%;
    margin: 0 auto;
    position: relative;
}

select::-ms-expand {
    display: none;
}


.settings-btn {
    width: 70px;
    height: 70px;
    position: fixed;
    top: 6%;
    right: 1%;
}

.settings-btn img {
    cursor: pointer;
    -webkit-transform: rotate(15deg) scale(1.5);
    transform: rotate(15deg) scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;



}
.settings-btn img:hover {
    -webkit-transform: rotate(0) scale(1.2);
    transform: rotate(0) scale(1.2);

}

.popup {
    display: none;
    position: fixed;
    text-align: center;
    z-index: 1;
    padding-top: 8%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}


.close {
    color: var(--text-color);
    float: right;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}

.popup-header {
    margin-top: 1%;
    margin-right: 3%;
    color: var(--background);
    border-bottom-color: var(--background);
    border-bottom: 10px ;
}


.popup-content {
    position: relative;
    background-color: var(--background);
    margin: auto;
    border-radius: 1%;
    border: 2px solid var(--text-color);
    width: 45%;
    height: 75%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
.settings-title{
    margin-top: 2%;
    margin-left: 3%;
    color: var(--text-color);
    font-weight: bold;
    font-size: 30px;
}

.hr-settings-header{
    margin-left: 3%;
    width: 97%;
    height: 4px;
    background: var(--text-color);
}

.hr-settings{
    width: 70%;
    position: relative;
    height: 3px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background: var(--text-color);
}

.text-settings{
    color: var(--text-color);
    display: inline-block;
    font-size: 1.25vw;
    margin-top: 16%;
}

.text-dalt-settings{
    color: var(--text-color);
    display: inline-block;
    font-size: 1.25vw;
}

.text-theme-settings{
    color: var(--text-color);
    display: inline-block;
    font-size: 1.25vw;
}

.small-btn {
    width: 5vh;
    height: 5vh;
}
.explain-btn {
    width: 70px;
    height: 70px;
    position: fixed;
    top: 90%;
    right: 1%;

}


.explain-btn img {
    cursor: pointer;
    -webkit-transform: rotate(0) scale(1.5);
    transform: rotate(0) scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}


.explain-btn img:hover {
    -webkit-transform: rotate(0) scale(1.2);
    transform: rotate(0) scale(1.2);

}

.playsmall-btn{
    width: 150px;
    height: 150px;
}

.play-btn {
    width: 150px;
    height: 150px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 33vh auto;
    text-align: center;
}

.play-btn img {
    cursor: pointer;
    -webkit-transform: rotate(0) scale(1.5);
    transform: rotate(0) scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}


.play-btn img:hover{
    -webkit-transform: rotate(0) scale(1.2);
    transform: rotate(0) scale(1.2);
}

.switch {
    position: relative;
    float: right;
    display: inline-block;
    width: 90px;
    height: 38px;
    bottom: 7px;
}

.switch input {
    display: none;
}

input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    -webkit-appearance: checkbox;
    box-sizing: border-box;
    margin: 3px 3px 3px 4px;
    padding: initial;
    border: initial;
}
input:checked + .slider {
    background-color: #ca2222;
}
.slider.round {
    border-radius: 34px;
    border: 2px solid var(--text-color);
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 40%;
    left: -200%;
    right: 180%;
    bottom: -50%;
    background-color: var(--background);
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider:before {
    -webkit-transform: translateX(52px);
    -ms-transform: translateX(52px);
    transform: translateX(52px);
}
.slider.round:before {
    border-radius: 50%;
}
.slider:before {
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 10px;
    background-color: var(--text-color);
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked+ .slider .off {
    display: block;
}

.on, .off {
    color: var(--text-color);
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}
.off {
    display: none;
}
.disable-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input:checked + .slider .on {
    display: none;
}
.on, .off {
    color: var(--text-color);
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}
.disable-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*
.card {
    display: table-cell;
    border: 1px solid #000;
    border-radius: 6px;
    width: 300px;
    height: 400px;
}*/

.game-button {
    font-size: 5vh;
    height: 8vh;
    margin: 0.7vh;
    width: 50vh;
    cursor: pointer;
    font-family: Palatino;
    font-weight: bold;
    border: 2px solid var(--background);
    border-radius: 10px;
    transition-duration: 0.4s;
    color: var(--background);
    padding-left: 5%;
    padding-top: 1%;
    background: var(--text-color);
    left: 10px;
}

.game-button-mode {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    display: block;
    width: 50vh;
}
.disable-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mode-title {
    font-size: 2.5vw;
    margin-top: 2%;
    position: absolute;
    color: var(--text-color);
    width: 100%;
    font-weight: bold;
    text-align: center;
    font-family: Palatino;

}

.back-btn{
    position: fixed;
    top: 6%;
    left: 1%;
}

.back-btn img {
    cursor: pointer;
    -webkit-transform: rotate(0) scale(1.5);
    transform: rotate(0) scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}


.back-btn img:hover{
    -webkit-transform: rotate(0) scale(1.2);
    transform: rotate(0) scale(1.2);
}


#progressBar {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}

#progressBar div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBar div {
    box-sizing: border-box;
}

.count{
    font : oblique 20px Arial, Palatino, sans-serif;
    color: var(--text-color);

}


#progressBar0 {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}
#progressBar0 div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px;
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBar0 div {
    box-sizing: border-box;
}

#progressBar1 {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}
#progressBar1 div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px;
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBar1 div {
    box-sizing: border-box;
}

#progressBar2 {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}
#progressBar2 div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px;
    width: 0;
    background-color: #FF0000;
    box-sizing: border-box;
}
#progressBar2 div {
    box-sizing: border-box;
}

#progressBar3 {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}
#progressBar3 div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px;
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBar3 div {
    box-sizing: border-box;
}




#progressBar4 {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}
#progressBar4 div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px;
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBar4 div {
    box-sizing: border-box;
}

#progressBarHS {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}

#progressBarHS div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBarHS div {
    box-sizing: border-box;
}
#progressBarHS0 {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}

#progressBarHS0 div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBarHS0 div {
    box-sizing: border-box;
}
#progressBarHS1 {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}

#progressBarHS1 div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBarHS1 div {
    box-sizing: border-box;
}


#progressBarHS2 {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}

#progressBarHS2 div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBarHS2 div {
    box-sizing: border-box;
}

#progressBarHS3 {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}

#progressBarHS3 div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBarHS3 div {
    box-sizing: border-box;
}


#progressBarHS4 {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #B22222;
}

#progressBarHS4 div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #ffc2b3;
    box-sizing: border-box;
}
#progressBarHS4 div {
    box-sizing: border-box;
}