body{
  background-color: rgb(255, 255, 255);
  font-family: Georgia;
  align-items: center;
}



img {
    max-height: 600px;
    min-width: 300px;
    max-width: 100px;
    vertical-align: bottom;
    justify-content: space-around;
    align-content: space-around;
    padding: 15px;
    border-radius: 10px;
    
  }

  a {
    /* this is needed to remove the small 
    underline that's added to links, which 
    we don't want on our images */
    text-decoration:none;
  }
  
  .sidebar{
    padding:0px; 
    background-color: rgb(0, 0, 0);
    color: white;
    font-size: 17px;
    font-family: Georgia;
    position:fixed;
    top:0;
    right:-250px;
    height:90vh;
    width: 170px;
    text-align:center;
    align-items: center;
    align-content: center;
    transition: right .5s;

}


.active{
right:0;
}




.button{
  background-color: black;
color:white;
border:none;
border-radius: none;
box-shadow: 3px 3px rgb(197, 197, 197);
padding:5px 15px;
margin-left:665px;
height:30px;
width:50px;
display: flex;
justify-content: center;
}




.image1 {
  transition: 1s;
}
.image1:hover {
  cursor:pointer;
  background-color: #000000;
  color: #000000;
  border: 1px solid #000000;
  transition: 0.5s;
}
.image1:active {
  cursor: pointer;}

  .image2{
    cursor:wait;
  }

  .image3 {
    filter: blur(8px);
    transition: 1s;
  }
  .image3:hover {
    filter: blur(1px);
    transition: 0.45s;
    cursor: zoom-in;
  }
  .image3:active {
    filter: blur(0);
    transition: 0.2s;
  }


.image4{
  cursor:help;
}


.image5 { 
          
position: absolute;
left:190px;
top:530px;

  } 
   
.image5 { 

  opacity:0; 
  -webkit-transition: opacity 5s; 
  transition: opacity 5s; 
  cursor:grab;
  } 
   
  .image5:hover ~ .image5, .image5:hover { 
  opacity:1; 
  } 




.image6 { 
          
  position:absolute; 
  } 
   
.image6 { 

  opacity:0; 
  -webkit-transition: opacity 10s; 
  transition: opacity 3s; 
  cursor:crosshair;
  } 
   
  .image6:hover ~ .image6, .image6:hover { 
  opacity:1; 
  }