@import url('https://fonts.googleapis.com/css2?family=Fascinate&family=Recursive:wght@300..1000&family=Space+Grotesk:wght@300..700&display=swap');

* {
  margin: 0;
  padding: black;
  background: #skyblue;
  color: #ADD8E6;
  font-family: Helvetica, Arial, sans-serif;

}

.xmas {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  padding: black;
  }

:root {
  --mostrando: blue;
  --esperando: lightblue;
  --flotando: grey;
}

a:hover{
  color: #c55;
  text-decoration: underline;
  transition: all ease 1s;
}

body{
  background: #000000;
  color: #000;
}

#bloque {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(calc(90% - 2rem), 500px);
    height:auto;
    padding: 1rem;
    margin: auto;
    background: ghostwhite;
    border-radius: .5rem;
    z-index: 9999;
}

p{
  padding:0.5rem 0;
}

nav{
  margin:1rem 0;  
}

nav a{
  line-height: 1;
  text-decoration: none;
  color:black;
  margin:0 1rem 0 0;
  padding:0.3rem 1rem;
  background:var(--esperando);
  border-radius: .6rem;
  transition:all ease .75s;
}

nav a:hover{
  color:white;
  background:var(--flotando);  
  transition:all ease .75s;
}

nav a.active{
  color:white;
  background:var(--mostrando);
}