body {
    font-size:16px;
    font-family: 'Roboto', sans-serif;
    background-color:white; 
    color:tomato;
}

nav {
    display:flex;
    width:25%;
    margin:auto;
    margin-top:5%;
    align-items:center;
    justify-content:center;
    
}

nav a {
    display:block;
    margin-right:1%;
}

.tab_active {
    background: #cab5b2;
    color:tomato;
    padding: 10px 10px 5px 10px;
    border-radius:5px 5px 0px 0px;
    text-decoration:none;
}

.tab_inactive {
    background: #e0dcdb;
    color:#ffa595;
    padding: 10px 10px 5px 10px;
    border-radius:5px 5px 0px 0px;
    text-decoration:none;
}

.tab_inactive:hover {
    color:tomato;
}

#logo {
    text-decoration:none;
}

#content {
    width:33%;
    margin:auto;
    margin-top:0%;
    padding: 25px 100px 55px;
    border-radius:10px; 
    background:#ffe3de;
}

header {
    margin:auto;
    width:100%;
    text-align:center;
    font-size: 1.75vw;
}

#clock {
    width:100%;
    margin:auto;
    text-align:center;
    display:grid;
    grid-template-columns: 33% 33% 33%;
}

#clock_timepiece {
    grid-column: span 3;
    font-size:10vw;
    text-align:center;
}

.clock_button {
    display:block;
    width:auto;
    text-decoration:none;
    font-size:3em;
    color:tomato;
    font-family: 'Segoe UI Symbol';
}

#clock_status_view {
    grid-row: 1 span;
    grid-column: 3 span;
}

#current_interval {
    color:#ffa595;
}

#clock_startOrPause {
    text-align:right;
}

#clock_reset {
    text-align:left;
}

#click_skip {
    text-align:center;
}

.ConfigNumInput, .ConfigBoolInput {
    float:left;
    clear:both;
    margin-bottom:1vw;
}

@media (width <= 1280) {
    #content {
        width:75%;
    }
}