body {
    background-color: #f0f0f0;
}

#container {
    background-color: white;
    max-width: 1920px;
    margin: 0 auto;
    box-shadow: 0 0 10px gray;
    overflow-x: hidden;
}

#header {
    background-image: url("/img/damailah-indonesiaku-header-bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    height: 0;
    padding-top: 120%;
}

#participants-count {
    position: relative;
    background-color: #c7c7c7;
}

#participants-count .bar {
    background-color: #328fe6;
    width: 0;
    height: 1.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    transition: width 0.5s ease-in-out;
}

#participants-count .numbers-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

#participants-count .numbers-wrapper .numbers {
    margin-right: 0.5rem;
    color: white;
}

#participants-count .numbers-wrapper svg {
    fill: white;
}

#date {
    margin: 0;
    text-align: center;
    font-size: 1.5rem;
}

#time {
    margin: 0 0 1rem;
}

#venue {
    margin: 0 0 2rem;
    font-weight: bold;
}

#map {
    width: 100%;
    max-width: 400px;
    height: 300px;
    margin: 0 auto;
}

#countdown.show {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    font-size: 0.8rem;
}

#countdown:not(.show) {
    display: none;
}

#countdown .days,
#countdown .hours,
#countdown .minutes,
#countdown .seconds {
    margin: 0 0.5rem;
}

#countdown .number {
    font-size: 2rem;
}

#footer {
    background-image: url("/img/footer-bg.jpg");
    background-repeat: no-repeat;
    padding: 2rem 1rem 5rem;
}

#footer .title {
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
}

#partners {
    display: flex;
    align-items: center;
    flex-direction: column;
}

#partners .a {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
}

#partners .a .left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
}

#partners .b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
}

#partners img {
    margin: 0.5rem;
    transition: margin 1s ease;
}

@media screen and (min-width: 640px) {
    #header {
        background-image: url("/img/damailah-indonesiaku-header-bg-desktop.jpg");
        padding-top: 56.25%;
    }
}

@media screen and (min-width: 768px) {
    #partners {
        flex-direction: row;
        justify-content: center;
    }

    #partners .a {
        flex-direction: row;
    }

    #partners .a .left {
        justify-content: right;
    }

    #partners .b {
        justify-content: left;
    }

    #partners img {
        margin: 0.5rem 1rem;
    }
}

@media screen and (min-width: 1024px) {
    #partners img {
        margin: 0.5rem 2rem;
    }
}