html, body { height: 100% }

* {
  box-sizing: border-box;
  overflow: hidden;
}

.main iframe {
  border: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  flex: 100%;
}

.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
}

.main iframe {
  width: 100%;
  height: 100%;
}

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

textarea {
  border: 4px solid #888;
  font-size: large;
  padding: 5px;
  outline: none;
  width: 100%;
  resize: vertical;
}

textarea:focus {
  border: 4px solid #00bbff;
  outline: none;
}

input[type=submit] {
  outline: none;
  padding: 10px;
  cursor: pointer;
  min-width: 100px;

  margin: 8px;
  background-color: #ffffff;
  border: 4px solid #00bbff;
}

input[type=submit]:hover {
  transform: translate(-4px, -4px);
  box-shadow:
    1px 1px 0px #00bbff,
    2px 2px 0px #00bbff,
    3px 3px 0px #00bbff,
    4px 4px 0px #00bbff;
}

input[type=submit]:active {
  border: 4px solid #000000;
  box-shadow: none;
  transform: none;
}