* {
  margin:0;
  padding:0;
}

#result {
text-align: left;
margin:0 auto;
width:400px;
}

.test {
  height: 600px;
  white-space: pre-line;
  margin-bottom: 50px;
  text-align: center;
  font-size: 24px;
  font-family: 'Courier New', Courier, monospace;
  line-height: 150%;
}



html {
  background-color: lightgray;
}

.h1 {
  background-color: lightskyblue;
  padding:30px;
}


.textarea {
text-align: center;
padding-top:50px;
}

#worddata {
  width:80%;
  height:300px;
  padding:20px;
  vertical-align: top;
  font-family:'Courier New', Courier, monospace;
  border-radius: 10px;
  border: 2px #333333 solid;
}

.button {
  text-align: center;
}

.execute {
  width:150px;
  display: inline-block;
  padding: 0.5em 1em;
  margin:0 50px 0 50px;
  text-decoration: none;
  background-color: #668ad8;/*ボタン色*/
  color: #FFF;
  border:1px #627295 solid;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
  outline: 0;
}

.execute:hover {
  background-color: #191970;
  border-bottom: solid 4px #333;
}

.execute:active {
  width:150px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
  outline: 0;
}

.execute.btncolor {
    background-color: #191970;
    border-bottom: solid 4px #333;
}



.reset {
  width:150px;
  display: inline-block;
  padding: 0.5em 1em;
  margin:0 50px 0 50px;
  text-decoration: none;
  background-color: #668ad8;/*ボタン色*/
  color: #FFF;
  border:1px #627295 solid;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
  outline: 0;
}

.reset:hover {
  background-color: #191970;
  border-bottom: solid 4px #333;
}

.reset:active {
  width:150px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
  outline: 0;
}

.space {
  font-size: 24px;
  width: 80%;
  text-align: left;
  margin: 0 auto;
  padding-top:50px;
}