*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  background-color: black;
}

body::before {
    content: "";
    position:fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/fondo.jpg');
    background-size:cover;
    background-repeat: repeat-y;
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}
body {
  display:flex;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background-size: cover;
  background-color: black;
  overflow-x: clip;
  overflow-y: visible;
}

body > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 896px) and (min-width: 678px) {
  body{
    max-width: 100%;
  
    min-height: 100dvh;
  
    padding-top: 2rem;
  
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 678px) {
  html{
    min-height: 100%;
  }
  body::before {
    width: 100%; height: 100lvh;

    background-size:contain;
    background-repeat: repeat-y;
    
  }
  body{
    max-width: 100%;

    min-height: 100dvh;

    padding-top: 2rem;

    flex-direction: row;
    flex-wrap: wrap;
  }
}