@charset 'utf-8';

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

:root {
  --blanco: #ffd1cc;
  --negro: #313131;
  --fondoDegradado: linear-gradient(60deg, #212121, #313131);
  --rosita: #DB7093;
}

body {
  color: var(--blanco);
  background-color: var(--negro);
  min-height: 100vh;
}

h1 {
  font: normal 9em/1.2em 'Gravitas One', sans-serif;
}

h2 {
  font: normal 3em/1em 'Jacquard 12', serif;
}

h3 {
  font: normal 2.2em/1.2em 'Gravitas One', serif;
}


p {
  font: normal 1.8em/1.4em 'Alegreya', serif;
}

pre {
  font: normal 1.8em/1.6em 'Alegreya', serif;
}

header {
  width: 100%;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--blanco);
  color: var(--negro);
  background-image: url(../imago/textura_oleo.webp);
  background-size: cover;
}

header hr {
  width: 80%;
  border: none;
  height: 2em;
  background-color: #FF1493;
  mix-blend-mode: hard-light; 
  opacity: 30%;
}

header h1 {
  margin: 2% 0%;
  padding: 0% 10%;
  color: #FF00FF;
  mix-blend-mode: color-dodge;
}

header h3 {
  margin: 1% 10%;
  padding: 1% 2%;

  color: #7FFF00;
  mix-blend-mode: exclusion;
}

main {
  width: 80%;
  margin: 0% 10%;
  background-color: var(--negro);
  color: var(--blanco);
}

main h2 {
  background-color: var(--blanco);
  color: var(--negro);
  margin: 2% 0%;
  padding: 2% 2.5%;
}

main p {
  width: 70%;
  margin: 1% 10%;
  padding: 1% 0%;
  text-align: justify;
}

.fecha {
  text-align: right;  
}

main pre {
  width: 70%;
  margin: 1% 10%;
  padding: 1% 0%;
}

header p {
  color: #313131;
}

@media only screen and (max-width: 620px) {

  h1 {
    font: normal 4.3em/1.2em 'Gravitas One', sans-serif;
  }

  h2 {
    font: normal 1.8em/1em 'Jacquard 12', serif;
  }

  h3 {
    font: normal 1em/1.5em 'Gravitas One', serif;
  }


  p {
    font: normal 1.3em/1.5em 'Alegreya', serif;
  }

  header {
    width: 100%;
  }

  header hr {
    border: 10px solid var(--negro);
    width: 80%;
  }

  header h1 {
    margin: 3% 0%;
    padding: 0% 10%;
  }

  header h3 {
    margin: 3% 10%;
    padding: 3% 2%;
  }

  main {
    width: 80%;
    margin: 0% 10%;
    background-color: var(--negro);
    color: var(--blanco);
  }

  main h2 {
    background-color: var(--blanco);
    color: var(--negro);
    margin: 3% 0%;
    padding: 2% 2.5%;

  }

  main p {
    width: 100%;
    margin: 0% 0%;
    padding: 3% 0%;
    text-align: justify;
  }


}