/*====================================*/
/*       K GARMIRE, 2022-11-07        */
/*====================================*/

/*---------- COMMON CLASSES ----------*/
button.clear{
    background-color: transparent;
    border: none;
    color: #757575;
    font-weight: normal;
    font-size: 1.5rem;
    height : auto;
    padding: 12px;
}

button.clear.active{color: steelblue;}


small{font-size: 1rem; }

/*----------- ARCHITECTURE -----------*/
body{
    background-color: #121212;
    color: #f1f1f1;
    font-family: Montserrat;
    display: flex;
}

main{
    max-width: 400px;
    margin: 100px auto 0 auto;
    padding: 24px 12px;
    width: 100%;
}

section{display: none; }
section.active {display: block; }

/*------------- TIME BOX -------------*/
.time-box {
    width: 100%;
    max-width: 300px;
    font-size: 3rem;
    text-align: center;
    padding: 12px;
    margin: 24px auto;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    cursor: pointer;
}

.time-result{
    max-width: 300px;
    font-size: 3rem;
    text-align: center;
    padding: 12px;
    margin: 24px auto;
}

.gamma-grid{
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.gamma-grid .cont{position: relative;}

#sigma .gamma-box {
    width: 100%;
    font-size: 3rem;
    text-align: center;
    padding: 12px;
    margin: 24px auto;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    cursor: pointer;

    background: transparent;
    color: #f1f1f1;
    height: 84px;
}

#sigma .gamma-grid .cont small{
    position: absolute;
    top: 70px;
    right: 10px;
}