@import url("main.inc.css");

/*
This stylesheet handles styles specific for about.inc.php.
It is included by index.php.


***************************
** Begin Default Styling **
*/

#work {
    padding-left: 12px;
    padding-right: 12px;
}

#work #filter {
    display: flex;
    justify-content: center;
}

#work fieldset {
    text-align: center;
    border: none;
}

#work fieldset + fieldset {
    margin-left: 20px;
}

#work legend {
    color: var(--color4);
    font-size: 112.5%; /* 18px */
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
}

#work fieldset li {
    margin-top: 20px;
}

#work fieldset button {
    background-color: var(--color1);
    color: var(--color3);
    padding: var(--padding);
    border: none;
    border-radius: var(--borderRadius);
    transition: var(--transition);
}

#work fieldset button:hover, #work fieldset button:focus {
    background-color: var(--color2);
}

#work .thumb-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

#work .menuitem {
    min-width: 296px;
    max-width: 460px;
    max-height: 258.75px;
}

#work .menuitem h2 {
    font-size: 275%;
}

#work .subtitle {
    font-size: 175%;
}

@media screen and (min-width: 815px) {

    #work #filter {
        display: unset;
        justify-content: unset;
    }

    #work fieldset {
        display: flex;
        align-items: center;
    }

    #work fieldset + fieldset {
        margin-left: unset;
        margin-top: 20px;
    }

    #work legend {
        margin-left: unset;
        margin-right: unset;
        float: left;
    }

    #work fieldset li {
        display: inline;
        margin-top: unset;
        margin-left: 20px;
    }

} /* End of 550px */

@media screen and (min-width: 965px) {

    #work .thumb-list {
        max-width: 940px;
    }

} /*  End of 965px */

@media screen and (min-width: 1444px) {

    #work .thumb-list {
        max-width: 1420px;
    }

} /*  End of 1444px */

@media screen and (min-width: 1920px) {

    #work .thumb-list {
        max-width: 1900px;
    }

} /*  End of 1920px */