body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background: #5095b4;
    text-align: center;
}

header .banner {
    box-shadow: -2px 0px 0px 0px rgba(0,0,0,0.75), 2px 0px 0px 0px rgba(0,0,0,0.75);
    margin: 0px auto;
    width: 100%;
    max-width: 800px;
    display: block;
}

header h1 { display: inline; font-size: 2.5em; margin: 0;}

header .logo { display: inline;}

main {
    box-shadow: -2px 0px 0px 0px rgba(0,0,0,0.75), 2px 0px 0px 0px rgba(0,0,0,0.75);
    max-width: 800px;
    background: #f2f2f2;
    margin: 0px auto;
    text-align: center;
}

ul { list-style-type: none;}

.avatar-grid {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 10px;
}

.img-avatar {
    width: 100%;
    height: 100px;
}