/* Banner Styles */
.banner {
    height: calc(var(--height-header) * 10);
    display: flex;
    align-items: center;
    background-image: url(/img/banner.png);
    background-size: cover;
}

.banner p {
    width: 100vw;
    height: calc(var(--height-header) * 5);
    padding-left: 40px;
    display: flex;
    align-items: center;
    font-size: calc(var(--font-size) * 2);
    font-weight: bold;
    color: var(--color-black);
    font-style: italic;
    text-shadow: 3px 8px rgba(184, 184, 184, 0.5);
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Announcement Styles */
.announcement h2 {
    width: 100vw;
    height: var(--height-header);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--font-size) * 1.25);
}

.announcement ul {
    margin: 16px 32px calc(var(--height-header) / 2) 32px;
    padding: 0 32px;
    width: calc(100vw - 64px);
    max-height: calc(var(--height-header) * 4);
    border-top: 1px solid var(--color-green);
    display: flex;
    flex-flow: column;
    overflow-y: scroll;
    text-align: justify;
}

/* Message Styles */
.message h2 {
    width: 100vw;
    height: var(--height-header);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-green);
    color: white;
    font-size: calc(var(--font-size) * 1.25);
}

.message .text {
    min-width: 600px;
    max-height: calc(var(--height-header) * 8);
    overflow-y: scroll;
    padding: 16px 32px;
    display: flex;
    align-items: flex-start;
    text-align: justify;
    background-color: rgba(0, 255, 0, 0.05);
}

.message .text span {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-weight: bold;
}

.message .text img {
    width: 25vw;
    height: 25vw;
    margin: auto;
    margin-left: 32px;
    pointer-events: none;
}

/* Media Query */
@media screen and (max-width: 600px) {
    /* Banner Styles */
    .banner {
        height: calc(100vh - var(--height-header)*2);
        background-image: url(/img/banner.png);
        background-position: right;
    }

    .banner p {
        width: 100vw;
        height: calc(var(--height-header) * 3);
        padding-left: 0;
        justify-content: center;
        font-size: calc(var(--font-size) * 1.5);
        -webkit-backdrop-filter: blur(5px);
    }

    /* Announcement Styles */
    .announcement h2 {
        width: 100vw;
        height: var(--height-header);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: calc(var(--font-size) * 1.25);
    }

    .announcement ul {
        padding: 0 0 0 32px;
    }

    /* Message Styles */
    .message h2 {
        display: none;
    }

    .message .text {
        min-width: initial;
        width: 100vw;
        max-height: initial;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: initial;
    }

    .message .text p {
        display: none;
    }

    .message .text img {
        width: 60vw;
        height: 60vw;
        margin: 0;
    }
}