body {
    background-color: lightblue;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

@media screen and (min-width: 1200px) {
    .page-container {
        max-width: 1200px;
    }
}

@media screen and (max-width: 1200px) {
    .page-container {
        width: auto;
    }
}

.page-container {
    margin: auto;
    background-color: white;
    padding: 1em;
}

.activity-container {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

.proposed-date {
    border-radius: 0.5em;
    padding: 1em;
    background-color: #d2e2e7;
}

.proposed-date .date {
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 1em;
}

/* Style for participant status. */
.participant-and-status {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.25em 1em;
}

.status-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.participant {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.status-container div {
    background-color: #b9d3db;
    margin-left: 1px;
    margin-right: 1px;
    padding: 0.2em;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.status-no.selected {
    background-color: #ff8080;
}

.status-maybe.selected {
    background-color: #ffef88;
}

.status-yes.selected {
    background-color: #80ff80;
}

/* Styles for the error message. */
@media screen and (min-width: 1200px) {
    #error-message {
        margin-bottom: 1em;
        color: red;
        font-weight: bold;
    }
}

@media screen and (max-width: 1200px) {
    #error-message {
        color: red;
        font-weight: bold;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        background: #ffffff;
        padding: 1em;
        z-index: 1000;
    }
}

/* Styles for image buttons. */
.image-button svg {
    height: 1em;
    fill: gray;
}

.image-button svg:hover {
    fill: black;
}

.image-button {
    cursor: pointer;
}

/* Styles for the message of a proposed date. */
.message {
    margin-top: 0.5em;
}

.message form {
    display: flex;
}

.message form input[type=text] {
    flex-grow: 1;
}

.message form span {
    margin-left: 0.3em;
}

/* Styles for the license message. */
.license {
    margin-top: 3em;
    color: gray;
    font-size: 0.8em;
}

.license a {
    color: gray;
}