html, body {
    width: 100%;
    height: 100%;
    max-height: -webkit-fill-available;
    margin: 0;
    
    background-color: #000;
    
    font-family: 'Roboto Mono', monospace;
    font-size: 1vw;
    
    user-select: none;
}

main.timeports-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
    width: 100%;
    height: 100%;
}

/*****
Timeport *****/

section.timeport {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    flex: auto 1 1;
    
    cursor: pointer;
}

div.time {
    position: relative;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    flex: auto 1 1;
    
    color: #fff;
    font-weight: 600;
    font-size: 14rem;
    line-height: 1em;
}

div.time.tooltip:after {
    position: absolute;
    bottom: -4em;
    z-index: 1;
    
    content: 'Click to toggle military time';
    
    display: block;
    padding: 1em;
    
    background-color: #666;
    border-radius: 0.3em;
    
    color: #000;
    font-size: 2rem;
    line-height: 1em;
    text-align: center;
    text-transform: uppercase;
    
    white-space: nowrap;
    
    animation: tooltip ease-out 5s 1 forwards;
}

@keyframes tooltip {
    0% {
        transform: translateY(-2rem);
        opacity: 0.0;
    }
    5% {
        transform: translateY(0);
        opacity: 1.0;
    }
    95% {
        transform: translateY(0);
        opacity: 1.0;
    }
    100% {
        transform: translateY(2rem);
        opacity: 0.0;
    }
}

div.time span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    flex: 20rem 0 0;
}

div.time span.hours {
    cursor: pointer;
}

span.seconds {
    font-size: 6rem;
    line-height: 1em;
    
    opacity: 0.2;
}

span.seconds:after {
    content: 'AM';
}

section.timeport[meridiem="pm"] span.seconds:after {
    content: 'PM';
}

div.time span.colon {
    flex: 9rem 0 0;
    opacity: 0.2;
    font-weight: 200;
    font-size: 
}

h1.timezone {
    margin: 2rem 0 0 0;
    
    color: #fff;
    font-weight: 200;
    font-size: 2rem;
    
    opacity: 0.2;
}

h1.timezone:before {
    content: 'Timezone: ';
}


/*****
Gauges *****/

div.gauges {
    display: flex;
    flex-direction: column;
    
    box-sizing: border-box;
    flex: 8rem;
    width: 100%;
    padding: 1rem 8rem;
}

span.gauge {
    position: relative;
    flex: 1rem 0 0;
    
    margin-bottom: 1rem;
}

span.gauge:after {
    position: absolute;
    top: 0;
    right: 0;
    
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    
    background-color: #fff;
    border-radius: 1rem;
    
    opacity: 0.1;
}

span.gauge > span {
    position: absolute;
    top: 0;
    left: 0;
    
    height: 100%;
    
    background-color: #fff;
    border-radius: 5rem;
    
    transition: width 0.4s ease-out;
    
    opacity: 0.2;
}