/* css for calculator mockup here */
*{
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 2vmax;
    font-weight: normal;
    padding:5px;
}

main, section{
    background-color: white;
    border: 1px solid black;
    border-radius: 25px;
    margin: .5vw;
    box-shadow: 5px 10px 5px black;
}

main{
    display: grid;
    background-color: #817c79;
    grid-template-columns: 4fr 2fr;
    grid-template-rows: 1fr 1fr 1fr 5fr;
    grid-template-areas: 
    "textarea custom"
    "memory custom"
    "misc custom"
    "buttons custom";
    height: 95vh;
    width: 95vw;
    padding: 0px;
}

.txt{
    grid-area: textarea;
    background-color: black;
}

.txtbox{
    color: black;
    background-color: white;
    border-radius: 120px;
    box-shadow: 5px 10px 5px gray inset;
}

.txtbox > p {
    color:black;
    font-size: 3vw;
    text-align: right;
}

.memory{
    background-color: #8e4444;
    grid-area: memory;
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.custom{
    display:grid;
    grid-area: custom;
    background-color: #93d4d6;
    grid-template-rows: 1fr 3fr 1fr 3fr;
    grid-template-columns: 1fr;
}

.bluebutton{
    background-color: #93d4d6;
}

.redbutton{
    color:black;
    background-color: #763838;
}

.redbutton, .bluebutton{
    text-align: center;
    border-radius: 25px;
    border: 1px solid black;
    box-shadow: 2px 2px 2px rgb(59, 56, 56) inset;
}

.redbutton:hover, .bluebutton:hover{
    background-color: #817c79;
}

.misc{
    grid-area: misc;
    display: inline-grid;
    justify-content: center;
    grid-template-columns: 20% 20% 20% 20%;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    align-items: center;
    justify-content: center;
}

.buttons{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap:10px;
    grid-row-gap:10px;
    padding: 10px;
}

.scrollbox{
    border-radius: 20px;
    background-color:#cae3e4;
    overflow:scroll;
}

.scrollbox > p{
    font-size: 3vh;
    color: black;
    text-align: right;
}

h1{
    font-size: 5vh;
    color:black;
}

#history > p:nth-child(even){
    font-weight: bold;
}

.membutton:hover{
    color:#817c79;
}