* {
  box-sizing: content-box;
}

body {
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
  background-color: #1f1f1f;
  min-width: 1800px;
}

h1,h2,h3,h4,h5 {
margin: 0 0 8px 0;
}



@font-face {
  font-family: lettersmall;
  src: url("font/small.otf") format("opentype");
}

.color-sel {
  width: 100%
}

body {
  font-family: lettersmall;
}

.image-select-menu {
text-align: center;
margin-bottom: 32px;
}

.image-select-menu img {
width: 40px;
}

.letter-main {
  
}

textarea
{
   resize: none;
}

.top-menu {
background: 000000aa;
padding: 8px 32px;
margin-bottom: 8px;
}

.top-menu a {
  color: cyan;
  text-decoration: none;
}


.letter-control {
  display: grid;
  grid-template-columns: 1230px calc(100% - 1260px);
  gap: 5px 5px;

}

.letter-menu {
  color: #e9e9e9;
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 5px 5px;
  grid-template-rows: 38px 38px 38px 38px 200px 38px;
}

.letter-menu h2 {
  font-size: 95%;
  margin-top: 5%;
}

.letter-menu textarea, .letter-menu input, .clr-field {
  width: 100%;
  margin: 0;
  font-family: lettersmall;
}

#viewport {
width: 1230px;
height: 780px;
margin: 0 auto;
display: block;

}