@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

html,body
{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #181818;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Fredericka the Great', cursive;
  perspective: 800px;
}

/*BLOC PRINCIPAL*/
#container
{
  position: relative;
  width: 40%;
  height: 40%;
  transition: 0.6s;
  transform-style: preserve-3d;
  border: 1px solid white;
  background-color: rgba( 42, 42, 46, 0.8);
  color: white;
  z-index: 2;
  transition: 0.4s;
}

/******* FACE AVANT *******/
#gameContainer
{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  user-select: none;
}

#score
{
  text-align: center;
  width: 100%;
  flex: 0.1;
  font-size: 3vw;
  color: white;
  border-bottom: 1px solid white;
}

#operation
{
  display: inherit;
  flex-direction: inherit;
  justify-content: inherit;
  align-items: inherit;
  font-size: 6vw;
  flex: 0.7;
  color: white;
}

input[type="text"]
{
  width: 80%;
  border: none;
  outline: none;
  font-size: 3vw;;
  text-align: center;
  background-color: transparent;
  color: white;
  flex: 0.2;
  font-family: 'Fredericka the Great', cursive;
}

.face
{
  position: absolute;
  width: 100%;
  height: 100%;
}

/******* FACE ARRIERE*******/
#options
{
  display: grid;
  grid-template-rows: repeat(2,50%);
  padding: 10px;
  background-color: rgb(42, 42, 46);
  transform: rotateX(180deg);
  backface-visibility: hidden;
}

#gridContainer
{
  display: inline-grid;
  grid-template-columns: repeat(5,20%);
  grid-template-rows: repeat(2,50%);
  row-gap: 10px;
}

h2
{
  justify-self: center;
}

label
{
  display: inherit;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 1px solid white;
}

label img
{
  user-select: none;
}

.inputOptions
{
  display: none;
}

#rangeContainer
{
  display: grid;
  justify-content: center;
  flex-direction: column;
  grid-column: 1 / 6;
  align-items: center;
  justify-items: center;
}

#parameters
{
  position: absolute;
  cursor: pointer;
  top: 8%;
  left: 96%;
  z-index: 3;
}

#parameters:hover
{
  animation: linear 1.5s infinite rotate;
}

@keyframes rotate
{
  from
  {
    transform: rotate(0deg);
  }
  to
  {
    transform: rotate(360deg);
  }
}