.square {
  height: 50px;
  width: 50px;
  background-color: #34495e;

  text-align: center;
  font-family: "Sansation";
  font-size: 25px;
  color: #ecf0f1;
  border-radius: 4px;
}

h1 {
  text-align: center;
  color: #ecf0f1;
  font-family: "Sansation";
  font-size: 35px;
}

.square:hover {
  background-color: #95a5a6;
}

.square:active {
  background-color: #7f8c8d;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #465c73;
  color: #ecf0f1;
  text-align: center;
  font-family: "Sansation";
  height: 6%;
}

hr {
  align: center;
  width: 95%;
}

table {
  vertical-align: middle;
  margin: 0 auto;
}

.togg {
  background-color: #34495e;
  text-align: center;
  height: 59%;
  width: 15%;

  border-radius: 8px;
  color: #ecf0f1;
  font-family: "Sansation";

  position: absolute;
  top: 5%;
  font-size: 20px;
}

.togg2 {
  background-color: #34495e;
  text-align: center;

  border-radius: 8px;
  color: #ecf0f1;
  font-family: "Sansation";

  position: absolute;
  top: 5%;
  height: 59%;
  width: 15%;
  right: 1%;
}

.toggle button {
  background-color: black;
}

#iodata {
  height: 65%;
  width: 92%;
  border: none;
  border-radius: 6px;
  background-color: #2c3e50;
  margin: 8px;
  resize: none;
  color: #ecf0f1;
}

#layerParam {
}

#layerParam input {
  width: 70%;
  border-radius: 6px;
  border: none;
  text-align: center;
  font-size: 20px;
  font-family: "Sansation";
}

#title {
  padding-top: 10px;
  font-size: 25px;
}

body {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Opera and Firefox */
  background-color: #2c3e50;
}

button {
  position: relative;
  border-radius: 4px;
  border: none;
  padding: 15px 35px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  color: #ecf0f1;
  font-family: "Sansation";
}

.saveBtn {
  background-color: #1abc9c;
}

.saveBtn:hover {
  background-color: #16a085;
}

.saveBtn:active {
  background-color: white;
  color: #16a085;
}

.loadBtn {
  background-color: #f1c40f;
}

.loadBtn:hover {
  background-color: #f39c12;
}

.loadBtn:active {
  background-color: white;
  color: #f1c40f;
}

.clearBtn {
  background-color: #e74c3c;
}

.clearBtn:hover {
  background-color: #c0392b;
}

.clearBtn:active {
  background-color: white;
  color: #e74c3c;
}

.copyBtn {
  background-color: #e74c3c;
}

.copyBtn:hover {
  background-color: #c0392b;
}

.copyBtn:active {
  background-color: white;
  color: #e74c3c;
}

.bt {
  margin-top: 3px;
  text-align: center;
}

#version {
  left: 0%;
  bottom: 0%;
  width: 10%;
  text-align: center;
  font-family: "Consolas";
  height: 25%;
}