@import url(http://fonts.lug.ustc.edu.cn/css?family=Lato:100,300);

@import url(http://fonts.lug.ustc.edu.cn/css?family=Nosifer|Codystar:300,400|Poiret+One|Limelight|Shojumaru|Titan+One|UnifrakturMaguntia|Press+Start+2P|Creepster|Playball|Griffy|Lobster|Bevan|Racing+Sans+One|Fontdiner+Swanky);



 body{
   padding:0; 
   margin:0}

.block{
  width: 100%; 
  height: 100vh; min-height:300px;
  position:relative; 
  overflow:hidden}

.block + .block{
  margin-top:2px}

h1{  width: 100%;
  position:absolute; 
  margin:0;   
  top: 50%;  
  text-align:center; 
  font-size:5rem; 
  transform: translateY(-50%);   
  font-weight:normal 
}


.underconstruction{text-align:center; position:absolute; top: 0; left: 0; right: 0; margin:auto;  background: #fff; z-index: 9;}



/* ================================================
    style-1
   ================================================ */

.style-1{
  background:linear-gradient(90deg, #24C6DC 10%, #514A9D 90%);
  }

.style-1 h1{
  color:#FFEDBC;
  font-family: lato;  
  font-weight:100;
}




/* ================================================
    style-2
   ================================================ */


.style-2{
background-image: repeating-linear-gradient(90deg, transparent, transparent 35px,rgba(255,255,255,.2) 35px, rgba(255,255,255,.2) 70px), 
  linear-gradient(90deg, #ED4264 10%, #FFEDBC 90%);}

.style-2 h1{
color:#FFEDBC; 
  font-family: Lobster; 
 text-shadow:-2px 0 0 #ED4264, -1px -1px 0 #ED4264, 0 -2px 0 #ED4264, 1px -1px 0 #ED4264, 2px 0 0 #ED4264, 1px 1px 0 #ED4264, 0 2px 0 #ED4264, -12px 16px 0 #725699; }



/* ================================================
    style-3
   ================================================ */

.style-3{
background:  #333;
background-image: linear-gradient(90deg, #F09819 10%, #EDDE5D 90%);}

.style-3 h1{
color:#FFEDBC; font-family:Bevan; text-shadow: -3px 2px 0 #000;}



/* ================================================
    style-4
   ================================================ */

.style-4{background:  linear-gradient(90deg, #e43a15 10%, #e65245 90%);}

.style-4:after{
  content:'';
  position:absolute;
  width: 100px;
  max-width:20%; 
  top: 0;
  bottom: 0; 
  margin:auto; 
  background: #fff; 
  left: 10%; 
  background: repeating-linear-gradient(90deg, #FFEDBC , #FFEDBC 60%, transparent 60%, transparent 75%); 
  opacity:.5
}

.style-4 h1{
  z-index: 2;
  color:#FFEDBC; 
  font-family: 'Racing Sans One';}


/* ================================================
    style-5
   ================================================ */

.style-5{

background:
linear-gradient(324deg, #08b 4%,   transparent 4%) -15px 70px,
linear-gradient( 36deg, #08b 4%,   transparent 4%) -15px 70px,
linear-gradient( 72deg, #fff 8.5%, transparent 8.5%) -15px 70px,
linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -15px 70px,
linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -15px 54px,
linear-gradient(144deg, #fff 7.5%, transparent 7.5%) -15px 54px,

linear-gradient(324deg, #08b 4%,   transparent 4%) 25px 27px,
linear-gradient( 36deg, #08b 4%,   transparent 4%) 25px 27px,
linear-gradient( 72deg, #fff 8.5%, transparent 8.5%) 25px 27px,
linear-gradient(288deg, #fff 8.5%, transparent 8.5%) 25px 27px,
linear-gradient(216deg, #fff 7.5%, transparent 7.5%) 25px 11px,
linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 25px 11px;
background-color: #08b;
background-size: 80px 80px;

}
.style-5:after{
  position:absolute; 
  content:''; 
  display:block; 
  width: 100%; 
  height:100%; 
  background:  linear-gradient(90deg, #047 10%, #09c 90%);
  opacity: .95;
} 

.style-5 h1{
color:#fff; 
  font-family:'Cinzel Decorative', serif;
  z-index: 2;
}




/* ================================================
    style-6
   ================================================ */

.style-6{
background: linear-gradient(90deg, #809900 10%, #119933 90%); 
}

.style-6 h1{
color:#7dd642; 
  font-family: 'Bevan'; 
  text-shadow: 0 -5px 15px #80bb00, 0 10px 15px #060;

}

/* ================================================
    style-7          Halloween
   ================================================ */
@import url(http://fonts.lug.ustc.edu.cn/css?family=Fontdiner+Swanky);
.style-7{
background: linear-gradient(90deg, #FF5100 10%, #F08800 90%);
}

.style-7 h1{
color:#000; 
  font-family: 'Fontdiner Swanky';
   font-weight:normal;
  z-index: 2;

}








/* ================================================
    style-8
   ================================================ */

.style-8{
background: linear-gradient(90deg, #cc1100 10%, #FF5100 90%);
}

.style-8 h1{
  color:yellow;
  text-shadow: 0 -3px 5px yellow, 0 -6px 10px yellow; 
  font-family: 'lato';
  font-weight:100;
  z-index: 2;
}



/* ================================================
    style-9
   ================================================ */

.style-9{
background: linear-gradient(90deg, #eee , #ccc );}

.style-9 h1{
  color:#333;font-family: 'lato';
  font-weight:100;
  z-index: 2;}

.style-9 span{
  color:#333; 
  display: block; }




/* ================================================
    style-11
   ================================================ */

.style-11{
background-image: radial-gradient(ellipse farthest-corner at center top, #677c93 0%, #111921 100%);
}

.style-11 h1{
  color:#d7dde2;
font-family: lato; 
 font-weight:100;
  text-shadow: 0 2px 0 #000,
    0 0 20px #fff

}


/* ================================================
    style-12
   ================================================ */

.style-12{

background:
	linear-gradient(#b2e9a7,rgba(255, 255, 255, .2)),
	linear-gradient(90deg,#44bbff,rgba(255, 255, 255, .4)),
	linear-gradient(-90deg,#ff8457,rgba(255, 255, 255, .2));
}



.style-12 h1{
  color:#fff;
font-family: 'Playball'; 
  z-index: 2;

}






/* ================================================
    style-12
   ================================================ */

.style-13{


background-image: linear-gradient(160deg, #503e90 10%, #70659b 60%, transparent 60%), repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(255,255,255,.8) 35px, rgba(255,255,255,.8) 70px), linear-gradient(90deg, #000 10%, #000 90%);}




.style-13 h1{
  color:#000;
font-family: 'Griffy'; 
  z-index: 2;
  text-shadow: -2px 3px 0 #57f257


}


/* ================================================
    style-14
   ================================================ */

.style-14{
background:linear-gradient(90deg, #c21500 10%, #ffc500 90%);}



.style-14 h1{
  color:#000;
font-family: 'Shojumaru'; 
 
}

/* ================================================
    style-15
   ================================================ */

.style-15{
  background:   linear-gradient(90deg, #809900 10%, #119933 90%); 
}


.style-15 h1{
  color:#000;
font-family: 'Creepster';  
}


/* ================================================
    style-16
   ================================================ */

.style-16{
  background: linear-gradient(90deg, #000000 10%, #53346D 90%); 
}


.style-16 h1{
  color:#000;
font-family: 'UnifrakturMaguntia';
text-shadow: -1px 1px 0 rgba(255, 255, 255, .2)  
}






@media all and (max-width: 480px) { html{font-size:12px } }