@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

html {
    background-color: #e1e5f2;
    padding: 0 8%;
}

.uptime-bar-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    height: 54px;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 1px;
    overflow: hidden;
}

@media (max-width: 900px) {

    .uptime-bar-container {
        margin-top: 5px;
    }
}

.uptime-bar {
    background-color: #1F7A8C;
    margin: 2px 1px;
    flex: auto;
    width: 10px;
    height: 50px;
    border-radius: 5px;
    transition: transform 100ms ease-in-out;
}

.uptime-bar:hover {
    transform: scale(1, .8);
}

.uptime-info {
    background-color: #022b3a;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    font-family: 'Roboto', sans-serif;
}

.uptime-info p {
    margin: 0 0 2px 0;
    color: #a8b8c7;
}

.uptime-info .date {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    margin-bottom: 15px;
}