style.css

html, 
body {
	background: #11998e;
	background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
	background: linear-gradient(to right, #38ef7d, #11998e);
	font-family: 'Cabin', sans-serif;
}

.wrapper {
	box-shadow: 0 0 2em rgba(0, 0, 0, .5);
	border-radius: 10px;
	padding: 5em;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1,
.lead {
	color: #fff;  
	font-family: 'Lobster', cursive;
	font-size: 3.5rem;
	text-align: center;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.play {
  font-size: 1.25rem;
  text-align: center;
}


input {
  background-color: #e8eeef;
  border: none;
  border-radius: 10px;
  box-shadow: .1em .1em .5em rgba(0, 0, 0, .5) inset;
  color: #505b63;
  font-size: .8em;
  height: auto;
  margin: 0 0 1em;
  outline: none;
  padding: .85em;
  width: 30%;
}

.buttons {
	margin-top: 1em;
	margin-bottom: 2em;
	text-align: center;
}

button{
  background-color: rgba(23, 105, 58, .5);
  border: none;
  border-radius: 5px;
  box-shadow: 0 .4em #d6dcdc;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1em; 
  padding: 1em 2em;
  outline: none;
  text-align: center;
  text-shadow: .2em .2em .3em rgba(0, 0, 0, .2);
  transition: background-color .5s;
}

button:hover{ background-color: rgba(23, 105, 58, .7); }

button:active {
  background-color: rgba(23, 105, 58, 1);
  box-shadow: 0 .2em #d6dcdc;
  transform: translateY(.25em);
}

.winner { color: rgba(23, 105, 58, 1); }

@media (max-width:320px) { html { font-size: .85em; } }