@font-face {
  font-family: Poppins_Black;
  src: url('../../nav/fonts/Poppins/Poppins-Black.woff') format('woff'), url('../../nav/fonts/Poppins/Poppins-Black.woff') format('embedded-opentype');
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  //font-size: 2em;
}

.loader p {
  color: darkgreen;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 1%;
  height: fit-content;
}

#btnRules,
#btnSettings,
#btnNew {
  display: block
}

#settings {
  height: 90vh;
  overflow: auto;
}

.navDrawer #settings h3 {
  text-align: center;
  font-size: clamp(0.5rem, 50px, 1rem);
  margin: 0;
}

#settings #niveauJeu {
  /* display: flex;
  justify-content: center;
  gap: 10px; */
  margin-bottom: 10px;
}

#settings figure {
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px;
  border: solid transparent 10px;
  display: flex;
  align-items: center;
}

#settings #niveauJeu figure>img {
  max-width: 10vw;
  padding-right: 1vw;
}

#settings #niveauJeu figcaption {
  font-size: clamp(0.5rem, 50px, 1rem);

}

#settings #niveauJeu figcaption img {
  width: min(40px, 3vw);
  vertical-align: middle;
}

#settings figure:hover {
  background: rgba(255, 255, 255, 0.5);
}

#settings input[type="radio"]:checked+label figure {
  border: solid red 10px;
  border-radius: 5px;
  box-sizing: border-box;
  color: white;
  background: rgba(255, 255, 255, 0.5);
}

input {
  display: none;
  cursor: pointer;
}

#rules {
  margin-bottom: 100px
}


#rules li {
  margin-bottom: 20px;
}

#rules p span {
  font-family: icons;
  font-size: large;
}

#rules ol img,
#rules h4 img {
  max-width: 150px;
  max-height: 150px;
  vertical-align: middle;
  margin: 5px;
  border-radius: 10px
}

#rules ol img.pt {
  max-width: 80px;
  max-height: 80px;
}

.content {
  position: absolute;
  top: 0;
}

#paper {
  background: white;
  width: 80vw;
  height: 10vh;
  max-height: 80px;
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
  position: absolute;
  bottom: clamp(10vh, 13vh, 70px);
  //z-index:1
}

@media (orientation: portrait) {

  #paper {
    background: white;
    width: 98vw;

  }
}

#myCode li:hover {
  //outline: 3px solid #009432;
  background: #176a03;
}

#myCode {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  padding: 0;
  text-align: center;
  position: absolute;
  // z-index: 10;
  bottom: 0;
  font-size: 1.5em;
}

#myCode.disabled {
  pointer-events: none;
}

#myCode li {
  user-select: none;
  font-family: "Poppins_Black";
  flex-basis: 5%;
  cursor: move;
  list-style-type: none;
  padding: 5px 6px;
  margin: 2px;
  background-color: #47a528;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  color: white;

}

#myCode li.green {
  background-color: #176a03;
}

#myCode li.selected {
  // border: solid #176a03 1px;
  background: #176a03;
}

#myCode li.red {
  color: white;
  background-color: red;
}

#myCode li.blue-background-class {
  background: lightBlue
}


#myCode li button {
  margin: 0;
  cursor: pointer;
  background-color: rgb(191, 184, 194);
  width: 20px;
  height: 20px;
  //width: clamp(1vw,20px,5vw);
  border-radius: 50%;
  border: none;
  color: white;
  font-family: Poppins;
}

#myCode li button:hover {
  background-color: rgb(98, 139, 130);
  color: red;
}

button#check {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background-color: rgb(191, 184, 194);
  width: min(8vw, 50px);
  height: min(8vw, 50px);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: white;
  font-family: Poppins;
  font-size: clamp(1rem, 2vw, 5.5rem);
  transition: transform 0.5s ease
}

button#check:hover {
  background-color: rgb(98, 139, 130);
  transform: scale(1.2);
  transform-origin: center;
}

#level {
  position: absolute;
  top: 0;
  right: 8vw;
  width: min(100px, 8vw);
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

#commandes {
  position: absolute;
  top: 80px;
  right: 1vw;
  text-align: center;
}

#commandes button {
  font-family: Poppins_black;
  //font-size: 2em;
  font-size: clamp(0.8rem, 5vw, 2rem);
  cursor: pointer;
  transition: transform 0.5s ease;
  margin: 1px;
  background-color: #47a528;
  /* Green */
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

#commandes button:hover {
  transform: scale(1.2);
  transform-origin: center;
}

#loading-screen {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //background-color: #000000;
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 1;
  transition: 1s opacity;
}

#loading-screen.fade-out {
  opacity: 0;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 20%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #9370DB;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #BA55D3;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #FF00FF;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.copyright {
  display: none
}