body {
    margin: 0%;
    padding: 0%;
    background-color: rgb(22, 22, 22);
}


.ubuntu-sans-mono {
  font-family: "Ubuntu Sans Mono", monospace;
  font-optical-sizing: auto;
  font-style: normal;
}

#userCommandInput {
    height: 20%;
    width: 50%;
    margin-top: 2vh;
    order: none;
    outline: none;
    background: none;
    font: inherit;       
    border: none;
    color: #d2cad0;
}


.inputBox, .inputBoxHeader{
    gap: 5px;
    position: relative;


    width: 70vh;
    height: 50vh;

    background-color: #300a24;
    color: #d2cad0;

    border-radius: 1.7vh;

}

.inputBox {
    outline: rgb(191, 187, 190, 20%) solid 1px;
}

.inputBoxHeader {   
    background-color: #42072f;
    display: flex;
    width: 100%;
    height: 6vh;

    justify-content: center;
    align-items: center;    

    font-family: Ubuntu;
    font-weight: bold;
    color: white;

    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 0%;
}

.inputFunctionalBox {
    display: flex;
    font-family: Ubuntu Sans Mono;
}   

.tomikSpaceTerminal {
    color: #4d9706;
}

.tomikSpaceTerminalSymbols {
    font-weight: 500;
}

.tomikSpaceTerminalTilda {
    color: #3363a1;
}

#tomikSpaceTerminalResult {

    position: absolute;
    margin-top: 40px
}

.inputBoxHeaderBtn {
    width: 3.5vh;
    height: 3.5vh;

    
    display: flex;
    position: absolute;
    gap: 5px;
    left: 92%;
    justify-content: center;
    align-content: center;

    font-size: 20px;
    font-weight: 600px  ;
    color: white;
    font-family: Ubuntu Sans Mono;

    border-radius: 50%;
    border: none;

    background-color: #551f43;
    transition: background-color 0.2s;
}

.inputBoxHeaderBtn:hover {
    background-color: #5e2c4e;
}

.inputBoxHeaderBtn:active {
    background-color: #7a506c;
}

.inputBoxHeaderText p {
    text-align: center;
    margin: 2px;
}

.HeaderTilda {
    font-weight: lighter;
    color: #88637c;
}

button {
    cursor: pointer; 
}

.tomikSpaceTerminalInputBox {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

td {
    background-color: #551f43;
    text-align: center;
}

th {
    color: #88637c;
}

.scheduleTable {
    user-select: none;
}

@media (max-width: 480px) {
    .inputBox {
        height: 40vh;
        width: 100%;
        min-height: 100%;
    }
    .scheduleTable {
    position: absolute;
    transform-origin: top left;
    transform: scale(0.8);
}
}

@media (min-width: 481px) and (max-width: 768px) {
  .inputBox {
    width: 100%;
    height: 70vh;
    min-height: 100%;
  }
  .scheduleTable {
    position: absolute;
    transform-origin: top left;
    transform: scale(0.9);
}
}