html{
  scroll-behavior:smooth;
}
body{
  margin:0;
  padding:0;
  background-color: black;
  background-image:url(http://papers.co/wallpaper/papers.co-vb23-wallpaper-bang-goo-dark-pattern-41-iphone-wallpaper.jpg);
 background-size:contain;
 background-position:center center;
 
}

p{
  font-family: 'Roboto Slab', serif;
  font-size:1.5vw;
  text-align:justify;
  color:white;
  margin-right:2em;
  margin-left:2em;
  
  }
canvas {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #111;
  z-index:-1;
  height:100vw
 
}
nav ul {
    background-color:#584D4B;
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0.5vw 10vw;
    justify-content: space-around;  
  }
nav ul li a {
  text-decoration: none;
  color:#1E1614;
  font-family: 'Lobster', cursive;
  font-size:1.5vw;
 
}
nav ul li a:hover {
  text-decoration: none;
  color:#AD3B23;
  font-size:2vw;
  background-color:#E08066;
  background-size:3vw;
}
nav ul li a:active {
  text-decoration: none;
  color:white;
}

.yearbook{
  font-family: 'Kdam Thmor Pro', sans-serif;
  font-size:6vw;
  text-align:center;
  color:white;
  animation-name: move;
  animation-duration: 3s;
  }
.titles{
  font-family: 'Anton', sans-serif;
  font-size:3vw;
  text-align:justify;
  padding:1vw 0.5px;
  padding-top:2vw;
  color:white;
  margin-top:5em;
  margin-left:0.75em
 
}

.sticky__list {
  box-shadow: 2vw 4vw 4vw rgba(0, 0, 0, 0.17);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;
}
.fotoredonda{
  width:22vw;
  height:22vw;
  animationduration:5s;
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
  margin-right:38vw;
  margin-left:38vw;
  
}
.fixedgalleries{
    
    margin: 3em auto;
    width:90%;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
}

.item{
    margin: .75em;

}


.item__img{
    width:30vw; 
    display: block;
    block-align:center;
    transition: transform .7s; 
    cursor: pointer;
  
}
.item__img:hover{
    transform: scale(1.2);
    transition: transform .5s; 
}
#escalarimagen{
  height:19.75vw;
}



#fotoadaptable{
  padding-top:2.5vw;
}
#fotoadaptable2{
  padding-top:vw;
}

}

@keyframes move{
  0%{right:0%;
  }
  25%{right:25%;}
  50%{right:50%;}
  75%{right:75%;}
  100%{right:100%;}
 

}

  
@media (max-width:800px){
  .Anuario{
  
  font-size:6vw;
  
  }
.titles{
  
  font-size:5vw;
  padding-top:4.5vw;
  
 
}
  .item__img:hover{
    transform: scale(2.0);

}

p{
  
  font-size:3vw;
  
  }
canvas {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #111;
  z-index:-1;
  width:100vw;
  height:55vh;
}
  nav ul li a {
  text-decoration: none;
  color:#1E1614;
  font-family: 'Lobster', cursive;
  font-size:3.5vw;
  }
  .fotoredonda{
  width:55vw;
  height:55vw;
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
  margin-right:30vw;
  margin-left:30vw;
  
}
  
}