body{
    background:url('/public/images/assets/watermark.png');
}

#content-area{
    display:grid;
    position:relative;
    grid-template-rows:repeat(4, 1fr);
    height:auto;
}

#content-area > div{
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
    grid-row: 2 / -1;
}

#content-area > h1{
    font-size: 1.8em;
    padding:12px;
    display:flex;
    border-bottom:3px solid teal;
    font-family: 'Arial Black';
    justify-content:end;
    flex-direction:column;
    color:teal;
}

.member{
    font-family: 'Corbel', sans-serif;
    box-sizing:border-box;
    padding:10px;
    margin:20px;
}

.member > img{
    margin:auto;
    border: solid 2px teal;
    width: 300px;
}

.member > img:hover{
    transition: 0.5s;
    border: solid white 2px;
    animation:Shake 1s 1 0s ease forwards;
}

.member > h1{
    color:teal;
}

@keyframes Shake {
    0%{transform:rotateZ(0deg);}
    25%{transform:rotateZ(8deg);}
    50%{transform:rotateZ(-8deg);}
    100%{transform:rotateZ(0deg);}
}

@media screen and (max-width:5in){
    #content-area{
        padding-top:100px;
        display: flex;
        flex-wrap:wrap;
        flex-direction:column;
    }
}