@charset "UTF-8";
/* variable definition */
:root { --content-width: 70% }
@media screen and (max-width: 1024px) {
    :root { --content-width: 80% }
}
@media screen and (max-width: 720px) {
    :root { --content-width: 90% }
}
@media screen and (max-width: 480px) {
    :root { --content-width: 100% }
}

/* member search styling */
.member_search { display: flex; }
#find_member {
    margin: 1em;
    max-width: 100%;
    width: 24em;
    display: flex;
    padding: 0.25em;
    font-size: 1.5em;
}
@media screen and (max-width: 720px) {
    #find_member { font-size: 1.25em; }
}
@media screen and (max-width: 480px) {
    .member_search { width: 100%; }
    #find_member {
        width: 100%;
        font-size: 1em;
    }
}

/* member list styling */
.member_list {
    width: min(100%, calc(var(--content-width) + 10%));
    display: flex;
}
.member_list ul {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 1em 0em;
    list-style-type: none;
}
.member_list ul li {
    margin: 0.5em;
    width: fit-content;
    box-sizing: border-box;
    border-radius: 2em;
    background-color: #E9E9E9;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    padding: 1em;
}
.member_list ul li a {
    width: min-content;
    color: #212223;
    text-decoration: none;
}
.member_list ul li:hover {
    box-shadow: 1px 1px 2px azure;
    transform: translateY(-5px);
    -o-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
}

/* member description styling */
.member_list .member_avatar {
    margin-bottom: 1em;
}
.member_list h2 {
    min-height: 3em;
}
@media screen and (max-width: 1024px) {
    .member_list .member_avatar {
        width: 10em;
        height: 10em;
    }
    .member_list h2 {
        font-size: 1.5em;
    }
}
@media screen and (max-width: 720px) {
    .member_list .member_avatar {
        width: 8em;
        height: 8em;
    }
    .member_list h2 {
        font-size: 1.25em;
    }
}
@media screen and (max-width: 480px) {
    .member_list .member_avatar {
        width: 6em;
        height: 6em;
    }
    .member_list h2 {
        font-size: 1em;
    }
}