@import url('https://fonts.googleapis.com/css?family=Be Vietnam Pro&display=swap');
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');

@font-face {
  font-family: "Bmono";
  src: url("https://raw.githubusercontent.com/NNBnh/bmono/main/dist/bmono/woff2/bmono-regular.woff2") format("woff2");
}

@keyframes gradient {
    0% { background-position:   0% 50%; }
   50% { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

@keyframes    appear { from { width: 0; opacity: 0%; margin: 0; } }
@keyframes disappear { to   { width: 0; opacity: 0%; margin: 0; } }

@keyframes appearScale {
   0% { opacity: 0% }
  25% { opacity: 0%; transform: scale(50%); }
}

@keyframes arrow {
    0% { transform: translateX( 0.2em); }
   50% { transform: translateX(-0.2em); }
  100% { transform: translateX( 0.2em); }
}

* {
  font-family: Be Vietnam Pro;
}

a {
  color: black;
  transition: 250ms;
}

a:hover {
  color: #5890F8;
}

.shadow {
  box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
}

.hide {
  opacity: 0;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
}

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(-45deg, #FFC387, #FA7883, #6BB8FF, #8AF5FF);
  background-size: 300% 300%;
  animation: gradient 30s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


#score {
  position: absolute;
  top: 0;
  font-family: Bmono;
  font-weight: bold;
  font-size: 2em;
  color: black;
}

#pieces {
  display: flex;
  flex-direction: row;
}

.piece {
  margin: 0.5em;
  position: relative;
}

.piece input {
  height: 4em;
  width: clamp(6em, 40vw, 8em);
  border: none;
  border-radius: 0.2em;
  outline: none;
  text-align: center;
  font-size: 1.5em;
  text-transform: capitalize;
  color: black;
  background: white;
  animation: appear 250ms;
}

.piece input::placeholder {
  opacity: 1;
  font-family: Bmono;
  font-weight: bold;
  font-size: 0.6em;
  color: #5555C2;
}

.piece input:hover::placeholder {
  color: #5890F8;
}

.piece input:focus::placeholder {
  color: transparent;
}

.piece input[disabledd] {
  color: #585858;
  background: #E0E0E0;  
}

.counter {
  position: absolute;
  bottom: 0;
  right: 0.25em;
  margin: 0;
  font-family: Bmono;
  font-weight: bold;
  color: #585858;
}

#warningBar {
  height: 1.25em;
  padding: 0.25em;
  border-radius: 0.2em;
  background: black;
  color: white;
  transition: 250ms;
  animation: appearScale 500ms;
}

#warningBar i {
  margin: 0 0.25em;
}


#buttons {
  position: absolute;
  bottom: 1em;
  display: flex;
  align-items: flex-end;
}

#buttons button {
  margin: 0.25em;
  padding: 0.5em;
  border: none;
  border-radius: 50%;
  outline: none;
  font-size: 1.5em;
  background: black;
  color: white;
  transition: 250ms;
  display: flex;
}

#buttons button:hover {
  font-size: 1.75em;
  background: white;
  color: black;
}


.board {
  padding: 1em;
  border-radius: 0.2em;
  background: white;
  animation: appearScale 500ms;
}

.board pre {
  height: 50vh;
  width: clamp(15em, 75vw, 20em);
  margin: 0;
  padding: 1em;
  font-family: Bmono;
  color: black;
  animation: appear 250ms;
  overflow-x: hidden;
  overflow-y: scroll;
}

#endGameNav {
  margin-top: 1em;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

#endGameNav input {
  flex-grow: 1;
  height: 2em;
  border: 0;
  border-bottom: 0.2em solid black;
  outline: none;
}

#endGameNav button {
  border: none;
  background: none;
}

#submitButton {
  font-size: 1.5em;
}

#submitButton:hover {
  animation: arrow 1s ease infinite;
}

iframe {
  height: 70vh;
  width: 80vw;
  min-width: 20em;
  border-radius: 0.2em;
  border: none;
  background: white;
  animation: appearScale 500ms;
}


#info {
  width: clamp(19em, 50vw, 30em);
}

#info h1 {
  margin: 0.5em;
  text-align: center;
}

#info p {
  margin: 0.5em;
  text-align: justify;
}

#info ul li {
  font-weight: bold;
}

#info p#love {
  margin-top: 1.5em;
  text-align: center;
}

#heart {
  color: #DE5D6E;
}