@import 'https://fonts.googleapis.com/css?family=Gochi+Hand';

* { margin:0; padding:0;}
body {
	color: #000;
	font-family: 'Gochi Hand', cursive;
	font-size:100%;
	background: #9ad6ff;
}
h1 {
	margin-bottom: 30px;
	font-size: 28pt;
	text-align: center;
	text-transform: uppercase;
}
#wrapper {
	position:relative;
	width:100%;
	max-width: 500px;
	height: calc(100vh - 60px);
	margin: 30px auto;
	padding: 0;
}

/* -- DUCK FACE -- */
#face {
	display:block;
	position:relative;
	margin:0 auto;
	width:300px;
	height:350px;
	background: url('img/face.png') no-repeat;
	background-size:100% auto;
	z-index:1;
}
#eyes {
	display:block;
	position:absolute;
	top:160px;
	left:70px;
	margin:0 auto;
	width:50%;
	height:20%;
	background:url('img/eyes.png') no-repeat;
	background-size:100% auto;
	z-index:2;
}
#beak {
	display:block;
	position:absolute;
	top:210px;
	left:25%;
	margin: 0 auto;
	width:50%;
	height:32%;
	background: url('img/beak.png') no-repeat;
	background-size: 100% auto;
	z-index: 3;
}

/* -- speech bubble -- */
p#speech {
  position: relative;
  width: 100%;
  height: 40px;
  font-size:30px;
  text-align: center;
  padding-top:10px;
  background: #feeb43;
  border: 0;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  margin-bottom: 40px;
}
p#speech:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 108px;
  top: 50px;
  border: 15px solid;
  border-color: #feeb43 transparent transparent #feeb43;
}

/*-- question form -- */
#questionForm { text-align: center; }
#questionForm input {
	margin: 0 0 30px 0;
	padding: 5px 10px 0;
	width: calc(100% - 20px);
	height: 50px;
	color: #266590;
	font-family: 'Gochi Hand', cursive;
	font-size: 24px;
	background: #76bff1;
	border: 0;
	border-radius: 10px;
	outline: none;
}
#submit {
	color:#fff;
	font-family: 'Gochi Hand', cursive;
	font-size:24px;
	background: #266590;
	border-radius: 10px;
	border:0;
	display:inline-block;
	padding:5px 10px;
	cursor:pointer;
}
#submit:hover {
	color:#266590;
	background:#fff;
}

/* --  webkit "hack" to style placeholder text -- */ 
::-webkit-input-placeholder { color: #438ec1; text-align: center;  }
:-moz-placeholder { color: #438ec1; text-align: center;  }
::-moz-placeholder { color: #438ec1; text-align: center;  }
:-ms-input-placeholder { color: #438ec1; text-align: center;  }