:root {
    --color-bg: #F2EFDF;
    --color-text: #734439;
    --color-btn-0: #A65851;
    --color-btn-1: #BF8173;
    --color-btn-text: #fff;
    --color-link: #7AB3BF;

    --color-bg: #e3dfda;
    --color-text: #526161;
    --color-game-text: #3e6565;
    --color-game-text-near-correct: #ee9c32;
    --color-game-text-correct: #218428;
    --color-game-text-incorrect: #d75b50;
    --color-btn-0: #f9b484;
    --color-btn-1: #a7C5C5;
    --color-btn-2: #bfbab4;
    --color-btn-text: rgb(0 0 0 / 60%);
}

body.dark {
    --color-bg: #0e0e0e;
    --color-text: #a0a5a5;
    --color-game-text: #648181;
    --color-btn-0: #85502a;
    --color-btn-1: #416767;
    --color-btn-2: #45423f;
    --color-btn-text: rgb(255 255 255 / 70%);
}

html, body {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow: hidden;
    font-family: 'REM', sans-serif;
    user-select: none;
}

* {
    margin: 0; padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

#screenReaderOnly {
    position: fixed;
    height: 1px;
    width: 1px;
    overflow: hidden;
    opacity: 0;
    user-select: none;
	z-index: -1000;
	top: 3000px;
	left: 3000px;
}

#safe-area-wrapper {
    position: absolute;
    width: 0;
    height: 0;
}

#safe-area {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    padding: 10px;
	transform-origin: center;
/*	background-color: #FF000010;*/
	min-height: 600px;
}

.hidden {
    display: none !important;
    pointer-events: none;
}

.title {
    position: relative;
    width: fit-content;
    height: 48px;
    line-height: 48px;
    margin: 0 auto;
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-game-text);
}

.title::after {
    content: '..';
    position: absolute;
    top: -13px;
    right: -12px;
    font-size: 80%;
    transform: rotate(45deg);
    color: var(--color-game-text);
}

.subtitle {
    font-size: 2rem;
}

small {
    font-size: 0.65rem;
}

a {
    text-decoration: none;
    color: var(--color-link);
}

.btn {
    background-color: var(--color-btn-0);
    color: var(--color-btn-text);
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.375rem;
    min-width: 200px;
    max-width: 400px;
    font-family: 'REM', sans-serif;
    transition: transform 0.08s ease;
}

.btn-big {
    font-size: 2.5rem;
}

.btn[unusable = true] {
    opacity: 0.25;
}

.btn:hover {
    transform: translateY(-2px);
}

#btn-game-start {
    margin: 2rem;
}

/*-------------------------------------------------------
MENU SCENE
-------------------------------------------------------*/

#menu-scene {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

#level-select-wrapper {
    display: flex;
	flex-grow: 1;
	flex-shrink: 1;
    width: 100%;
	overflow: auto;
}

#level-select-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    grid-gap: 0.5em;
    align-items: center;
/*	align-self: center;*/
}

.scrollable-flex-interior {
    width: 100%;
    display: flex;
    min-height: min-content;
}

#level-select-container .btn {
    width: 400px;
	max-width: 100%;
    text-align: left;
}

/*-------------------------------------------------------
GAME SCENE
-------------------------------------------------------*/

#game-scene {
    display: flex;
    width: 100%;
    height: 100%;
    max-height: 600px;
    max-width: 800px;
    align-self: center;
}

#lesson-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
}

#lesson-back {
    position: fixed;
    top: 10px;
    left: 10px;
}

#lesson-music-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
}

#lesson-title {
    display: flex;
/*    background-color: #a88;*/
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

#lesson-text {
/*    background-color: #88a;*/
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-direction: column;
    grid-gap: 0.75rem;
}

#lesson-question {
    display: flex;
/*    background-color: #a88;*/
    height: 200px;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;
    font-size: 8em;
    line-height: 0.9em;
    flex-shrink: 1;
}

#lesson-answer {
    display: flex;
    height: 140px;
    flex-wrap: wrap;
    align-content: flex-end;
/*    background-color: #88a;*/
    flex-shrink: 1;
}

#lesson-choices {
    display: flex;
    height: 220px;
    flex-wrap: wrap;
    align-content: flex-end;
/*    background-color: #a88;*/
    flex-shrink: 1;
    justify-content: center;
}

.braille-choice {
    width: 67px;
    height: 100px;
    background-size: 57px 90px;
    border-radius: 10px;
    background-color: white;
    margin: 5px;
    flex-shrink: 1;
}

.braille-answer {
    width: 37px;
    height: 60px;
    background-size: 37px 60px;
    margin: 5px;
    flex-shrink: 1;
}

@media screen and (max-width: 320px) {
	#lesson-question {
		font-size: 3em;
		line-height: 0.9em;
	}

	.braille-choice {
		width: 27px;
		height: 42px;
		background-size: 23px 36px;
		border-radius: 4px;
		margin: 3px;
	}

	.braille-answer {
		width: 15px;
		height: 24px;
		background-size: 15px 24px;
		margin: 4px;
	}
}

@media screen and (max-height: 450px) {
	#lesson-question {
		font-size: 2.5em;
		line-height: 0.9em;
	}

	.braille-choice {
		width: 27px;
		height: 42px;
		background-size: 23px 36px;
		border-radius: 4px;
		margin: 3px;
	}

	.braille-answer {
		width: 15px;
		height: 24px;
		background-size: 15px 24px;
		margin: 4px;
	}
}

@media screen and (min-width: 321px) {
	#lesson-question {
		font-size: 3.60em;
		line-height: 0.9em;
	}

	.braille-choice {
		width: 35px;
		height: 55px;
		background-size: 31px 49px;
		border-radius: 6px;
		margin: 3px;
	}

	.braille-answer {
		width: 18px;
		height: 29px;
		background-size: 18px 29px;
		margin: 5px;
	}
}

@media screen and (min-width: 665px) {
	#lesson-question {
		font-size: 3.6em;
		line-height: 0.9em;
	}

	.braille-choice {
		width: 35px;
		height: 55px;
		background-size: 31px 49px;
		border-radius: 6px;
		margin: 3px;
	}

	.braille-answer {
		width: 18px;
		height: 29px;
		background-size: 18px 29px;
		margin: 5px;
	}
}

@media screen and (min-width: 800px) {
	#lesson-question {
		font-size: 5em;
		line-height: 0.9em;
	}

	.braille-choice {
		width: 50px;
		height: 79px;
		background-size: 43px 68px;
		border-radius: 10px;
		background-color: white;
		margin: 5px;
	}

	.braille-answer {
		width: 21px;
		height: 34px;
		background-size: 21px 34px;
		margin: 5px;
	}
}

.braille-choice[data-braille=A], .braille-answer[data-braille=A] {
    background-image: url(../img/braille_a.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=B], .braille-answer[data-braille=B] {
    background-image: url(../img/braille_b.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=C], .braille-answer[data-braille=C] {
    background-image: url(../img/braille_c.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=D], .braille-answer[data-braille=D] {
    background-image: url(../img/braille_d.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=E], .braille-answer[data-braille=E] {
    background-image: url(../img/braille_e.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=F], .braille-answer[data-braille=F] {
    background-image: url(../img/braille_f.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=G], .braille-answer[data-braille=G] {
    background-image: url(../img/braille_g.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=H], .braille-answer[data-braille=H] {
    background-image: url(../img/braille_h.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=I], .braille-answer[data-braille=I] {
    background-image: url(../img/braille_i.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=J], .braille-answer[data-braille=J] {
    background-image: url(../img/braille_j.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=K], .braille-answer[data-braille=K] {
    background-image: url(../img/braille_k.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=L], .braille-answer[data-braille=L] {
    background-image: url(../img/braille_l.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=M], .braille-answer[data-braille=M] {
    background-image: url(../img/braille_m.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=N], .braille-answer[data-braille=N] {
    background-image: url(../img/braille_n.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=O], .braille-answer[data-braille=O] {
    background-image: url(../img/braille_o.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=P], .braille-answer[data-braille=P] {
    background-image: url(../img/braille_p.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=Q], .braille-answer[data-braille=Q] {
    background-image: url(../img/braille_q.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=R], .braille-answer[data-braille=R] {
    background-image: url(../img/braille_r.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=S], .braille-answer[data-braille=S] {
    background-image: url(../img/braille_s.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=T], .braille-answer[data-braille=T] {
    background-image: url(../img/braille_t.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=U], .braille-answer[data-braille=U] {
    background-image: url(../img/braille_u.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=V], .braille-answer[data-braille=V] {
    background-image: url(../img/braille_v.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=W], .braille-answer[data-braille=W] {
    background-image: url(../img/braille_w.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=X], .braille-answer[data-braille=X] {
    background-image: url(../img/braille_x.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=Y], .braille-answer[data-braille=Y] {
    background-image: url(../img/braille_y.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=Z], .braille-answer[data-braille=Z] {
    background-image: url(../img/braille_z.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille="1"], .braille-answer[data-braille="1"] {
    background-image: url(../img/braille_1.png);
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="2"], .braille-answer[data-braille="2"] {
    background-image: url(../img/braille_2.png);
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="3"], .braille-answer[data-braille="3"] {
    background-image: url(../img/braille_3.png);
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="4"], .braille-answer[data-braille="4"] {
    background-image: url(../img/braille_4.png);
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="5"], .braille-answer[data-braille="5"] {
    background-image: url(../img/braille_5.png);
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="6"], .braille-answer[data-braille="6"] {
    background-image: url(../img/braille_6.png);
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="7"], .braille-answer[data-braille="7"] {
    background-image: url(../img/braille_7.png);
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="8"], .braille-answer[data-braille="8"] {
    background-image: url(../img/braille_8.png);
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="9"], .braille-answer[data-braille="9"] {
    background-image: url(../img/braille_9.png);
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="0"], .braille-answer[data-braille="0"] {
    background-image: url(../img/braille_0.png);
    background-position: center;
    background-repeat: no-repeat;
}

.braille-choice[data-braille=" "], .braille-answer[data-braille=" "] {
    background-image: url("../img/braille_space.png");
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="."], .braille-answer[data-braille="."] {
    background-image: url("../img/braille_period.png");
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille=","], .braille-answer[data-braille=","] {
    background-image: url("../img/braille_comma.png");
    background-position: center;
    background-repeat: no-repeat;
}
.braille-choice[data-braille="#"], .braille-answer[data-braille="#"] {
    background-image: url("../img/braille_pound.png");
    background-position: center;
    background-repeat: no-repeat;
}