@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap');

/*========== COLOR & FONTS ==========*/

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  user-select: none;
  margin: 0;
  padding: 0;
  --background: #FFF;
  --color: #000;
  overflow: hidden;
  background: var(--background);
  color: var(--color);
  font: 700 16px/1.5 'Quicksand', sans-serif;
  --blue: #2196f3;
  --green: #14b376;
  --purple: #4400ff;
}

body{font-size: 24px; }

/* @mobile */
@media screen and (max-width: 720px) {
  body{ font-size: 12px; }
}

button{
  font-family: 'Quicksand', sans-serif;
  border-radius: 0px;
}


body.theme-dark{
  --background: #222;
  --color: #FFF;
}

body.theme-colorful, body.theme-dark{
  /* rainbow background linear gradient */
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  /*background: linear-gradient(-45deg, #1742b8, #e73c7e);*/  
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #1742b8, #e73c7e, #ee7752);
  background: linear-gradient(-45deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);

	background-size: 200% 200%;
	animation: theme-colorful-gradient-animation 30s ease infinite;
  --background: #000;
  --color: #FFF;
  text-shadow: -1px 0 var(--background), 0 1px var(--background), 1px 0 var(--background), 0 -1px var(--background);
}
@keyframes theme-colorful-gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}




/*========== VARIABLES & STANDART ==========*/

.relative{ position: relative; }
.absolute{ position: absolute; }
.center{ margin: auto; }
h1,h2,h3,h4,h5,h6,p{ margin: 0; }
icon{
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
  max-width: 1em;
  max-height: 1em;
}
icon svg{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
icon svg path{
  fill: currentColor;
}




/*========== GAME ==========*/


.game{
  background: transparent!important;
  color: unset;
  width: 100%;

  height: 100%;
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: default;

}

.game-area{
  animation: zoom-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  width: 720px;
  width: 100%;
  max-width: 100%;
  font-size: 2em;
}

@keyframes zoom-in {
  0% {
    transform: scale(.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#question{
  font-size:1.25em;
}


.game-border-ui{
  font-size: 3vmax!important;
  padding: 0.4em!important;
  width: unset!important;
  height: unset!important;
  line-height: 1em!important;
}


/*========== BUTTONS ==========*/

/*---------- .button-border ----------*/

.button-border{
  border-radius: .1em;
  padding: .2em .4em; 
  display: inline-block;
  color: white;
  transition: all 0.2s ease-in-out;
  background-image: linear-gradient(45deg, #0001, #0000);
  line-height: 1.5;
}

.button-border:hover{
  cursor: pointer;
}

@media screen and (max-width: 720px) {
  .button-border{ cursor: default; }
}
  
.button-border:hover{  box-shadow: inset 0 0 0px .2em #FFF4; }

.button-border:active{ transform: scale(0.9); }


/*---------- .button-circle ----------*/


.button-circle{
  position: relative;
  font-size: .75em;
  padding: 0.5em;
  width: 1.125em;
  height: 1.125em;
  border-radius: 50%!important;
  background: #2196f3;
  border: none;
  color: #fff;
  transition: .3s;
  border-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  z-index: 2; 
}
.button-circle:hover{
  cursor: pointer; 
}
.button-circle:active{
  transform: scale(0.9);
}

.button-circle.active{
  background-color: #14b376;
}
.button-circle.active:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: .1em solid #14b37688;
  border-radius: 50%;
  animation: breathing 1s infinite;
}
@keyframes breathing {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    opacity: .5;
  }
  100% {
    transform: scale(1);
  }
}


/*---------- .button-ui ----------*/

.button-ui{
  position: fixed;
  padding: 0.25em;
  z-index: 2; 
  width: 50px;
  height: 50px;
  background: transparent;
  color: var(--color);
  border: none;
  font-size: 1.5em;
  transition: .3s; 
  border-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
}
.button-ui{
  cursor: pointer; 
}


img{
  max-width: min(100%, 80vw);
  max-height: 40vh;
  border-radius: .5em;
}