/*
	-------------------------------------------------------		COMMON-UI
*/

:root {
  --blue: #1e90ff;
  --white: #ffffff; 
  --top-margin: 64px;
  --tile-spacing: 16px;
  --tile-width: 220px;
  --tile-height: 220px;
  --card-width: 200px;
  --card-height: 200px;
  --card-inset: 10px;
    --app-background: #7D8895;
    --app-background-light: #A0B0BB;
    --black: #112;
    --dark-color: #223;
    --primary:#6D007D;
    --primary-dark:#4D005D;
    --primary-light:#9D21AD;
    --yellow: #ffec7d;
    --green:#009a60;
    --red:#c50080;
    --rad:4px; /*radius*/
    --heading-font:'Barlow Semi Condensed', sans-serif;
    --body-font:'Lato', sans-serif;
}

#current-state, #DEBUG {
    display:none;
}
.MAIN-MENU #slide-image {
    display:none;
}

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' 0,
  'opsz' 24
}


body {
    font-family:var(--body-font);
}

h1,h2,h3 {
    font-family:var(--heading-font);
}


/*
	-------------------------------------------------------		LOADING SCREEN
*/

.loading-screen {
	background: var(--app-background);
	width: 960px;
	height: 540px;
	display: grid;
	align-items: center;
	justify-items: center;
}

#loading-panel {
	border: 2px solid var(--primary);
	background-color: #fff;
	color: var(--dark-color);
	border-radius: var(--rad);
	padding: 20px;
	width: 500px;
	display: grid;
	grid-template-columns: 5fr 1fr;
	align-items: center;
	justify-items: stretch;
    font-size:1.2em;
}
#loading-percentage {
	text-align: right;
}
#loading-panel #loading-percentage button{
    display:block;
    margin:auto;
}
#loading-title {
	text-align: left;
}

/*button styles*/

.button {
    display: flex;
	align-items: center;
    flex-flow:row;
    cursor: pointer;
    border-radius: var(--rad);
    border-radius: var(--rad);
    border: 2px solid transparent;
}

a.button {
    text-decoration:none;
}

.button b {
    border-bottom:1px solid white;
    border-color:inherit !important;
}
.button .material-symbols-rounded {
    margin:auto 2px auto 0px;
}

.button.primary-button {
    font-size:22px;
    letter-spacing: .05rem;
    padding:10px 15px;
    background:var(--primary);
    border-color: white;
    color:white;
    font-weight:600;
    justify-content: center; 
	font-family: var(--heading-font);
    transition:all .3s ease-in-out;
}
.button.primary-button:hover {
    background:var(--primary-light);
}
.button.primary-button:active { 
    background:var(--primary-dark);
    transform:scale(.95);
}

.button.exit-button, .button.help-button  {
	position: absolute !important;
	left: 5px;
	top: 5px;
    font-size:19px;
    letter-spacing: .05rem;
    padding:5px;
}
.button.help-button  {
    left:auto;
    right:5px;
}

.help-button .material-symbols-rounded {
    margin:auto 2px auto 0px;
}


#APP-CONTAINER {
    border: 1px solid #ccc;
    width: 960px;
    height: 540px;
    position: relative;
    overflow: hidden;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color:var(--black);
    color:var(--dark-color);
}

#title-brand {
    background:url(../images/TitleHorizontal.svg) no-repeat;
    text-indent:-1000px;
    background-position: center center;
    background-size:100%;
    font-size:.1rem;
    overflow:hidden;
}

#title-brand.lesson-brand {
    height:41px;
    width:158px;
} 

.lesson-main .lesson-brand {
    
    position:absolute;
    left: 100px;
    top:5px;
    font-weight:bold;
    font-family:var(--heading-font);
    font-size:22px;
}
.lesson-main {
    background-color: var(--app-background-light);
				width: 960px;
				height: 540px;
				position: absolute;
				left: 0px;
				top: 0px;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-content: center;
				justify-content: center;
}

.lesson-title { 
    margin:auto;
    margin-bottom:10px;
}
.lesson-menu { 
    margin:auto;
    margin-top:10px;
    
}

.card-row {
            display:flex;
            flex-flow:row;
            width:600px;
        }
        .card-main {
            position:flex;
            display:flex;
            flex-flow:column;
            justify-content: center;
            align-items: center;
            margin:auto;
            width:250px;
        }
        .card-img {
          overflow:hidden;  
            width:200px;
            height:200px;
            border:1px solid white;
            border-radius:4px;
            margin-bottom:10px;
        }

.lesson-menu>button {
    margin:auto;
}

/*	Loader screen styles	*/

#loader-container {
	width: 960px;
	height: 540px;
	position: absolute;
	left: 0px;
	top: 0px;
	display: grid;
	align-items: center;
	justify-items: center;
	pointer-events: none;
	background-color: #333;
}
#loader-display {
	width: 600px;
	position: relative;
	border: 2px solid var(--dark-color);
	border-radius: var(--rad);
	padding: 20px;
	background-color: white;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.load-progress-bar {
	width: 100%;
}