:root {
    --text-max-width: 40rem;
}
body {
    background-color: #333;
    color: #EEE;
    height: 100vh;
    font-family: monospace, sans-serif;
    font-size: 20px;
}
.container {
    width: 40rem;
    height: 30rem;
}
.text-container {
    flex-direction: column;
    width: var(--text-max-width);
    height: 20rem; 
}
p {
    max-width: var(--text-max-width);
    text-align: center;
    height: 100%;  
}
button {
    border: #000 solid 2px;
    background-color: inherit;
    max-height: 60px;
    min-height: 50px;
    min-width: 100px;
    font-family: monospace;
    margin: 0 2rem 0 2rem;  
}
button:hover {
    background-color: rgba(0, 0, 0, 0.276);
    color: rgba(238, 238, 238, 0.646);
    border: rgba(0, 0, 0, 0.742);
    cursor:pointer;
}
.btn-container {
    width: 100%;
    justify-content: space-around;
} 
.btntext {
    font-size: 14px;
    text-align: center;
}
.btn1text, .btn3text {
    width: 10rem;
}
.btn2text {
    width: 10rem;
    margin: 0 50px 0 50px;
}
.btntextcontainer {
    margin-bottom: 1rem;
}
input {
    border-radius: 0;
    width: 50px;
    border: 2px solid #000;
    background-color: #999;
}
input:focus {
    outline: none;
    border: 2 px solid black;
}

/*----reusables-----*/

.flex {display: flex;}
.flex-column {flex-direction: column;}
.align-center {align-items: center;}
.align-end {align-items: flex-end;}
.justify-center {justify-content: center;}
.hidden {display: none;}