/* #log {
    background-color: rgb(36, 36, 36);
    overflow-y: auto;
    height: 300px;
}

#log * {
    overflow-anchor: auto;
}

pre {
    height: 1px;
} */

.log {
    background-color: rgb(36, 36, 36);
    /* overflow-y: auto; */
    height: 300px;
    /* margin-left: 2.5%; */
    /* margin-right: 50%; */
    border-radius: 25px;
    grid-area: log;
    overflow: hidden;
    /* margin-top: 0px;
    margin-bottom: 0px; */
}

.logGrid {
    display: grid;
    grid-template-areas: 
    'saveLog log'
    'clearLog log'
    'pauseLog log'; /* 50% / 2.5% 97.5% 2.5%; */
    grid-template-columns: 5% 95%;
    /* grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr; */
    margin-right: 50%;
}

.saveLog {
    grid-area: saveLog;
    text-align: right;
    /* width: auto; */
    /* margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    border-radius: 25px; */
    margin: 0px;
    padding: 0px;

}

.clearLog {
    grid-area: clearLog;
    /* width: auto; */
    /* margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    border-radius: 25px; */
}

.pauseLog {
    grid-area: pauseLog;
    /* width: auto; */
    /* margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    border-radius: 25px; */
}

.logBtn {
    position: relative;
    display: inline-block;
}

.logBtnText {
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform-origin: center bottom; */
    margin: 0px;
    padding: 0px;
    text-align: center;
    display: block;
    font-size: 140%;
}

.logRow {
    padding-left: 2%;
}

.container {
    height: 300px;
    overflow: auto;
    display: flex;
    flex-direction: column-reverse;
}