#substitution {
}
#key {
width: 78%;
float:left;
}
#k {
width:100%;
margin: 0 auto;
}
#keylabel {
width:20%;
float:left;
font-weight:bold;
}
#keybox {
width: 100%;
}
#table {
width: 78%;
}
#t {
width:100%;
margin: 0 auto;
}
#tablelabel {
width:20%;
float:left;
font-weight:bold;
}
#c {
width:100%;
margin: 0 auto;
}
#ciphertext {
width:78%;
float:left;
}
#ciphertextlabel {
width:20%;
float:left;
font-weight:bold;
}
#ciphertextcopy {
width:78%;
float:left;
}
#ciphertextcopylabel {
width:20%;
float:left;
font-weight:bold;
}
#ciphertextarea {
width: 100%;
}
#instruct {
font-weight:normal;
}
.letter {
<!--    font-size: 75%;
width: 4.5em;
-->
    font-size: 100%;
    width: 1.5em;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 4px 4px;
}

.column {
    flex: 2%;
    max-width:2%!important;
    padding: 4px 4px;
    margin: 2px;
    text-align:center;
}
.column:nth-of-type(1){
    flex: 8%;
    width:84px;
    max-width:84px;
    text-align:left;
}
@media (max-width:1500px) {
    .column {
        flex: 4%;
        max-width:4%;
        padding: 0 4px;
        text-align:center;
    }
    .column:nth-of-type(1){
        flex: 16%;
        width:84px;
        max-width:84px;
        text-align:left;
    }
}
@media (max-width:1200px) {
    .column {
        flex: 8%;
        max-width:8%;
        padding: 0 4px;
        text-align:center;
    }
    .column:nth-of-type(1){
        flex: 32%;
        width:84px;
        max-width:84px;
        text-align:left;
    }
}
@media (max-width:800px) {
    .column {
        flex: 10%;
        max-width:10%;
        padding: 0 4px;
        text-align:center;
    }
    .column:nth-of-type(1){
        flex: 40%;
        width:84px;
        max-width:84px;
        text-align:left;
    }
}