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: row;
}

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

width: 20%;
border: 2px dotted red;
padding: 5px;
}

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

width: 50%;
border: 2px dotted yellow;
padding: 5px;
}

.desText {

}

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

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

#rngButton {
width: 25%;
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;
width: 25%;
border: 2px dotted orange;
padding: 5px;
}