@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: "CustomFont";
    src: url('monoton-regular-webfont.woff2') format('woff2'),url('monoton-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.box{
	width: 100px;
	height: 100px;
	opecity:0.3;
	transition:1s;
	margin-left:200px;
}

.red{
	background-color: #F00;
	position:relative;
	display:block;
	margin-left:200px;
	margin-bottom: 50px;
	padding: 20px ;
	
}

.gradient{
	/*background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);*/
	background-image: linear-gradient(to top, #bfe9ff, #b6d2ff, #d2b2f7, #f58dc9, #ff6e7f);
	/*border: solid 10px #006;*/
	position:relative;
	display:block;
	margin-left:200px;
	margin-bottom: 50px;
	padding: 20px ;
}

.salmon{
	background-color: #FA8072;
	position:relative;
	display:block;
	margin-left:200px;
	margin-bottom: 50px;
	padding: 20px ;
}

.split{
	background-color: #20ffb7;
	position:relative;
	display:block;
	margin-left:200px;
	margin-bottom: 50px;
	padding: 20px ;
}
	
/*#wrapper{
	width:500px;
	margin:0 auto;
	background-color:  #999;
} 
*/
#rotate{
	width:500px;
	margin:0 auto;
	background-color:  #999;
	-webkit-animation-name: x-spin;
        -webkit-animation-duration: 4s;
        -webkit-animation-iteration-count: 3;
        -webkit-animation-timing-function: linear;
} 



.box:hover {
	

    transition-duration: 1s;
    transition-timing-function: linear;
	transform-style: preserve-3d;
	-webkit-transform: scale(1);
	 transform: scale(2);
	-webkit-transition: .3s ease-in-out;
	 transition: .3s ease-in-out;
     display: block;
     position: relative;
     cursor: pointer;
     background: url(https://source.unsplash.com/random/1000x1000) no-repeat 100% 50%;
     background-size: 200%;
     border-radius: 100%;
    
      
}
      
@-webkit-keyframes x-spin {
        0%    { -webkit-transform: rotateX(0deg); }
        50%   { -webkit-transform: rotateX(180deg); }
        100%  { -webkit-transform: rotateX(360deg); }
      }

      @-webkit-keyframes y-spin {
        0%    { -webkit-transform: rotateY(0deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(360deg); }
      }

      @-webkit-keyframes back-y-spin {
        0%    { -webkit-transform: rotateY(360deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(0deg); }
      }
@keyframes example {
	0%  {background-color: red;}
	25%  {background-color: yello;}
	50%  {background-color: blue;}
	100%  {background-color: green;}
}


h2{
font-family: 'CustomFont', Arial, sans-serif;
font-weight:normal;
font-style:normal;
}