@font-face {
  font-family: gothic;
  src: url("font/Blacklettersh.ttf");
}

@font-face {
  font-family: chomsky;
  src: url("font/Chomsky.otf")
}

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

body{
  background-color: #111;
  color: rgba(239, 11, 11, 0.974);
  text-align: center;
}

.titulo {
  font-family: gothic;
  font-size: 3rem;
  padding: 1rem;
}

.copete {
  font-family: gothic;
  font-size: 1.5rem;
  padding: 0 1rem;
  padding-bottom: 0.5rem; 
}

.contenido {
  padding: 1.5rem 1rem;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 0.7rem;
}

.video {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
}

.playlist {
  margin-bottom: 0.7rem;
}

.firma{
  font-family: chomsky;
  font-size: 1.2rem
}

.emojis {
  font-size: 1.5rem;
}

.playlist{
  display: none;
}

@media (min-width: 600px) {
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  title {
    display: none;
  }
  .titulo {
    font-size: 4rem;
  }
  .copete {
    font-size: 2rem;
    max-width: 45vw;
  }
  .contenido {
    width: 60%;
    padding: 1.5rem 2rem;
  }
  .video {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .emojis {
    font-size: 2rem;
  }
  .firma{
    font-size: 1.5rem;
  }
}
@media (min-width: 1000px) {
  .contenido {
    width: 35vw;
    padding: 1.5rem 2rem;
  }
  img {
    max-width: 40vw;
  }
  .video {
    max-width: 40vw;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}