/* ================= INDEX OF CSS ====================== 
1. Import Google Fonts
2. Css Variables 
3. Reset Css
4. Main Container 
5. Aside Section 
6. Content Wrapper 
7. Media Queries
=======================================================*/

/* ======= 1. Import Google Fonts ======= */

@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  src: url(../assets/fonts/luckiestguy/_gP_1RrxsjcxVyin9l9n_j2hTd52.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ======= 2. Css Variables  ======= */
:root{
  --bg-color:rgb(26, 24, 24);
  --txt-color:#fafafa;
  --math-font-family:'Luckiest Guy', cursive;
  --math-dark--bg: rgb(8, 8, 8);
  --icon-bg-color: rgb(0, 4, 255);
  --box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.9);

}

/* ======= 3. Reset Css  ======= 
*{
  padding: 0;
  margin: 0;
}

body{
  font-family: var(--math-font-family);
  background: var(--bg-color);
  color:var(--txt-color)
}
*/
/* ======= 4. Main Container  ======= */
.container.math{
  display: flex;
  background: var(--math-dark--bg);
  color:var(--txt-color)
}

    .container.math, .container.math ~ *  {
      font-family: var(--math-font-family) !important;
	  letter-spacing: 3px;
    }

/* ======= 5. Aside Section  ======= */
/*
aside{
  background: var(--math-dark--bg);
  width: 22rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 3rem 0;
}
*/
.heading{
  text-align: center;
}
.fa-lock{
  font-size: 2.35rem;
}
.text-success.fa-lock::before {
  content: "\f09c" !important;
}
/*
aside h2{
  font-size: 2rem;
  margin: 1rem;
}
ul{
  margin: 1rem 0;
}
ul li{
  list-style: none;
  font-size: 1.3rem;
  padding: .3rem;
}
ul li a {
  text-decoration: none;
  color: var(--txt-color);
}

.icon{
  background: var(--icon-bg-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-right: 1rem;
}
*/
/* ======= 6. Content Wrapper  ======= */
.wrapper{
  width: 100%;
  min-height: 100vh;
}
.equation{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(1rem + 8vw);
  background: var(--math-dark--bg);
  border-radius: 3px;
  text-align: center;
}

.equation h1{
  display: inline;
  padding: 20px;
}

.answer_options{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
   box-shadow: var(--box-shadow);
  font-size: 5.2vw;
  background: var(--math-dark--bg);
  border-radius: 3px;
}
  
.options{
  width:14.45595054095827vw;
  height:14.45595054095827vw;
  border-radius:100%;
  cursor: pointer;
  color: var(--txt-color);
  transition: 2s;
  box-shadow: var(--box-shadow);
  align-items:center;
  justify-content:center;
  display:flex;
  text-align: center;
  padding:.4rem;
  font-family: var(--math-font-family);
}




/* ========================================================= */
.progress-bar-bkg {
  background-image: linear-gradient(to right, rgba(255,0,0,.5) 0%, rgba(255,115,0,.5) 20%, rgba(255,255,255,.25) 80%, transparent 100%);
  padding:0 1px;
  border-radius: 30px;
}
.progress-moved {
	border-radius: 30px;
}
.progress2 {
  border-radius: 30px;
  background-color: transparent;
  margin: 0 -2px;
  }

.progress-bar2 {
  height: 18px;
  border-radius: 30px;
  transition: 0.4s linear;
  transition-property: width, background-color;
}

.progress-moved .progress-bar2 {
  background-color: #121212;
  /*animation: progress 30s infinite;*/
  animation: progress 30s ;
}

@keyframes progress {
  0% {
    width: 100%;
    background: #f9bcca;
  }
/*
  90% {
    width: 5%;
    background: #f3c623;
    box-shadow: 0 0 40px #f3c623;
  }
*/
  100% {
    width: 0.5%;
    background: #ff3500;
    box-shadow: 0 0 30px #f3c623;
  }
}

.fa-lock {
  color: rgba(255,0,0,.35);
  animation: icon 1.5s 20;
  background-color: transparent;
}

@keyframes icon {
  0% {
    opacity: 0.2;
    text-shadow: 0 0 0 #f3c623;
  }

  25% {
    opacity: 0.2;
    text-shadow: 0 0 0 #f3c623;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 2px #f3c623;
  }
  75% {
    opacity: 1;
    text-shadow: 0 0 2px #f3c623;
  }
  100% {
    opacity: 0.2;
    text-shadow: 0 0 0 #f3c623;
  }
}

.stripes {
    background-size: 30px 30px;
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, .25) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .25) 50%,
        rgba(255, 255, 255, .25) 75%,
        transparent 75%,
        transparent
    );
}

.stripes.animated {
  animation: animate-stripes 0.6s linear 19;
}

.stripes.animated.slower {
  animation-duration: 1.5s;
}

.stripes.reverse {
  animation-direction: reverse;
}

@keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 60px 0;
    }
}

.blinking{
	animation:blinkingText 0.75s 2;
}
@keyframes blinkingText {
	0%{		color: #ff0000;	}
	49%{	color: #ffffff;	}
	50%{	color: #ff0000;	}
	99%{	color: #ffffff;	}
	100%{	color: #ff0000;	}
}


#answer_keyboard{
	margin-bottom: var(--bs-gutter-x,.75rem);
	margin-left: -0.25rem;
	margin-right: -0.25rem;
	background:rgba(255,255,255,.25);
	border-radius:.75rem;

}

#answer_keyboard .keyboard_separator {
	width:1%;
}
	
#answer_keyboard .col-2 {
	width: 16.5%;
	position: relative;
	background-image: url(../assets/images/kb_btn_off.png);
	background-position: center;
	background-size: cover;/*now this is known for the safari*/
	color:#4f4f4f;
	cursor:pointer;
}

#answer_keyboard .col-2:hover {
	background-image: url(../assets/images/kb_btn_on.png);
	color:#39c0ed;
}

#answer_keyboard .col-2:before,
#answer_keyboard .col-3:before {
	content: "";
	float: left;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

#answer_keyboard h1 {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
}

#answer_keyboard .col-3 {
	width: 16.5%;
	position:relative;
	background-position: center;
	background-size: cover;/*now this is known for the safari*/
	cursor:pointer;
}

#reset_last_nbr, #set_current_nbr {
	background-image: url(../assets/images/kb_btn_trans.png);
}
#set_current_nbr:hover {
	background-image: url(../assets/images/kb_btn_set.png);
}
#reset_last_nbr:hover {
	background-image: url(../assets/images/kb_btn_reset.png);
}



/* ======= 7. Media Queries  ======= */
/*@media only screen and (max-width: 700px){*/
@media only screen and (min-width: 576px){
	#answer_keyboard, .max-500 {
		max-width: 520px;
		margin-right: auto;
		margin-left: auto;
	}
	
	#answer_keyboard .d-flex {
		width: 100vw;
		max-width: 520px;
		margin-right: auto;
		margin-left: auto;

	}
   
}

/* ======= 7. Media Queries  ======= */
/*@media only screen and (max-width: 700px){*/
@media only screen and (max-width: 767px){
  .container{
    display: block;
  }

  .wrapper{

  }
  .equation{
	  font-size: calc(1rem + 10vw);
  }
  .answer_options{
    padding: 3rem;
  }
   
}

@media only screen and (max-width: 380px){
  .equation{
	  font-size: calc(1rem + 12vw);
  }
}