:root{
    --select: rgb(255, 0, 0);
    --unselect: rgba(128, 255, 229, 0.75);
}

#title{
    text-align: center;
    font-family: Arial;
}

#table option{
    width: 30%;
}

#delay{
    width: 20%;
}

.left { 
    float:left;
    width:30%; 
    background: rgb(50, 134, 170, 0.3);
    text-align: center;
}

.right { 
    float:right;
    width: 70%;  
    
}

#controls{
    display: block;
    justify-content: center;
    font-family: Arial;
}

#controls button{
    transition: all 150ms linear;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    text-transform: none;
    text-transform: capitalize;
    border: 0 none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    padding: 10px 10px;
    font-size: 15px;
}

.gen-text{
    font-size: 15px;
    padding-bottom: 10px;
}

#controls button:hover{
    transition: all 150ms linear;
    opacity: .85;
}

#controls button:active{
    transition: all 150ms linear;
    opacity: .75;
}

#element-container{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

#desc-container{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #e6f1f5;
    text-align: center;
    padding: 5px;
    margin: 10px;
    border: 1px solid black;
    font-size: 18px;
}

#size{
    -webkit-appearance: none;
    width: 70%;
    height: 10px;
    border-radius: 5px;
    background:white;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

#size:hover{
    opacity: 1;
}


#size::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: url("/assets/think.png");
    cursor: pointer;
  }