html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
display: table;
}
button > h1 {
padding: 1em;
margin: 0;
}
a {
color: #00ff00;
}
a:hover {
color: #9acd32;
}
a:active {
color: #9acd32;
}
#textarea {
height: 30%;
}
#title {
font-size: 5vw;
}
#text {
font-size: 3vw;
}
#text > h1, h2 {
vertical-align: middle;
}
#yes {
background-color: #00ff00;
border-color: #00cd00 !important;
color: #006400;
}
#yes:hover {
background-color: #00ee00;
border-color: #00bc00 !important;
color: #005400
}
#no {
background-color: #ff3030;
border-color: #cd2626 !important;
color: #640000;
}
#no:hover {
background-color: #ee2c2c;
border-color: #b22222 !important;
color: #540000;
}
.content {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.buttons {
width: 50%;
margin: auto;
}
.button {
display: inline-block;
width: 15vw;
height: 20vh;
margin: 2vw;
transform-origin: 50% 10%;
animation-name: smallen;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
}
.button:hover {
animation-name: enlarge;
-moz-transform: scale(1.2, 1.2);
}
.button > .label {
border: solid 6px black;
width: 100%;
height: 100%;
display: table;
border-radius: 20%;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transform-origin: 50% 10%;
animation-name: rounden;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
}
.button:hover > .label {
border-radius: 15%;
animation-name: edgeup;
}
.button:hover > .label {
button-radius: 30%;
}
.button > .label > h1 {
margin: 0;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 5vw;
}
.bluescreen {
background-color: #0000ff;
font-family: monospace;
font-size: 2.5vh;
color: #ffffff;
}
.ghlink {
position: absolute;
bottom: 5%;
text-align: center;
}
@keyframes enlarge { from { -moz-transform: scale(1, 1);} to { -moz-transform: scale(1.2, 1.2);} }
@keyframes smallen { from { -moz-transform: scale(1.2, 1.2);} to { -moz-transform: scale(1.0, 1.0);} }
@keyframes rounden { from { border-radius: 15%; } to { border-radius: 20%; } }
@keyframes edgeup { from { border-radius: 20% } to { border-radius: 15%; } }