/* GENERAL STYLES */
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}
body { margin-top: 30px; background: #202A44; color: white; font-family: sans-serif; }


h1 {
  margin-left: 30px;
}

textarea {
  float: left;
  width: 40%;
  margin: 0 2.5%;
  height: 280px;
  padding: 20px;
  overflow-y: auto;
  border: none;
  border-radius: 5px;
  box-shadow: inset 0 0 20px #fff;
  background: #888;
  color: #fff;
  font-size: 20px;
  resize: none;
}
textarea:first-of-type {
  font-size: 10px;
  background: #0088ff;
}
textarea:last-of-type {
  font-size: 10px;
  background: #cccc00;
  color: #000;
}

div {
  float: left;
  width: 10%;
}

button {
  display: block;
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 5px;
  box-shadow: inset 0 0 20px #000;
  font-size: 18px;
  background: #0088ff;
  background: -moz-linear-gradient(left,  #0088ff 0%, #cccc00 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0088ff), color-stop(100%,#cccc00));
  background: -webkit-linear-gradient(left,  #0088ff 0%,#ff8800 100%);
  background: -o-linear-gradient(left,  #0088ff 0%,#cccc00 100%);
  background: -ms-linear-gradient(left,  #0088ff 0%,#cccc00 100%);
  background: linear-gradient(to right,  #0088ff 0%,#cccc00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088ff', endColorstr='#cccc00',GradientType=1 );
  color: #fff;
  cursor: pointer;
}
button:nth-child(-n+3):after {
  content: '\25B6';
  speak: none;
  margin-left: 10px;
  font-size: 26px;
  vertical-align: baseline;
}
button:nth-child(n+5):before {
  content: '\25C1';
  speak: none;
  margin-right: 10px;
  font-size: 26px;
  vertical-align: baseline;
}
button:hover {
  background: #444;
}
  
p {
  position: absolute;
  top: 300px;
  left: 2.5%;
  width: 95%;
  border-radius: 10px;
}


.article {
  padding-top:20%;
}
h4 {
padding: 0 15%;
}