html {
 background: #888;
 }

 body {
 height: 100%;
 background-image: url(logo.svg);
 background-position: center;
 background-size: 100px 100px;
 -o-background-size: 10% 10%;
 -webkit-background-size: 100px 100px;
 animation-name: example;

 animation-duration: 40s;
 animation-iteration-count: infinite;
 font: 12px 'Lucida Grande', Arial, sans-serif;
 }
@keyframes example {
 0% {background-color:#de5307; background-size: 100px 100px;}
 25% {background-color:#fff;rotate(-90deg);}
 50% {background-color:#fff; background-size: 1000px 700px;rotate(0deg);}
 75% {background-color:#fff;rotate(90deg);}
 100% {background-color:#de5307; background-size: 100px 100px;rotate(0deg);}
}

 #credit {
 text-align: center;
 color: #565656;
 text-transform: lowercase;
 cursor: default;
 }

 #credit a {
 color: #565656;
 text-decoration: none;
 }

 #credit a:hover {
 color: #5f5f5f;
 }

 #container {
 width: 550px;
 margin: 50px auto;
 position: relative;
opacity: 90%
 }

 #container .input_wrapper {
 position: absolute;
 width: 100px;
 height: 50px;
 }
 
 #container #surface {
 background: #e9eaee;
 border: 2px solid #ffffff;
 padding: 44px 40px 20px 40px;
 width: 460px;
 margin: 0 auto;
 text-align: center;
 box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
 -moz-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
 -webkit-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
 }

 #container #surface textarea {
 background: #fafafc;
 border: 1px solid #a3a3a3;
 resize: none;
 width: 430px;
 height: 240px;
 outline: none;
 font: normal 15px Monaco, 'Courier New', monospace;
 line-height: 20px;
 padding: 9px 10px;
 color: #2f2f2f;
 overflow: hidden;
 }

 #container #surface #options {
 margin: 10px 0 0 0;
 }

h1 { color:#ffffff;
 font-family:Arial;
 background: #888;    opacity: 95%;
 font-size: clamp(1rem, -0.875rem + 8.333333vw, 3.5rem);
 font-weight:bold;
 text-decoration:none;
 text-shadow:0px 0px 8px #000;
 padding-top: 10px;
 animation: myAnim 5s ease 0s 1 normal forwards;
  }
 
 
 @keyframes myAnim {
	0% {
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
	}
}

  .groen {
 box-shadow:inset 0px 1px 0px 0px #a4e271;
 background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
 background-color:#89c403;
 border-radius:6px;
 border:1px solid #74b807;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:Arial;
 font-size: clamp(1rem, -0.875rem + 8.333333vw, 3.5rem);
 font-weight:bold;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:0px 1px 0px #528009;
}
.groen:hover {
 background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
 background-color:#77a809;
}
.groen:active {
 position:relative;
 top:1px;
}
groen:after { content:'ja'; }

.rood {
 box-shadow:inset 0px 1px 0px 0px #f5978e;
 background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
 background-color:#f24537;
 border-radius:6px;
 border:1px solid #d02718;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:Arial;
 font-size: clamp(1rem, -0.875rem + 8.333333vw, 3.5rem);
 font-weight:bold;
 padding:6px 24px;
 text-decoration:none;
 text-shadow:0px 1px 0px #810e05;
}
.rood:hover {
 background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
 background-color:#c62d1f;
}
.rood:active {
 position:relative;
 top:1px;
}

.wit {
 box-shadow:inset 0px 1px 0px 0px #ffffff;
 background-color:#ffffff;
 border-radius:6px;
 border:1px solid #dcdcdc;
 display:inline-block;
 cursor:pointer;
 color:#666666;
 font-family:Arial;
 font-size:15px;
 font-weight:bold;
 padding:26px 69px;
 text-decoration:none;
 text-shadow:0px 1px 0px #ffffff;
}
.wit:hover {
 background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
 background-color:#f6f6f6;
}
.wit:active {
 position:relative;
 top:1px;
}