body{
    margin:0px;
    background: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
  
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-touch-callout: none;

    color:orangered;
}
*{
    box-sizing: border-box;
}
#display-container{
    margin: auto;
    background: #111;
    /* box-shadow: inset -2px -2px 4px #000,
    inset 2px 2px 4px #444,
    4px 4px 20px #000; */
    border:6px solid orangered;
    border-left-style:double;
    border-right-style:double; 
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    /* display: flex;
    flex-direction: column; */
}
canvas{
    background: #111;
    display: block;
    width:100%;
}
input
,select{
    outline: none;
    width:100%;
    border:none;
    background: #111;
    color:orangered;
    /* margin:auto; */
}

option{
    font-weight: bolder;
}
details{
    margin:auto;
}
#keyPad{
    width:280px;
    height:280px;
    display: flex;
    flex-direction: column;
    margin:auto;
}


.key-row{
    flex:1;
    display: flex;
    flex-direction: row;
}

.key-row > button{
    flex:1;
    background: #000;
    color:orangered;
    font-size: 20px;
    outline: none;
    border:1px solid orangered;
}

.key-row > button:active{
    transform: scale(0.85);
}

.key-row > button:disabled{
    opacity: 0.5;
}

button.active{
    border-color: orange;
    /* transform: scale(0.9); */
}

.before{
    position: relative;
}
.before:before{
    /* content:attr("data-before"); */
    content: 'SPEED : ';
    display: inline-block;
    position: absolute;
    top:0px;
    left:0px;
    width: 100px;
    height: 100px;
    background: red;
}
/* hiding corner buttons from select*/

select {
    -webkit-appearance: none;
}

/* hiding corner buttons from input */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
    text-align: center;
    font-weight: bolder;
  -moz-appearance: textfield;
}

#loader{
    display: none;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:xx-large;
    font-variant: small-caps;
    animation:text-anim 2s linear infinite alternate;
}

.flex{
    width:100%;
    display: flex;
    flex-wrap: wrap;
}


#log{
    font-size: 12px;
    margin-right:8px;
    max-width:150px;
    max-height: 100px;
    overflow-y: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}

@keyframes text-anim{
    0%{     color:orangered;    }
    20%{    color:red;          }
    50%{    color:blueviolet;   }
    80%{    color:green;        }
    100%{    color:orangered;   }
}

.rib{
    position: fixed;
    top:0px;
    right:0px;
    transform-origin: 50% 0%;
    padding:60px 80px 5px 80px;
    transform:translate(50%,0%) rotate(45deg);
    background: orangered;
    color:white;
    text-decoration: none;
}

#toggleBtn{
    position:fixed;
    top:0px;
    left:0px;
    color:#fff;
    overflow: hidden;
    font-size: 25px;
    background: orangered;
    width:40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:4px;
}