* {
  box-sizing: border-box;
  font-family: "Comic Sans", cursive;

}

body {
  height: 100vh;
  display: flex;
  flex-flow: column;
  background-image: url("../img/bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #779736;
}

/**** BOTONES ****/
a {
  width: 15rem;
  border-radius: 1.5rem;
  padding: 1.5rem;
  border: 0.0625rem solid #7bbbcf;;
  height: 4.1875rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  transition: transform ease 0.3s;
}
a:hover {
  transform: scale(1.05);
}
a:active {
  transform: scale(0.95);
}
.btn-primary {
  color: #7bbbcf;
  background: #121711;
}
.btn-secondary {
  color: #121711;
  background: #7bbbcf;
}

/**** LOGO ****/
header {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
}
header .logo,
header .audio {
  margin: 1rem;
  color: #121711;
  font-size: 3rem;
}

/**** INSTRUCCIONES ****/
.instructions {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .2rem;
  gap: 0.5rem;
  margin: auto;
}
.instructions p {
  color: #2bb717;
  font-weight: 500;
  font-size: 2rem;
  line-height: 150%;
  text-shadow: 0.0850rem 0 0 #f0ffde;
}
.instructions img {
  filter: invert(80%) sepia(95%) saturate(900%) hue-rotate(350deg) brightness(85%) contrast(99%);
}

/**** COPYRIGHT ****/
footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
}
.copyright-text {
  margin: auto;
  padding: .2rem;
  text-shadow: 0.0500rem 0 0 white;
}

/**** TABLET ****/
@media (min-width: 600px) {
}

/**** DESKTOP ****/

@media (min-width: 1200px) {
}