body{
    background-color: #00061a;
}

html{
    font-size: 16px;
}

header{
    color: white;
}

header h1 {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    font-style: oblique;
    margin-top: 15px;
    
}

header p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    display: inline-block;
    font-size: 0.8rem;
    margin-left: 12px;
    font-style: italic;
    position: relative;
    top: 13px;
    right: 35px;
    white-space: nowrap;
}

main{
    
    font-family: 'Oswald', 'Segoe UI', Tahoma,  Verdana, 'sans-serif';
}

#warn{
    color: red;
    margin-top: 120px;
    height: 1em;
}

nav{
    display: flex;
    position: absolute;
    top:35px;
    right: 20px;
    /*background-color: aliceblue;*/
    width: 45vw;
    justify-content: space-around;
    font-size: 1rem;
    font-style: italic;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: lightblue;
    white-space: nowrap;
    
}

a:visited{
    color: rgb(255, 186, 255);
    text-decoration: none;
}


#container{
    width : 80%;
    min-width: 480px;
    margin : auto;

}

button{
    /* width : 25%; */
    /* height : 36px; */
    height : 5vh;
    font-size : 1.13rem;
    margin : 0;
}

.btns button{
    
    float : left;
}

.btns::after{ /* clearfix */
    content: "";
    clear: both;
    display: table; 
}

#res{
    background-color : lightgray;
    border : 2px solid darkgrey;
    height: 48px;
    font-size : 1.5rem;
    line-height: 45px;
/*     position: relative;
    top:40%; */
    margin-top: 10px;
    padding: 0 5px;
    /* text-align: right; */

}

.sub-cont{
    width : 33.3%;
    float: left;
}


.nums{
    background-image : linear-gradient(to bottom right, lightblue,white);
    color : rgb(61, 42, 165);
    width : 33.3%;
}


#btn0{
    width : 100%;
}

.util{
    background-color : darkblue;
    color : white;
    width : 50%;
}

.oprs{
    background-color : black;
    color : cyan;
    width : 50%;
    font-size : 35px;
}

.time{
    background-image : linear-gradient(to bottom right, rgb(107, 171, 255),black);
    width : 50%;
    color: white;
    height: 10vh;
}
.btns span{
    font-size: 12px;
    font-style: italic;
}

.time#btnHour{
    width: 100%;
}

.nums:active,.util:active,.oprs:active,.time:active, .active{
    background-image: linear-gradient(to bottom right, orange,grey);    
}

#history-title{
    margin-top: 10vh;
    color: lightgrey;
    font-size: 1.4rem;
}
#history{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: gainsboro;
    font-size: 1.05rem;
    padding: 3vh;
    line-height: 20px;
}

@media screen and (max-width : 850px){
    html{
        font-size: 21px;
    }

    header p {
        position: absolute;
        top: 56px;
        left: 125px;
        margin-bottom: 0;
    }

    header h1 {
        margin: 0;
    }

    #warn{
        color: red;
        margin-top: 1vh;
        height: 1em;
    }

    #container{
        width: 90vw;
        
    }

    nav{
        font-size: 0.9rem;
    }
}

@media screen and (max-width : 550px){

    html{
        font-size: 16px;
    }

    header p {
        top: 48px;
        left: 70px;
    }

    nav{
        font-size: 0.65rem;
        gap: 15px;
        right: 5px;
    }

    #container{
        width: 100vw;
        min-width: none;
        
    
    }
}