@import url('https://fonts.googleapis.com/css?family=Bad+Script');
 *
  {
      box-sizing: border-box;
	 
  }
  Html , body
  {
      border: 0;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
	  
	  
  }
  ul
  {
      text-align: center;
      list-style: inside;
  }
  #nav
  {
      width: 100%;
	  position:relative;
	  
  }
 .seen{
	 text-shadow: 2px 2px 4px #000000;
 }
body
{
background-image: url(logo.png);
}
nav 
{
overflow: auto;
}
.ex1
{
    text-align:center;
}

a:hover
{
	text-decoration: none;
}
#backgroundimage {
background: url(logo.png);
width: 100vw;
height: 100vh; 
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
}
pre
{
    white-space:pre-wrap;
    text-align:justify;
    word-wrap:break-word;
}
.pagination
{
    
	position:relative;
	justify-content:center;
	left:0;
	bottom:0;
}

.icon-bar {
position:fixed;
top:50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 15px;
}

.icon-bar a:hover {
  background-color: #000;
}
*/
.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

.content {
  margin-left: 75px;
  font-size: 30px;
  ;
}
.comment
{
	background:purple;
	color:white;
}
a.up:hover
{
	background:peachpuff;
}
a.pop:hover
{
	background-color:white;
}
.blinking{
    animation:blinkingText 1.2s infinite;
	
}
.blinking2{
    animation:blinkingText2 2s infinite;
	
}
.blinking3{
    animation:blinkingText3 3s infinite;
	
}
.blinking4{
    animation:blinkingText3 1.2s infinite;
	
}
.zip
{
	display:flex;
	
}
.examp{
 animation:example 10s infinite;	
}
.word
{
	position:relative;
		animation:wordText 5s  infinite;
		animation-direction:alternate;
}
.word2
{
	position:static;
		animation:wordText2 5s  infinite;
		animation-direction:alternate;
		
}
.word3
{
	position:absolute;
		animation:wordText2 8s  infinite;
		animation-direction:alternate;
		color:Chartreuse;
}
.salm
{
	color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: red;
  font-family:'Bad Script',cursive;
   

}
.salm2
{
	color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: DarkTurquoise;
 
   

}
.balm
{
	color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: magenta;
  font-family:'Bad Script',cursive;


}
.chota{
  color: black;
  -webkit-text-fill-color: magenta; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: yellow;
 
}
#bima
{
	background-image: url(light.png);
	background-color:black;
min-height:500px;
background-size:cover;
background-position:center;
background-repeat: no-repeat;
position: absolute;
	
}
.bima
{
	background-image: url(back.png);
	background-color:black;
width: 100vw;
height: 100vh; 
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
	
}
.chan
{
	position:relative;
		animation:chant 5s  infinite;
		animation-direction:alternate;
}
.sherk
{
	position:absolute;
		animation:shrink 8s  2;
		animation-direction:alternate;
}
.sherk2
{
	position:relative;
		animation:shrink2 12s  2;
		animation-direction:alternate;
}
.back
{
background-color: #f9ea8f;
background-image: linear-gradient(315deg, #f9ea8f 0%, #aff1da 74%);


}
.front
{
	background-color: #90d5ec;
background-image: linear-gradient(315deg, #90d5ec 0%, #fc575e 74%);

}
.side
{
	background-color: #d5fefd;
background-image: linear-gradient(315deg, #d5fefd 0%, #fffcff 74%);
}
#borderimg2 {
  border: 20px solid transparent;
  padding: 5px;
  border-image: url(border.png) 20% round;
}
@keyframes example {
  from{color:yellow;}
  to{color:lime;}
}
@keyframes chant
{
	0% {color:yellow;}
	40%{color:blue;}
	80%{color:purple;}
	100%{color:lime;}
}
@keyframes wordText{
	0%{right:0%;top:auto;}
	45%{right:20%;top:auto;}
	65%{right:30%;top:auto;}
	80%{right:50%;top:auto;}
	100%{right:100%;top:auto;}
	
}
@keyframes wordText2{
	0%{left:5%;top:auto;}
	45%{left:20%;top:auto;}
	65%{left:50%;top:auto;}
	80%{left:70%;top:auto;}
	100%{left:100%;top:auto;}
	
}
@keyframes blinkingText{
    0%{     color: silver;    }
    49%{    color: transparent; }
    60%{    color: Skyblue; }
    99%{    color: Orchid;  }
    100%{   color: gold;    }
}
@keyframes blinkingText2{
    0%{     color: red;    }
    49%{    color: red; }
    60%{    color: red; }
    99%{    color: black;  }
    100%{   color: black;    }
}
@keyframes blinkingText3{
    0%{     color: black;    }
    49%{    color: black; }
    60%{    color: black; }
    99%{    color: red;  }
    100%{   color: red;    }
}
@keyframes blinkingText4{
    0%{     color: red;    }
    49%{    color: transparent; }
    60%{    color: transparent; }
    80%{    color: red;  }
    100%{   color: red;    }
}
@keyframes shrink{
    0%{    font-size: 2pt;    }
    49%{   font-size:4pt; }
    60%{    font-size:6pt; }
    99%{    font-size:8pt; }
    100%{  font-size:65pt;    }
}
@keyframes shrink2{
    0%{    font-size: 2pt; }
    40%{   font-size:4pt;transform:rotatex(360eg) ;}
    60%{    font-size:6pt; transform:rotatex(720deg) ;}
    90%{    font-size:20pt; }
    100%{  font-size:20pt;   }
}
.pop{
    animation:blinkingText 1.2s infinite;
	
}

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.glow {
  font-size: 25px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}