#title-bar {
    position: relative;
    margin-bottom: 60px;
    color: var(--eerie-black);
}

    #title-bar a {
        display: inline-block;
        text-decoration: underline var(--thunderbird);
        text-underline-offset: 5px;
        color: var(--eerie-black);
    }

    #title-bar #notice {
        display: none;
        font-family: var(--font-family-gotham-bold);
        font-size: var(--font-size-xl);
        color: red;
        background-color: yellow;
        text-align: center;
        padding: 10px;
        border: 1px solid red;
        margin-bottom: 35px;
    }

    #title-bar #title {
        font-family: var(--font-family-gotham-bold);
        font-size: var(--font-size-xxxxxl);
    }

    #title-bar #links {
        position: absolute;
        right: 0;
        bottom: 0;
        font-family: var(--font-family-gotham-regular);
        font-size: var(--font-size-l);
    }

        #title-bar #links div {
            display: inline-block;
            border-right: 1px solid var(--eerie-black);
            margin-right: 10px;
            padding-right: 10px;
        }

            #title-bar #links div:last-child {
                border-right: none;
            }

#instructions {
    color: var(--eerie-black);
    font: var(--font-size-l) var(--font-family-roboto);
    line-height: 28px;
    margin-bottom: 50px;
}

    #instructions .column {
        display: inline-block;
        width: 425px;
        margin-right: 40px;
        border-right: 1px solid var(--alto);
    }

        #instructions .column:last-child {
            border-right: none;
        }

        #instructions .column .number {
            display: inline-block;
            width: 75px;
            line-height: 72px;
            font: var(--font-size-xxxxxl) var(--font-family-gotham-medium);
            color: var(--eerie-black);
        }

        #instructions .column .detail {
            display: inline-block;
            width: 310px;
        }


#byTitle {
    font-family: var(--font-family-gotham-bold);
    font-size: var(--font-size-xxxl);
    margin-bottom: 40px;
}

/* Large */
@media (max-width: 1200px) {

    #title-bar #notice {
        font-size: var(--font-size-xl);
        display: block;
    }

    #title-bar #title {
        font-family: var(--font-family-gotham-bold);
        font-size: var(--font-size-xxxxl);
    }

    #instructions {
        color: var(--eerie-black);
        font-family: var(--font-family-roboto);
        font-size: var(--font-size-m);
        line-height: 20px;
        margin-bottom: 50px;
    }

        #instructions .column {
            width: 294px;
            margin-right: 20px;
        }

            #instructions .column:last-child {
                width: 290px;
                border-right: none;
                margin-right: 0px;
            }

            #instructions .column .number {
                width: 40px;
                font: var(--font-size-xxxl) var(--font-family-gotham-medium);
            }

                #instructions .column .number:first-child {
                    width: 30px;
                }

            #instructions .column .detail {
                width: 240px;
            }
}

/* Medium */
@media (max-width: 992px) {

    #title-bar #notice {
        font-size: var(--font-size-l);
    }

    #title-bar #title {
        font-family: var(--font-family-gotham-bold);
        font-size: var(--font-size-xxxxl);
    }

    #title-bar #links {
        font-size: var(--font-size-m);
    }

    #instructions {
        color: var(--eerie-black);
        font: var(--font-size-m) var(--font-family-roboto);
        line-height: 20px;
        margin-bottom: 50px;
    }

        #instructions .column {
            width: 250px;
            margin-right: 20px;
            vertical-align: top;
        }

            #instructions .column:last-child {
                width: 246px;
                border-right: none;
                margin-right: 0px;
            }

            #instructions .column .number {
                width: 30px;
                font: var(--font-size-xl) var(--font-family-gotham-medium);
                vertical-align: top;
            }

                #instructions .column .number:first-child {
                    width: 30px;
                }

            #instructions .column .detail {
                width: 212px;
            }
}

/* Small */
@media (max-width: 768px) {

    #title-bar #notice {
        font-size: var(--font-size-m);
        padding: 8px;
    }

    #title-bar #title {
        font-family: var(--font-family-gotham-bold);
        font-size: var(--font-size-xxxl);
    }

    #title-bar #links {
        font-size: var(--font-size-s);
    }

    #instructions {
        color: var(--eerie-black);
        font: var(--font-size-m) var(--font-family-roboto);
        line-height: 20px;
        margin-bottom: 50px;
    }

        #instructions .column {
            width: 216px;
            margin-right: 10px;
            vertical-align: top;
        }

            #instructions .column:last-child {
                width: 166px;
                border-right: none;
                margin-right: 0px;
            }

            #instructions .column .number {
                width: 30px;
                font: var(--font-size-xl) var(--font-family-gotham-medium);
                vertical-align: top;
            }

                #instructions .column .number:first-child {
                    width: 20px;
                }

            #instructions .column .detail {
                width: 183px;
                font-size: 12px;
            }

            #instructions .column:last-child .detail {
                width: 142px;
            }

    #byTitle {
        font-family: var(--font-family-gotham-bold);
        font-size: var(--font-size-xxl);
        margin-bottom: 20px;
    }
}

/* Extra Small */
@media (max-width: 576px) {

    #breadcrumbs {
        height: 55px;
        width: 576px;
    }

    #title-bar {
        margin-bottom: 30px;
    }

        #title-bar #notice {
            line-height: 20px;
            font-size: var(--font-size-m);
        }

        #title-bar #title {
            font-size: var(--font-size-xxl);
        }

        #title-bar #links {
            font-size: var(--font-size-xs);
        }

    #instructions {
        font-size: var(--font-size-xs);
        line-height: 20px;
    }

        #instructions .column {
            width: 150px;
            margin-right: 10px;
            vertical-align: top;
        }

            #instructions .column:last-child {
                width: 150px;
            }

            #instructions .column .number {
                width: 25px;
            }

            #instructions .column .detail {
                width: 110px;
            }

            #instructions .column:last-child .detail {
                width: 110px;
            }
}

/* Portait Mode Catch */
@media (max-width: 400px) {
    #title-bar #notice {
        font-size: var(--font-size-l);
        width: 320px;
    }
}