* {margin: 0; padding: 0; outline: none; box-sizing: border-box;}
body {font: 40px/1.3 'Playfair Display', serif; background-color: #000; color: #fff;} 
a { color: inherit; text-decoration: none; display: table-cell; vertical-align: middle; text-align: center; transition: color 0.4s ease-out;}
p {width: 100%; height: 100%; display: table;}   
h1 {position: fixed; top: 25px; left: 25px; font-size: 50px; color: #fff; z-index: 9999; line-height: 1; }
div {position: absolute; width: 100%; height: 100%;}
#first {top: 0; left: 0; color: #fff;}
#second {top: 100%; left: 0;  background-color: #fff;   color: #000;} 
#third {top: 200%; left: 0;  background-color: #000; color: #fff;}          
#fourth {top: 300%; left: 0;  background-color: #fff;  color: #000;}          
#fifth {top: 400%; left: 0;  background-color: #000;  color: #fff;}          
#sixth {top: 500%; left: 0;  background-color: #fff; color: #000;}          

@media screen and (min-width: 680px) {    
body {font: 80px/1.3 'Playfair Display', serif;}
h1 {font-size: 70px;}    
}