/* IMPORTS */
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Afacad+Flux&display=swap");

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

/* VARIABLES */
:root {
  /* TYPOGRAPHY */
  --ff: "Afacad Flux", sans-serif;
  --ff-head: "Pacifico", cursive;
  
  /* COLORS */
  --color: white;
  --bgcolor: #282A36;
  --headcolor: #0B6477;
}

/* BASE STYLES */
body {
  font-family: var(--ff);
  font-size: 1rem;
  color: var(--color);
  background-color: var(--bgcolor);
  background-image: url("bg.jpg");
  background-size: cover;
  background-repeat: repeat;
}

.h1 {
  font-family: var(--ff-head);
  font-size: 4rem;
  font-weight: bolder;
  color: #BD93F9;
  -webkit-text-stroke: thin white;
}

.serif {
  font-family: serif;
}

.lead {
  width: 85%;
}

.button {
  width: 150px;
  height: 50px;
  border: 0;
  border-radius: 2rem;
  background-color: #50FA7B;
  color: black;
  transition: all ease 0.25s;
}

.button:active, .button:focus, .button:hover {
  color: white;
  background-color: darkgreen;
  transition: all ease 0.25s;
}

.feedback {
  width: 90%;
  height: auto;
  padding: 1.5rem;
  border: 0;
  border-radius: 3rem;
  background-color: #6272A4;
  margin: auto;
}

.main {
  background-color: #44475A;
  width: 90%;
}

.copy {
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 1rem;
}

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

.bg {
  background: var(--bgcolor);
  opacity: 0.80;
  height: 500px;
  width: 90%;
}

.red {
  color: #FF5555;
}

.font-pacifico {
  font-family: var(--ff-head);
  font-weight: bolder;
  font-size: 1.5rem;
}

.img {
  width: 50px;
  height: auto;
  border-radius: 1rem;
}