1024-bytes.css

html{background:#ccc;background-image:linear-gradient(0,transparent 50%,#ddd 50%);background-size:50px}body{background:#333;border:10px solid #fff;box-shadow:0 0 5px #111;color:#fff;font:15px/22px sans-serif;margin:60px auto;padding:20px;position:relative;text-shadow:1px 1px 5px #111;width:640px}a{color:#ddd}h1{font-size:150px}h1,h2{text-align:center;text-transform:uppercase}nav{position:absolute;top:5px;z-index:1}nav h2{background:#272727;border-radius:15px;padding:5px 10px;font-size:12px}nav h2:after{content:' \25be'}nav ul{background:#333;border:1px solid #555;box-shadow:0 0 2px #111;display:none;list-style:none;padding:20px;width:250px}nav:hover ul{display:block}li>a+a{font-size:9px}[role]>*{border:1px solid #444;box-shadow:inset 0 0 9px #222;height:60px;margin:40px 0;overflow:hidden;padding:20px;transition:all .5s .5s linear}article>:hover{height:330px}[role]>header:hover{height:140px}section+section:hover{height:450px}[role]>*>h2~*{transition:all .5s .5s linear;opacity:0}[role]>:hover>h2~*{opacity:1}