Team:SVCE Chennai/CSS

body {

 font-family: monospace;
 font-size: 18px;
 background: #111;
 color: #666;
 margin: 0;

}

img {

 display: block;
 width: 100%;

}

input[type=checkbox] {

 display: none;

}

label {

 display: inline-block;
 margin-right: 1em;
 padding: 0.4em 0;
 cursor: pointer;

}

button {

 border: 10px solid #00FFAA;
 font-family: monospace;
 position: absolute;
 line-height: 60px;
 text-align: right;
 padding: 0 1.2em;
 background: #444;
 font-size: 24px;
 cursor: pointer;
 display: block;
 outline: none;
 height: 80px;
 width: 80%;
 top: 260px;
 margin: 0;
 left: 10%;

}

button:hover {

 background: #00FFAA;

}

input[type=checkbox] + label:before {

 display: inline-block;
 position: relative;
 background: #444;
 margin-right: 8px;
 content: "";
 height: 16px;
 width: 16px;
 top: 1px;

}

input[type=checkbox]:checked + label:before {

 background: #00FFAA;

}

.container {

 position: relative;
 max-width: 600px;
 margin: 0 auto;
 padding: 5%;

}

.scene {

 padding: 0;
 margin: 0;

}

.fill {

 position: absolute;
 bottom: 5%;
 right: 5%;
 left: 5%;
 top: 5%;

}

.expand-width {

 width: 100%;

}

.border {

 border: 2px dashed #00FFAA;

}

.aspect {

 opacity: 0.2;

}

.layer:nth-child(1) {

 opacity: 0.15;

} .layer:nth-child(1) button {

 -webkit-transform: rotate(150deg);

}

.layer:nth-child(2) {

 opacity: 0.30;

} .layer:nth-child(2) button {

 -webkit-transform: rotate(120deg);

}

.layer:nth-child(3) {

 opacity: 0.45;

} .layer:nth-child(3) button {

 -webkit-transform: rotate(90deg);

}

.layer:nth-child(4) {

 opacity: 0.60;

} .layer:nth-child(4) button {

 -webkit-transform: rotate(60deg);

}

.layer:nth-child(5) {

 opacity: 0.75;

} .layer:nth-child(5) button {

 -webkit-transform: rotate(30deg);

}

.layer:nth-child(6) {

 opacity: 0.90;

} .layer:nth-child(6) button { }