* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  border-style: none;
}

:root {
  --rojo: #8E2D30;
  --rosa: #CB3D57;
  --cafe: #2B1B1B;
  --amarillo: #e9da06ce;
  --degradeRojo: linear-gradient(90deg, rgba(66, 33, 11, 1) #42210b%, rgba(142, 45, 48, 1) 15%, rgba(203, 61, 87, 1) 44%, rgba(239, 134, 157, 1) 50%, rgba(203, 61, 87, 1) 55%, rgba(142, 45, 48, 1) 85%, rgba(66, 33, 11, 1) 100%);
  --fondo: linear-gradient(#000000 60%, var(--rojo));
  --family: monospace;
  --family2: "Fira Code", monospace;
}


body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-family: var(--family2);
  background: var(--fondo);

}

header {
  max-width: 100%;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}


.cintilla {
  position: fixed;
  top: 1rem;
  padding: 1vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}

.cintilla img {
  width: 8rem;

}

.telefonos {
  display: flex;
  width: 90vw;
  justify-content: space-between;
  align-items: center;
}

.telefonos {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 1vw rgb(156, 11, 11), 0 0 1vw rgb(151, 29, 29), 0 0 2vw rgb(204, 60, 60), 0 0 3vw #8E2D30, 0 0 70vw #8E2D30, 0 0 8vw #8E2D30, 0 0 10vw #8E2D30;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.telefonos:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #e9da06ce, 0 0 70px #e9da06ce, 0 0 80px #e9da06ce, 0 0 100px #e9da06ce;
}

.telefonos div {
  font-size: 2rem;
}

nav {
  width: 100vw;
  position: fixed;
  margin-top: 10rem;
}

.barraNav {
  margin: 1rem 3rem;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
}

.menu {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemsMenu {
  display: flex;
  gap: 1.5rem;
}

.itemsMenu li a {
  font-size: 1.3rem;
  color: white;
  font-weight: 700;
}

.itemsMenu li a:hover {
  color: var(--amarillo);
}

.redes {
  width: 10vw;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  grid-area: 1rem;
  gap: 1rem;
}

.redes img {
  max-height: 100%;
  width: 2em;
  height: auto;
  filter: drop-shadow(0.3rem 0.4rem 1rem var(--rosa));
}

.redes img:hover {
  filter: drop-shadow(0.3rem 0.4rem 1rem var(--amarillo));
}

.menu2 {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 12rem;
  z-index: 9999;
  backdrop-filter:blur(12px);
  display: none;
  box-shadow: -9px 0 9px black;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 1rem;
  padding-top: 1rem;
}

.menu2 a {
  padding-right: 0.7rem;
  color: white;
  font-weight: 700;
  text-shadow: 0.2rem 0.2rem 0.2rem black;
}

.menu-btn {
  background: none;
}

.menu-btn img {
  width: 3rem;
}


main {
  flex: 1;
  display: flex;
}

footer {
  min-width: 100vw;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.copy {
  width: 80vw;
  display: flex;
  flex-wrap: wrap;
  color: white;
  justify-content: center;
  text-align: center;
  font-family: var(--family);
  font-weight: 600;
  font-size: 0.7em;
}

canvas {
  position: absolute;
  z-index: -100;
  width: 100vw;
  height: 100vh;
  margin: auto;
}




@media (min-width: 0px) and (max-width: 425px) {
  .telefonos {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .telefonos div {
    font-size: 1.8em;
  }

  .nav {
    margin-top: 10rem;
  }

  .barraNav {
    margin: 0 2rem;
    display: flex;
    justify-content: space-between;
  }

  .menu {
    display: none;
  }


  .cintilla img {
    display: none;
  }

}

@media (min-width: 426px) and (max-width: 599px) {
  .menu {
    display: none;
  }

  .telefonos div {
    font-size: 1em;
  }

  nav {
    margin-top: 4rem;
  }

  .cintilla img {
    width: 6rem;
  }

}

@media (min-width: 600px) and (max-width: 750px) {
  .menu2 {
    display: none;
  }

  .menu-btn {
    display: none;
  }

  .itemsMenu li a {
    font-size: 1rem;
    color: white;
  }

  nav {
    margin-top: 5rem;
  }

  .telefonos div {
    font-size: 1.5rem;
  }

  .redes img {
    width: 2em;
  }
}


@media (min-width:751px) and (max-width: 1079px) {
  .menu2 {
    display: none;
  }

  .menu-btn {
    display: none;
  }

  nav {
    margin-top: 5.5rem;
  }

}

@media (min-width: 1080px) and (max-width: 3000px) {
  .menu2 {
    display: none;
  }

  .menu-btn {
    display: none;
  }

  .telefonos div {
    font-size: 2rem;
  }

  nav {
    margin-top: 5rem;
  }

  .cintilla img {
    width: 6rem;
  }

}