/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{
  color: blueviolet;
  text-decoration: none;
}

body {
  background-color: rgb(24, 20, 29);
  color: white;

  font-family: "Overpass", sans-serif;

  padding: 30px;
}

.logo {
  height: 50px;
}

.header {
  background-color: dodgerblue;

  width: 400px;
  height: auto;
  border-radius: 15px;
  padding: 8px;
  padding-bottom: 16px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.header h1 {
  color: white;
  font-size: larger;
  margin-left: 22px;
  margin-right: 22px;
}

.prompt {
  backdrop-filter: blur(2px) grayscale(100%);
  color: white;

  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.promptBody {
  background-color: rgb(16, 5, 27);

  width: 400px;
  height: auto;
  border-radius: 15px;
  padding: 30px;
  padding-top: 22px;
  padding-bottom: 22px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;

  font-size: large;
}

.promptBody p {
  margin-bottom: 6px;
}

.promptInput {
  font-family: inherit;
  font-size: medium;
  color: inherit;

  padding: 8px;
  padding-bottom: 6px;
  border-radius: 8px;
  width: 100%;

  background-image: linear-gradient(
    to top right,
    rgb(65, 65, 65),
    rgb(31, 31, 31)
  );
  /* border: rgb(31, 31, 31) solid 2px; */

  border: none;
  outline: none;
  box-shadow: 0px 0px 0px 2px rgb(31, 31, 31);
}

.promptInput::placeholder {
  color: rgb(105, 105, 105);
}

.promptInput:focus {
  /* border: dodgerblue solid 2px;
    outline: none; */

  border: none;
  outline: none;
  box-shadow: 0px 0px 0px 2px dodgerblue;

  animation: focusInput 200ms linear;
  /* Fare l'animazione con il border portava a comportamenti strani del flex
    che modificava la grandezza della roba intorno */
}

@keyframes focusInput {
  0% {
    /* border: rgb(31, 31, 31) solid 2px; */
    box-shadow: 0px 0px 0px 2px rgb(31, 31, 31);
  }
  50% {
    /* border: transparent solid 0.1px; */
    box-shadow: none;
  }
  100% {
    /* border: dodgerblue solid 2px; */
    box-shadow: 0px 0px 0px 2px dodgerblue;
  }
}

.promptButton {
  cursor: pointer;
  font-family: inherit;
  font-size: medium;
  border-radius: 8px;
  padding: 8px;
  padding-bottom: 6px;
  width: fit-content;

  color: inherit;
  background-color: blueviolet;

  /* border: rgb(31, 31, 31) solid 2px; */
  border: none;
  outline: none;
  box-shadow: 0px 0px 0px 2px rgb(31, 31, 31);
}

.promptButton:focus {
  /* border: dodgerblue solid 2px;
    outline: none; */

  border: none;
  outline: none;
  box-shadow: 0px 0px 0px 2px dodgerblue;

  animation: focusInput 100ms linear;
}

.promptButton:active {
  background-color: rgb(117, 37, 192);
}

/* body > .promptButton:focus{
    border: rgb(31, 31, 31) solid 2px;
    outline: none;
} */

#loading {
  border-radius: 15px;
  width: 400px;
  height: 80px;

  background-color: rgb(16, 5, 27);
  background: linear-gradient(
    45deg,
    rgb(4, 1, 7) 0% 20%,
    rgb(31, 10, 53),
    rgb(4, 1, 7) 80% 100%
  );
  background-size: 500% 500%;

  animation: loadingGradient 1.2s cubic-bezier(0.3, 0, 0.5, 1) infinite;
}

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

.logo {
  color: rgba(255, 255, 255, 1);
  font-size: 40px;
}

.logoContainer {
  width: 40px;
  height: 40px;
}

.a {
  animation: logoRotation 5s linear infinite;
  margin-top: 10px;
}

.b {
  animation: logoPulse 5s linear infinite;
}

.c {
  animation: logoPostRotation 5s linear infinite;
}

@keyframes logoPulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.1);
  }
  20% {
    transform: scale(1);
  }
}

@keyframes logoRotation {
  10% {
    transform: rotateY(0deg);
  }
  20% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes logoPostRotation {
  20% {
    transform: rotateY(0deg);
  }
  40% {
    transform: rotateY(360deg);
  }
  55% {
    transform: rotateY(0deg);
  }
  75% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.pyro {
  bottom: 35px;
  /* border: 1px solid red; */

  position: relative;
  width: 3px;
  height: 4px;
  border-radius: 40%;

  box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
  
  animation: 5s bang cubic-bezier(.39,.63,.62,.76) infinite, 5s gravity cubic-bezier(1,0,1,1) infinite;
}

@keyframes bang {  
  10% {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
  }
  25% {
    box-shadow: -32px -35px #ffffff, -20px -38.66667px #ffffff,
    34px -43px #ffffff, 22px -48.66667px #ffffff,
    27px -33px #ffffff, -38px -40px #ffffff,
    -32px -43px #ffffff, -12px -53.66667px #ffffff,
    0px -50.66667px #ffffff, 12px -53.66667px #ffffff,
    -42px -30.66667px #ffffff, 38px -26.66667px #ffffff,
    2px -43.66667px #ffffff, -18px -50.66667px #ffffff,
    35px -39.66667px #ffffff, -9px -43.66667px #ffffff,
    10px -44.66667px #ffffff;
  }
  100% {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white,
      0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
  }
}
@keyframes gravity {
  10%{
    transform: translateY(0px);
    opacity: 1;
  }
  18% {
    transform: translateY(18px);
    opacity: 0;
  }
  100%{
    transform: translateY(0px);
    opacity: 0;
  }
}