.logo{
}

@import url(//fonts.googleapis.com/earlyaccess/roundedmplus1c.css);


body{
	text-align: center;
 	font-color:#010101;
	 background-color: #000000;
	 /*width: 500px;*/
     font-size: 22px;
	 padding: 0;
	 margin: 0;
	 font-family: 'Rounded Mplus 1c', serif;
	 }
{
	width:100%;
 	height:300px;

}
.wrap{
	 }
/*.main{
      width:800px;
	  margin-left:auto;
	  margin-right:auto;
	 }	
.sub{
     width:300px;
	 margin-left:auto;
	 margin-right:auto;
	 }*/
/*.inner{
     font-size:45px;
	 color:#000000;
	 background-color:#cccccc;
     width:60px;
	 margin-left:500px;
	 margin-right:500px;
	 
     }*/


/*h1{
 font-size:22px;
 color: #000000;
 background-color:#cccccc;
 border-left:10px solid #3339cc;
 padding-left:2em;
 padding-bottom:10px;
 border:1px solid #333333;
 margin-bottom: 50px;
 }*/
 
 /*h2{
 font-size:34px;
 color:#ffffff
 border-left: 10px solid;
 margin-bottom: 50px;*/
 
/*p{
 color: #f03cff;
 background-color: #f0bbdb;
 border-left:10px solid #cccccc;
 padding-left:2em;
 padding:10px;
 }
em{
   font-size:40px
   }
span{
    color:#ffffff
	}
.blue{
      color: blue
 }
 
 .lead{
       font-weight: bold;
	   color:#0054bb;
	   }*/
.box1{
	width: 100%;
	height: 100vh;
	background-image: url(../image/yellow.jpg);
	background-size: cover;
	background-position:center center;
	line-height:100vh;
}
.menu{
}
.id{
	font-size: 33px;
	padding-left:10px;
	padding-top:40px;
}

img.yellow{max-width:100%;
	 	   width: 1000px;
	}

	.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}


/* add default color for animation start  */


/* toggle this class */

.color-bg-start {
  background-color: salmon;
}


/* toggle class bg-animate-color */

.bg-animate-color {
  animation: random-bg .5s linear infinite;
}


/* add animation to bg color  */

@keyframes random-bg {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

.fun-btn {
  /* change bg color to get different hues    */
  background-color: salmon;
  color: white;
  padding: 2em 3em;
  border: none;
  transition: all .3s ease;
  border-radius: 5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  outline: none;
  align-self: center;
  cursor: pointer;
  font-weight: bold;
}

.fun-btn:hover {
  animation: random-bg .5s linear infinite, grow 1300ms ease infinite;
}

.start-fun {
  background-color: #fff !important;
  /* change color of button text when fun is started   */
  color: salmon !important;
}

/* pulsating effect on button */
@keyframes grow {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}