body {
   background-image: url('https://www.xtrafondos.com/wallpapers/resoluciones/19/noche-cielo-estrellas-y-cometa_2560x1440_3036.jpg');
   background-attachment: fixed;
   background-position: center center;
   background-size: cover; 
   margin: 0;
   overflow: hidden; /* Hide scrollbars */
  scroll-behavior: smooth;

}

#sec1{
  height: 100vh;
  box-shadow: 5px 5px 10px black;
}

h1 {
  color: white;
  text-align: center;
  font-size: 60px;
    background-color: #00091a;
   opacity: 0.9;
font-family: 'Russo One', sans-serif;
  box-shadow: 7px 15px 15px black;
  border: 2px solid white; 
}

h2 {
 box-shadow: 3px 3px 4px BLACK;
   text-align: center;
   font-size: 3vw;
 font-family: 'Playball', cursive;
  background-color: #00091a;
  border: groove grey;
}

#contenido_futuro{
 box-shadow: 3px 3px 4px BLACK;
   text-align: center;
   font-size: 4vw;
 font-family: 'Playball', cursive;
  background-color: #00091a;
  border: groove grey;
}

p {
  font-size: 16px;
   text-align: center;
font-family: 'Arima', cursive;
  background-color: #142a52;
  border: 1px dotted;
}

h3{
  background-color: #193167;
 opacity: 0.85;
 font-size: 23px;
 text-align: left;
font-family: 'Arima', cursive;
  border: inset white
 
}

h4{
  background-color: #193167;
 opacity: 0.85;
 font-size: 23px;
 text-align: left;
font-family: 'Arima', cursive;
  border: inset white
}

.nashe {
  width: 25vw;
  margin-left: 4vw;
 margin-top: 5vw;
}


a{
color: white;
text-decoration: none;
}  

.boton{
  font-size: 2.5vw;
  width: 25vw;
  margin-left: 37vw;
  margin-bottom: 20px;
  border-style: outset;
  border-radius: 30px;
  opacity:0.7;
  transition: 0.5s;
  box-shadow: 9px 9px 10px black;

}


.boton:hover{
font-size: 2.4vw;
opacity: 1.0;


/*  transition: 0.5s;*/
}

#VOLVER{
background-color: black;
color: black;
text-align: center;

}

#FUTURO{
background-color: #0f1e3e;
color: black;
text-align: center;
}
    


#sec2 {

color: white;
text-align: center;
font-size: 2vw;
box-shadow: 5px 5px 10px black;
height: 100vh;
top: 100vh;
  }

#medico{
  width: 30%;
  position: absolute; 
 top: 237vh;
 left: 50vw ;
}

#casco{
   width: 15%;
  position: absolute; 
 top: 237vh;
 left: 56vw ;

}

#guante{
   width: 15%;
  position: absolute; 
 top: 276vh;
 left: 53vw ;
}

#guante2 {
    width: 12%;
  position: absolute; 
 top: 286vh;
 left: 67vw ;
}

.boxeo {
 opacity: 0;
}

.boxeo:hover{
  opacity: 1.0;
}

#flecha{
 width: 12%;
  position: absolute; 
 top: 246vh;
 left: 40vw ;
}


#PERFIL{
background-color: #142852;
color: black;
text-align: center;
}
#sec3 {
 color: white;
 text-align: center;
 font-size: 2vw;
 box-shadow: 5px 5px 10px black;
 height: 100vh;
 top: 200vh;
    }

ol{
 Text-align: center;
 list-style-type: upper-roman;
 background-color: #193167;
 opacity: 0.85;
 font-size: 12px;
 
}

ul{
 background-color: #193167;
 Text-align: center;
 list-style-type: circle;
 opacity: 0.85;
 font-size: 12px;
}
    

#PASOPORELILLIA {
 color: white;
 background-color: #193167;
 text-align: center;
}
  #sec4 {
 color: white;
 text-align: center;
 font-size: 2vw;
 box-shadow: 5px 5px 10px black;
 height: 100vh;
 top:300vh;
}


  
 #RANDOM{
 background-color: #1e3b7b;
 color: black;
 text-align: center;
}   
  #sec5 {
 color: white;
 text-align: center;
 font-size: 2vw;
 box-shadow: 5px 5px 10px black;
 height: 100vh;
 top:400vh;
 background-color:#010101;
}

.ajustes {
   margin:0;
  display:grid;
  place-items:center;
   height:90vh;
}
.gallery{
  position:relative;
  width:13vw;
  height:9vw;
  transform-style:preserve-3d;
  animation:rotate 74s linear infinite;
}

@keyframes rotate{
  from{
    transform:perspective(50vw) rotateY(0deg);
  }
  
  to{
    transform:perspective(50vw) rotateY(360deg);
  }
}

.gallery span{
  position:absolute;
  width:100%;
  height:100%;
  transform-origin:center;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * 45deg)) translateZ(25vw);
}

.gallery span img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}

#GALERIA {
  background-color: #234590;
  color: black;
  text-align: center;

}

#sec6 {
color: white;
text-align: center;
font-size: 2vw;
box-shadow: 5px 5px 10px black;
height: 100vh;
top: 500vh;
margin: 0;
padding: 0;
background-image: linear-gradient(#0047b3, #002266);
background-attachment: fixed;
background-position: center center;
background-size: cover; 
}

.galeria img {
     border-radius: 15px;
  
}

.material-placeholder {
  position: relative; 
     width: 73%;
     height: auto;
     padding: 2px;
     margin: auto;
  margin: 0;
  border-radius: 15px;
}




#img1{ 
 height:40%;
 width: 21%;
 position: absolute; 
 top: 25vh;
 left: 9.7vw ;
 border-radius: 80%;
 border: groove white;
 box-shadow: 9px 9px 10px black;
}

#img2{
 height:40%;
 width: 22%;
 position: absolute; 
 top: 25vh;
 left: 65.5vw ;
 border-radius: 80%;
 border: groove white;
 box-shadow: 9px 9px 10px black;
}


.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 2.5vh 11.5vw;
  padding-botom: 2.5vh;
  
}

.column div {
  vertical-align: middle;
  text-align: center;
}

/* Responsive layout - makes a two column-layout instead of four columns */
/*@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}


div#Mastu {
  width: 30vw;
  height: 45vh;
  background-size: cover;
  background-image: url("https://i.imgur.com/ZtkGYK6_d.jpg?maxwidth=520&shape=thumb&fidelity=high.jpg");
  margin-top: 5vh;
/*  margin-left: 24vw;
  margin-bottom: 5vh;*/
}

div#infoMastu {
  position:absolute;
  overflow:hidden;
  width: 30vw;
  height: 45vh;
  background-color: rgba(31, 31, 31, 0.9);
  opacity:0;
  transition: opacity 0.3s;
}

div#Mastu:hover div#infoMastu {
  opacity:1;
}

#headlineMastu {
  font-size: 100%;
  margin-left: -20vw;
  margin-top: 3vh;
  transition: margin-left 0.9s;
}

div#Mastu:hover p#headlineMastu {
  text-align:center;
  margin-left: 4vw
}

#descripcionMastu {
  font-size: 70%;
  text-align: justify;
 margin-top: 60vh;
  transition: margin-top 0.6s;
}

div#Mastu:hover p#descripcionMastu {
  margin-top: 5vh;
}

div#Abru {
  margin-top: -60vh;
  margin-left: 54vh;
  width: 30vw;
  height: 60vh;
  background-image: url("https://i.imgur.com/1fmW0D5_d.jpg?maxwidth=520&shape=thumb&fidelity=high.jpg");
  background-size: cover; 
  /*margin-bottom: 5vh;*/
}
  

div#infoAbru {
   position:absolute;
  overflow:hidden;
  width: 30vw;
  height: 60vh;
  background-color: rgba(31, 31, 31, 0.9);
  opacity:0;
  transition: opacity 0.3s;
}

div#Abru:hover div#infoAbru {
  opacity:1;
}

p#headlineAbru {
  font-size: 100%;
  margin-left: -20vw;
  margin-top: 3vh;
  transition: margin-left 0.9s;
}

div#Abru:hover p#headlineAbru {
  text-align:center;
  margin-left: 4vw
}

p#descripcionAbru {
 font-size: 70%;
  text-align: justify;
  margin-top: 60vh;
  transition: margin-top 0.6s;
}

div#Abru:hover p#descripcionAbru {
   margin-top: 5vh;
}




#botonarriba{
 position: fixed;
 top:85%;
 left:90%;
 width: 8%;
 opacity: 0.5;
 transition-duration: 0.4s;
}

#botonarriba:hover {
  opacity: 1;
 
}