html{
    scroll-behavior: smooth;
  }
  
  * {
      box-sizing: border-box;
      font-family: 'Oswald', sans-serif;
    }
    
    body {
      font-size: 20px;
    }
    
    .container {
      position: relative;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .container img {vertical-align: middle;}
    
    .container .content {
      position: absolute;
      bottom: 0;
      background: rgb(0, 0, 0); /* Fallback color */
      background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
      color: #f1f1f1;
      width: 100%;
      padding: 5px;
    }
  
  
    a {
      text-decoration: none;
      display: inline-block;
      padding: 4px 8px;
    }
    
    a:hover {
      background-color: #ddd;
      color: black;
    }
    
    .previous {
      background-color: black;
      color: white;
      font-size: 17px;
    }
    
    .next {
      background-color: #04AA6D;
      color: white;
    }
    
    .round {
      border-radius: 50%;
    }
  
    .para{
        color: white;
        text-align: center;
    }
  
    
  
    body {
      font-family: "Lato", sans-serif;
    }
    
    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }
    
    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 17px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }
    
    .sidenav a:hover {
      color: #f1f1f1;
    }
    
    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
    
    #main {
      transition: margin-left .5s;
      padding: 16px;
    }
    
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }
  
    #myBtn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      font-size: 18px;
      border: none;
      outline: none;
      background-color: red;
      color: white;
      cursor: pointer;
      padding: 15px;
      border-radius: 4px;
    }
    
    #myBtn:hover {
      background-color: #555;
    }

    .para{
      color: rgb(0, 0, 0);
      text-align: center;
      padding: 10px;
      justify-content: center;
      background: lightslategray;
      color: lightyellow;
      margin: 10px;
      border-radius: 40px;
  }
  

  .Heading h2{
    align-content: center;
    text-align: center;
    justify-content: center;
    display: inline-block;
    padding: 20px 60px;
    background-color: dimgrey;
    color: #f1f1f1;
    border-radius: 25px;
    transition: 3s;
  }

  
.Heading{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes Heading {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(0.9);	
	}
	80% {
		transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(0.9);
	}
	80% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}
    

@media screen and (max-width: 550px){
  img.test{
    width: 48%;
  }
}

@media screen and (max-width: 550px){
  img.tester{
    width: 42%;
  }
}

@media screen and (max-width: 550px){
  img.testerr{
    width: 48%;
  }
}

@media screen and (max-width: 550px){
  img.four{
    width: 46%;
  }
}

@media screen and (max-width: 550px){
  img.fourr{
    width: 35%;
  }
}


@media screen and (max-width: 550px){
  img.five{
    width: 49%;
  }
}

@media screen and (max-width: 550px){
  img.fivee{
    width: 38%;
  }
}


@media screen and (max-width: 550px){
  img.six{
    width: 45%;
  }
}

@media screen and (max-width: 550px){
  img.sixx{
    width: 45%;
  }
}

.para{
	animation-name: expandOpen;
	-webkit-animation-name: expandOpen;	

	animation-duration: 1.2s;	
	-webkit-animation-duration: 1.2s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	visibility: visible !important;	
}

@keyframes expandOpen {
	0% {
		transform: scale(1.8);		
	}
	50% {
		transform: scale(0.95);
	}	
	80% {
		transform: scale(1.05);
	}
	90% {
		transform: scale(0.98);
	}	
	100% {
		transform: scale(1);
	}			
}

@-webkit-keyframes expandOpen {
	0% {
		-webkit-transform: scale(1.8);		
	}
	50% {
		-webkit-transform: scale(0.95);
	}	
	80% {
		-webkit-transform: scale(1.05);
	}
	90% {
		-webkit-transform: scale(0.98);
	}	
	100% {
		-webkit-transform: scale(1);
	}					
}


.container{
  animation-name: pullDown;
  -webkit-animation-name: pullDown;	
  
  animation-duration: 1.1s;	
  -webkit-animation-duration: 1.1s;
  
  animation-timing-function: ease-out;	
  -webkit-animation-timing-function: ease-out;	
  
  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%; 		
  }
  
  @keyframes pullDown {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(0.98);
  }				
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(1);
  }							
  }
  
  @-webkit-keyframes pullDown {
  0% {
    -webkit-transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
  }				
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }		
  }