/* @font-face {
	font-family: Jory;
	src: url('../fonts/DG_Jory_Reg.ttf');
}
@font-face {
	font-family: JoryL;
	src: url('../fonts/DG_Jory_Light.ttf');
} */

@font-face {
  font-family: Kitab;
  src: url('../fonts/Kitab-Regular.ttf');
  unicode-range: U+200?, U+60C, U+618-61B, U+61F, U+621-63A, U+640-655, U+65C, U+660-66C, U+670-671, U+6CC, U+6D4, U+6D6-6DD, U+6DF-6E8, U+6EA-6ED, U+8F0-8F3, U+FD3E-FD3F, U+FDF2;
}
@font-face {
  font-family: Kitab;
  src: url('../fonts/Kitab-Bold.ttf');
  font-weight: 700;
  unicode-range: U+200?, U+60C, U+618-61B, U+61F, U+621-63A, U+640-655, U+65C, U+660-66C, U+670-671, U+6CC, U+6D4, U+6D6-6DD, U+6DF-6E8, U+6EA-6ED, U+8F0-8F3, U+FD3E-FD3F, U+FDF2;
}

:root {
  --default-color: #fff4ec;
  --heading-color: #fff4ec;
  --heading-color-shadow: #331f10;
  --question-color: #fff4ec;
  --choice-color: #fff4ec;
  --choice-back-color: rgba(154, 128, 98, 0.681);
  --choice-pre-back-color: #ebad56;
  --choice-highlight-color: rgba(241, 210, 148, 0.8);

  --sub-question-color: #fff4ec;
  --sub-question-back-color: rgba(154, 128, 98, 0.681);

  --btn-b-rad: 1rem;

  --primary-color: rgb(154, 128, 98);
  --secondery-color: rgb(79, 62, 42);
  --primary-back-color: #ebad56;
  --light-color: #fff4ec;
  /* --lighter-color: var(--primary-color); */
  
  /* filter: var(--lighter-color); */
  /* background-color: #ecf5ff; */
  /* background-image: url('images/gradienta.jpg'); */
  /* background: linear-gradient(45deg, #fcfcfc, #a0c9fd); */
  font-size: 62.5%;
  direction: rtl;
  text-align: right;
  /* font-family: 'JoryL'; */
  font-family: 'Kitab';

  background: url('../images/Brown_Wallpaper.jpg') repeat-x center;
  /* background: url('../images/game-typa-0.jpg') repeat-x center; */
  /* filter: hue-rotate() */
  /* background: linear-gradient(93deg, rgba(255 255 255,10), rgba(200 200 200,10)); */
  /* #d2e9f5, #b9d2e0, #d2eaf9); */
  background-size: 120% 100%;
/* 
  animation-delay: 0s !important;
  animation: fadeIn 4s;
  animation-fill-mode: forwards; */

  -webkit-animation: AnimationName 20s ease-in-out infinite;
  -moz-animation: AnimationName 20s ease-in-out infinite;
  animation: AnimationName 20s ease-in-out infinite;
}

@-webkit-keyframes AnimationName {
  0%{background-position: 0% 80%}
  50%{background-position:100% 80%}
  100%{background-position:0% 80%}
}
@-moz-keyframes AnimationName {
  0%{background-position: 0% 80%} 
  50%{background-position:100% 80%}
  100%{background-position:0% 80%}
}
@keyframes AnimationName {
  0%{background-position: 0% 80%}
  50%{background-position:100% 80%}
  100%{background-position:0% 80%}
}

/* LOADER */
#loader {
  border: 1.6rem solid white;
  border-radius: 50%;
  border-top: 1.6rem solid var(--primary-back-color);
  width: 12rem;
  height: 12rem;
  animation: spin 2s linear infinite;
}

/* LOADER */
.loader-content {
  background-color: transparent; 
  text-align: center; 
  width: 14rem; 
  border: none;
  padding: 0;
  margin: 40vh auto; /* 15% from the top and centered */
}
#loaderCir {
  border: 1.6rem solid white;
  border-radius: 50%;
  border-top: 1.6rem solid var(--primary-back-color);
  width: 12rem;
  height: 12rem;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#quiz-container {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#done-by {
  text-align: center;
  margin: 2rem;
  font-family: 'Kitab';
  /* font-family: Jory; */
  font-size: 2rem;
  font-weight: 100;
}

* {
  box-sizing: border-box;
  /* font-family: 'JoryL'; */
  font-family: 'Kitab';
  /* font-family: Arial, Helvetica, sans-serif; */
  margin: 0;
  padding: 0;
  color: var(--default-color);
}

h1,
h2,
h3,
h4 {
  margin-bottom: 1rem;
}

h1 {
  font-size: 5.4rem;
  /* color: #579ad4; */
  margin-bottom: 5rem;
  margin-top: 1rem;
  color: var(--heading-color);
  /* color: #6dafd7; */
  /* box-shadow: 1px 1px aqua; */
  text-shadow: -1px -1px 1px var(--heading-color-shadow);
  opacity: 0;
  animation-delay: 0s !important;
  animation: fadeInUp 2s ease-out;
  animation-fill-mode: forwards;

  /* animation-duration: 4s; */
}
#material {
  margin-bottom: 1rem;
}

h1 > span {
  font-size: 2.4rem;
  font-weight: 500;
}

h2 {
  font-size: 4.2rem;
  margin-bottom: 4rem;
  font-weight: 700;
  /* color: #ecfbff; */
  color: var(--heading-color);
  text-shadow: -1px -1px 1px var(--heading-color-shadow); 
  /* // #579ad4; */
}

h3 {
  font-size: 2.5rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

/* #game {
  /* filter: hue-rotate(60deg); 
  
} */

/* UTILITIES */

.container {
  /* filter: hue-rotate(60deg); */
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  max-height: 95rem;
  margin: 0 auto;
  padding: 2rem;
  /* background-color: #000; */
  
}

.container > * {
  width: 100%;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.text-center {
  text-align: center;
}

.hidden {
  display: none;
}

/* BUTTONS */
.btn {
  font-size: 1.8rem;
  font-weight: bold;
  padding: 1.2rem 0;
  width: 20rem;
  text-align: center;
  border: 0.1rem solid #fff;
  border-radius: var(--btn-b-rad);
  /* border-radius: 4rem; */
  margin-top: 2rem;
  text-decoration: none;
  text-shadow: var(--secondery-color) 0 -0.1rem;
  color: #fff;
  /* background-color: #56a5eb; */
  /* background: linear-gradient(0deg, rgba(59,173,227,1) 0%,  #56a5eb 51%, #579ad4 100%); */
  background: linear-gradient(0deg, var(--primary-color) 0%, var(--primary-back-color) 51%, #d49757 100%);

}

.btn:hover {
  cursor: pointer;
  box-shadow: 0 0.4rem 1.4rem 0  var(--choice-pre-back-color);
  transform: translateY(-0.1rem);
  transition: transform 150ms;
}

.btn[disabled]:hover {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* FORMS */
form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

input, select {
  margin-bottom: 1rem;
  /* width: 20rem; */
  /* text-c */
  width: 40%;
  padding: 1.5rem;
  font-size: 1.8rem;
  border: none;
  color: var(--secondery-color);
  background-color: var(--choice-color);
  box-shadow: 0 0.1rem 1.4rem 0 var(--choice-pre-back-color);
}

input::placeholder {
  /* color: rgba(86, 185, 235, 0.8 ); */
  color: var(--primary-color);
  opacity: 1;
}

#info {
  text-align: center;
}


/* HUD */

#hud {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.hud-prefix {
  text-align: right;
  direction: rtl;
  font-size: 2rem;
  color: var(--heading-color);
}

.hud-main-text {  
  text-align: center;
}

.hud-logo {
  width: 8rem;
}

/* autocomplete */
.result-box {
  width: 100%;
  background-color: var(--choice-color);
  border-top: 1px solid #999;
  padding: 2vh 2rem;
}
.result-box li {
  color: var(--secondery-color);
  font-size: 2rem;
  list-style: none;
  border-radius: 3px;
  padding: 2vh 2rem;
  cursor: pointer;
  margin: 0.2rem;
}
.result-box li:hover {
   background:var(--primary-back-color);
}
/* #username {
  margin-bottom: 0;
} */

 /* The Modal (background) */
 .modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 40vh auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
}
.modal-content h3 {
  color: var(--secondery-color);
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.card {
  background-color: rgba(133, 102, 67, 0.5);
  border: solid 0.1rem #b98f70;
  border-radius: 0.3rem;
  padding: 8rem 4rem;
  width: -moz-fit-content;
  width: fit-content;
}
.card-content h3{
  color: var(--heading-color);
}
.four-column{
  width: 24.7%;
}
.two-column{
  width: 49.8%;
}
.one-column{
  width: 100%;
}


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


 @media screen and (max-width:900px) {
  :root {
    background-size: 200% 100%;
    animation-duration: 40s;
  }
  h1 {
    margin-top: 3rem;
    font-size: 4rem;
    line-height: 6rem;
    /* margin-bottom: 0; */
  }
  .card {
    padding: 8rem 0.5rem;
  }
  /* input, select, .result-box {
    width: 80%;
  } */
  /* #username {
    width: 80%;
   } */
}