:root {
    --notifications-width: 50%;
    --notifications-top: 100px;
    --notifications-left: 25%;
    --notifications-bottom: unset;
}

#notifications {
    /* Positioning info for the floating container that shows notifications itself */
    position: fixed;
    width: var(--notifications-width);
    left: var(--notifications-left);
    top: var(--notifications-top);
    bottom: var(--notifications-bottom);
}

#notifications, .notification-container {
    & .notification {
        /* Shape and size config */
        border: 1px solid black;
        background-color: white;
        margin-bottom: 5px;
        border-radius: 8px;
        padding: 8px;

        /* Styling for each of the canned message types */
        &.error {
            background-color: #E9C1BE;
            border: 1px solid #F2869A;
            color: #9A1931;
        }
        &.info {
            background-color: #C6E4F2;
            border: 1px solid #A0A9F6;
            color: #4042A4;
        }
        &.success {
            background-color: #D9EED3;
            border: 1px solid #67CE81;
            color: #286337 ;
        }
        &.warning {
            background-color: #F7F2D2;
            border: 1px solid #F4C57D;
            color: #8F5E12;
        }

        /* Stick the close button over to the top-right corner */
        & .close {
            float: right;
        }

        /* Style the first argument's text slightly differently if there's a body in the options too */
        & .title-style {
            text-decoration: underline;
            font-size: 1.1em;
        }

        /* Strip off the beginning and end paragraph spacing, for situations where paragraphs of text are fed into the body */
        & p:first-of-type {
            margin-block-start: 0.5em;
        }
        & p:last-of-type {
            margin-block-end: 0;
        }

        /* Handle fading out each dismissed notification */
        &.fade {
            opacity: 0;
            transition: opacity 250ms;
        }
    }
}

/* Put h2 elements inside the changelog summaries inline */
.changelog-container h2{
    display:inline;
}