body{
    max-width:800px;
    width: 90%;
    margin: auto;
}

@media (min-width:640px){
    body {
        background-color:#eaf6ff;
    
    }
}
@media (max-width: 500px) {h1
    {font-size: 1.5rem;}
}

@media (min-width: 640px) {h1
    {font-size: 2.5rem;}
}

#fixed-size-grid-items ul{
    display:flex;
    flex-wrap: wrap;
    padding-left:0;
}

#fixed-size-grid-items li{
    font-size: .8rem;
    list-style: none;
}

#fixed-size-grid-items aside {
    display:block;
    width: 170px;
    margin:10px;
}

#stretchable-grid-items li{
    width:100%;
    list-style:none;
}


@media (min-width: 480px){
    #stretchable-grid-items li{width:50%}

    }


@media (min-width: 640px){
    #stretchable-grid-items li{width:25%}

    }

#stretchable-grid-items aside {
    margin:10px;
}

#stretchable-grid-items ul{
    display:flex;
    flex-wrap:wrap;
    padding-left:0;
    margin-left:-10px;
    margin-right:-10px;
    margin-top:1rem;
    margin-bottom:1rem;
}