body
{
    background-color: #336699;
}

.international-rescue
{
    min-height: calc( 100% + 2rem );
    margin: -1rem;
    padding: 1rem 1rem;
    background-color: #336699e7;
}

.international-rescue .header .logo
{
    text-align: center;
}

.international-rescue .header .logo img
{
    max-width: 120px;
}

.international-rescue .members
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.international-rescue .member
{
    width: 100%;
    text-align: center;
}

.international-rescue .member img
{
    max-width: 100%;
}

.international-rescue .member p:first-of-type
{
    font-weight: bold;
    text-transform: uppercase;
}

.international-rescue .member .img
{
    border: 6px ridge #888888;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top left, top 100%;
    background-image: var( --img-member ), var( --img-member-eyes );
    width: 100%;
    aspect-ratio: 418 / 443;
}

.international-rescue .member:hover .img
{
    animation: member-eyes 2s infinite;
}

.international-rescue .footer
{
    font-size: 0.7rem;
    font-style: italic;
    text-align: center;
}

.international-rescue .footer a
{
    color: var( --color-text );
}

.four-oh-four
{
    margin-top: 100px;
    margin-bottom: 300px;
    margin-inline: auto;
    font-size: 1.2rem;
    max-width: 800px;
    text-align: center;
}

.four-oh-four > .hood
{
    display: flex;
    flex-direction: column;
    margin-bottom: 100px;
    align-items: center;
}

.four-oh-four > .hood .img
{
    width: 80%;
    order: 1;
}

.four-oh-four > .hood .message
{
    width: 100%;
    order: 2;
}

.four-oh-four img.hood
{
    max-width: 100%;
    border-radius: 50%;
}

.four-oh-four img.scott
{
    max-width: 100%;
    border-radius: 10%;
}

.four-oh-four > .scott
{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.four-oh-four > .scott .img
{
    width: 80%;
}

@keyframes member-eyes
{
    0%,
    100%
    {
        background-image: var( --img-member );
    }
    
    50%
    {
        background-image: var( --img-member-eyes );
    }
}

@media ( min-width: 800px )
{
    .international-rescue .members
    {
        flex-direction: row;
    }

    .international-rescue .member
    {
        width: 16.66666666666667%;
    }

    .four-oh-four
    {
        text-align: left;
    }

    .four-oh-four > .hood,
    .four-oh-four > .scott
    {
        flex-direction: row;
    }

    .four-oh-four > .hood .message
    {
        order: 1;
    }

    .four-oh-four > .hood .img
    {
        width: 300px;
        order: 2;
    }

    .four-oh-four > .scott .img
    {
        width: 200px;
    }
}