:root {
    --adc-font: "Open Sans", "Helvetica Neue", sans-serif;
    --adc-font-mono: Menlo, Consolas, monospace;
    --adc-blue: #1b4de3;
    --adc-active-text: #1b4de3;
    --adc-section-bg: #efefef;
    --adc-section-gap-bg: #ffffff;
    --adc-header-bg: #ffffff;
    --adc-header-text: #3f3f3f;
    --adc-footer-bg: #ffffff;
    --adc-footer-text: #3f3f3f;
    --adc-content-bg: #f8f8f8;
    --adc-content-text-dim: #3f3f3f;
    --adc-content-text-lite: #ffffff;
    --adc-border-lite: #bfbfbf;
    --adc-border-radius: 4px;
    --adc-section-height: 24px;
    --adc-section-gap-height: 12px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--adc-font);
}

.section {
    display: block;
    width: 100%;
    min-height: var(--adc-section-height);
    background-color: var(--adc-section-bg);
}
.section > .gap {
    display: block;
    width: 100%;
    height: var(--adc-section-gap-height);
    background-color: var(--adc-section-gap-bg);
}
.section > .content {
    display: flex;
    justify-content: flex-start;
}

.announcement {
    margin-top: 24px;
    text-align: center;
}
.announcement > .logo {
    background-color: #ffffff;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
}
.announcement > .card {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/*-----------------------------------------------------------------------------*
 *                            Very Small Screen                                *
 *-----------------------------------------------------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 527px) {
    /* Small screen, non-retina */
    body.responsive {
        font-size: 9px;
    }
    .section > .content.responsive {
        flex-direction: column;
        align-items: stretch;
        width: 100vw;
        padding: 0 16px;
    }
    .announcement > .logo.responsive {
        border-radius: 8px;
        width: 48px;
        height: 48px;
        padding-top: 8px;
    }
    .announcement > .logo.responsive > img {
        width: 32px;
        height: 32px;
    }
    .announcement > .card.responsive {
        margin-top: 24px;
        border-radius: 8px;
        width: 272px;
        padding: 12px;
    }
    .announcement > .card > ul {
        font-size: 0.8rem;
        font-weight: bold;
    }
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px) and (max-width: 527px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px) and (max-width: 527px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px) and (max-width: 527px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px) and (max-width: 527px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px) and (max-width: 527px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) and (max-width: 527px) { 
    /* Small screen, retina, override above media query */
}

/*-----------------------------------------------------------------------------*
 *                               Small Screen                                  *
 *-----------------------------------------------------------------------------*/
@media only screen and (min-width: 528px) and (max-width: 907px) {
    /* Medium screen, non-retina */
    body.responsive {
        font-size: 11px;
    }
    .section > .content.responsive {
        flex-direction: column;
        align-items: stretch;
        width: 100vw;
        padding: 0 20px;
    }
    .announcement > .logo.responsive {
        border-radius: 12px;
        width: 64px;
        height: 64px;
        padding-top: 8px;
    }
    .announcement > .logo.responsive > img {
        width: 48px;
        height: 48px;
    }
    .announcement > .card.responsive {
        margin-top: 40px;
        border-radius: 12px;
        width: 480px;
        padding: 18px;
    }
    .announcement > .card > ul {
        font-size: 1.0rem;
        font-weight: bold;
    }
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 528px) and (max-width: 907px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 528px) and (max-width: 907px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 528px) and (max-width: 907px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 528px) and (max-width: 907px),
only screen and (                min-resolution: 192dpi) and (min-width: 528px) and (max-width: 907px),
only screen and (                min-resolution: 2dppx)  and (min-width: 528px) and (max-width: 907px) { 
    /* Medium screen, retina, override above media query */
}

/*-----------------------------------------------------------------------------*
 *                              Medium Screen                                  *
 *-----------------------------------------------------------------------------*/
@media only screen and (min-width: 908px) and (max-width: 1279px) {
    /* Large screen, non-retina */
    body.responsive {
        font-size: 12px;
    }
    .section > .content.responsive {
        flex-direction: column;
        align-items: stretch;
        flex-direction: column;
        align-items: stretch;
        width: 100vw;
        padding: 0 24px;
    }
    .announcement > .logo.responsive {
        border-radius: 12px;
        width: 76px;
        height: 76px;
        padding-top: 10px;
    }
    .announcement > .logo.responsive > img {
        width: 56px;
        height: 56px;
    }
    .announcement > .card.responsive {
        margin-top: 48px;
        border-radius: 16px;
        width: 860px;
        padding: 24px;
    }
    .announcement > .card > ul {
        font-size: 1.1rem;
        font-weight: bold;
    }
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 908px) and (max-width: 1279px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 908px) and (max-width: 1279px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 908px) and (max-width: 1279px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 908px) and (max-width: 1279px),
only screen and (                min-resolution: 192dpi) and (min-width: 908px) and (max-width: 1279px),
only screen and (                min-resolution: 2dppx)  and (min-width: 908px) and (max-width: 1279px) { 
    /* Large screen, retina, override above media query */
}

/*-----------------------------------------------------------------------------*
 *                               Large Screen                                  *
 *-----------------------------------------------------------------------------*/
@media only screen and (min-width: 1280px) {
    /* Large screen, non-retina */
    body.responsive {
        font-size: 13px;
    }
    .section > .content.responsive {
        flex-direction: column;
        align-items: stretch;
        width: 1232px;
        margin-left: auto;
        margin-right: auto;
    }
    .announcement > .logo.responsive {
        border-radius: 12px;
        width: 88px;
        height: 88px;
        padding-top: 12px;
    }
    .announcement > .logo.responsive > img {
        width: 64px;
        height: 64px;
    }
    .announcement > .card.responsive {
        margin-top: 56px;
        border-radius: 16px;
        width: 860px;
        padding: 24px;
    }
    .announcement > .card > ul {
        font-size: 1.2rem;
        font-weight: bold;
    }
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1233px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1233px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1233px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1233px),
only screen and (                min-resolution: 192dpi) and (min-width: 1233px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1233px) { 
    /* Large screen, retina, override above media query */
}