*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container{
    height: 100vh;
    padding: 0 0 2rem 0;
}

h1{
    text-align: center;
    margin: 10px 0 8px 0;
}

.firstWidth{
    width: 50%;
}

.secondWidth{
    width: 70%;
}

.thirdWidth{
    width: 90%;
}

form{
   max-width: 400px; 
   margin: 1rem auto 10px auto;
}

input{
    width: 100%;
    width: 100%;
    padding: 10px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    border: 1px solid;
    width: 80%;
    margin: 8px auto;
    text-align: center;
}

table, th, td {
    border: 1px solid;
}

.option-container{
    max-width: 400px; 
    margin: 2rem auto 1rem auto;
}

.color-container{
    display: flex;
    gap: 12px;
    margin: -10px 0 0 0;
}

#themes{
    width: 230px;
}

#theme-btn{
    padding: 5px 10px;
    border-radius: 0 10px 0  10px;
}

.width-container{
    display: flex;
    gap: 12px;
    padding: 10px  0 0 0;
}

#width-btn{
    padding: 7px 14px;
    border-radius: 0 10px 0  10px;
}

#width{
    width: 230px;
    margin: 0 0 0 33px;
}

/* hover state for buttons */
#width-btn:hover, #theme-btn:hover{
    background-color: rgb(99, 90, 90);
    color: #fff;
    transition: 0.3s;
}