body
{
  margin: 0;
  padding: 0;
}
body .main
{
   margin-left: 5%;
   margin-right: 5%;
  
}
body
{
    color: white;
    background-color:#323232;
    padding-top: 10px;
    
}
body p
{
    font-size: 25px;
    font-family: monospace;  
    text-align: justify; 
}
header 
{
 
   background-color: aliceblue;
}
.tittle img
{

    width: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 50%;
    border-color: red;
    
      
}
.tittle
{
    padding-top: 2px;
}

/*Tittle Animaion start*/

@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');

.tittle p {
  font-family: 'Anton', sans-serif;
  perspective: 1000px; 
  text-align: center;
  font-weight: bold;
   
}

.tittle p span {
   
  cursor: pointer;
  display: inline-block;
  font-size: 50px;
  padding-top: 5px;
  color: black;
}

.tittle p span:nth-child(1).active {
  animation: balance 1.5s ease-out;
  transform-origin: bottom left;
}

@keyframes balance {
  0%, 100% {
    transform: rotate(0deg);
  }
  
  30%, 60% {
    transform: rotate(-45deg);
  }
}

.tittle p span:nth-child(2).active {
  animation: shrinkjump 1s ease-in-out;
  transform-origin: bottom center;
}

@keyframes shrinkjump {
  10%, 35% {
    transform: scale(2, .2) translate(0, 0);
  }
  
  45%, 50% {
    transform: scale(1) translate(0, -150px);
  }
  
  80% {
    transform: scale(1) translate(0, 0);
  }
}

.tittle p span:nth-child(3).active 
{
  animation: falling 2s ease-out;
  transform-origin: bottom center;
}

@keyframes falling {
  12% {
    transform: rotateX(240deg);
  }
  
  24% {
    transform: rotateX(150deg);
  }
  
  36% {
    transform: rotateX(200deg);
  }
  
  48% {
    transform: rotateX(175deg);
  }
  
  60%, 85% {
    transform: rotateX(180deg);
  }
  
  100% {
    transform: rotateX(0deg);
  }
     
}

.tittle p span:nth-child(4).active {
  animation: rotate 1s ease-out;
}

@keyframes rotate {
  20%, 80% {
    transform: rotateY(180deg);
  }
  
  100% {
    transform: rotateY(360deg);
  }
}

.tittle p span:nth-child(5).active {
  animation: toplong 1.5s linear;
}

@keyframes toplong {
  10%, 40% {
    transform: translateY(-48vh) scaleY(1);
  }
  
  90% {
    transform: translateY(-48vh) scaleY(4);
  }
}
.tittle p span:nth-child(6).active {
  animation: toplong 1.5s linear;
}

@keyframes toplong {
  10%, 40% {
    transform: translateY(-48vh) scaleY(1);
  }
  
  90% {
    transform: translateY(-48vh) scaleY(4);
  }
}
.tittle p span:nth-child(7).active {
  animation: balance 1.5s ease-out;
  transform-origin: bottom left;
}

@keyframes balance {
  0%, 100% {
    transform: rotate(0deg);
  }
  
  30%, 60% {
    transform: rotate(-45deg);
  }
}
.tittle p span:nth-child(8).active {
  animation: balance 1.5s ease-out;
  transform-origin: bottom left;
}

@keyframes balance {
  0%, 100% {
    transform: rotate(0deg);
  }
  
  30%, 60% {
    transform: rotate(-45deg);
  }
}

hr
{
    width:40%;
    text-align:left;
    margin-left:0;  
}
.container2 hr
{
 width:15%;
 text-align:left;
 margin-left:0 ;
 
}
.container4 hr
{
     width:25%;
 text-align:left;
 margin-left:0 ;

}
.container5 hr
{
     width:15%;
 text-align:left;
 margin-left:0 ;

}
.container6 hr
{
     width:28%;
 text-align:left;
 margin-left:0 ;
 
}
.container7 hr
{
     width:25%;
 text-align:left;
 margin-left:0 ;
 
}
.container8 hr
{
     width:40%;
 text-align:left;
 margin-left:0 ;
 
}
.container9 hr
{
     width:15%;
 text-align:left;
 margin-left:0 ;
 
}
#menu li a 
{
    
    color: skyblue;
    font-size: 25px;

}
#menu2 li a 
{
    display: block;
    text-decoration: none;
    color: white;
 font-size: 25px;
}
.imagegif img
{
    width: 350px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-color: red;
    
}
.fotterbtn Button:hover
{
    color: #000;
    cursor: pointer;
    background-color: gray;
}
.fotterbtn Button:hover
{
    background-color: #fff;
    opacity: 0.9;
   
}

footer 
{
   margin-top: 20px;
  
}
.footerbtm
{
   
  text-align: center;
  padding: 5px;
  background-color: aliceblue;
  color: black;
}
.footerbtm a:hover
{
    color: dimgrey;
    cursor: pointer;
    text-decoration: none;
}
.footerbtm  a
{
    color: black;
    font-family: cursive;
    font-size: 25px;
}
.icon i
{
       font-size: 40px;
}
.icon i:hover
{
    background-color: #fff;
    opacity: 0.5;
  
    
}

.icon i
{
    color: black;
    
}