body {
font-size: 16px;
color: black;
background-color: teal;
}

h1, h2, h4 {
display: flex;
flex-direction: column;
align-items: center;
}

.content {
display: flex;
flex-direction: column;
}

.leftCol {
display: flex;
flex-direction: row;
align-content: column;
overflow: wrap;
border: 2px dotted red;
padding: 5px;
display: none;
}

.centerCol {
display: flex;
flex-direction: column;

border: 2px dotted yellow;
padding: 5px;
}

.desText {

}

.viewBox {
display: flex;
height: 300px;
border: 2px dashed blue;
font-size: 16px;
color: white;
text-align: center;
}

.buttonBox {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
}

#rngButton {
width: 50%;
height: 50px;
background-color: goldenrod;
border: 5px outset brown;
border-radius: 20px;
}

#rngButton:hover {
background-color: yellow;
}

#rngButton:active {
background-color: goldenrod;
border: 5px inset brown;
}

.rightCol {
display: flex;
flex-direction: column;
overflow: scroll;
border: 2px dotted orange;
padding: 5px;
}