body{
    background-color: cadetblue;
}

a{
    text-decoration: none;    
}

#body{
    border: 5px solid wheat;
    margin: 40px;
    padding: 40px;
}

.list{
    border: 8px solid purple;
    margin: 4px;
    background-color: antiquewhite;
}
/* 
.a{
    border: 4px solid;
    border-radius: 10px;
    margin: 5px;
    padding: px;
    padding-left: 10px;
    padding-top: px;
    padding-bottom: px;
    padding-right: 5px;
    background-color:bisque;
}

.b{
    background-color: yellow;
    border: 2px dashed;
    margin: 4px;
    padding: 10px;
}
.c {
    background-color: beige;
    border: 1px solid white;
    border-radius: 10px;
    margin: 5px;
    padding: 10px;
} */
/* 
td {            
    border: 1px dashed orange;
    border-radius: 10px;
    padding-left: 15px;
    padding-right: 15px;
}
tr{
    border-radius: 15px;
}

table {
    border-radius: 10px;
    border-collapse:collapse;
    padding: 5px;
    margin: 10px;
} */

h5 {
    margin: 1px;
}

.container{
    display: grid;
    grid-template-columns: 300px 100px 200px 100px;
}

.box{
    border: 2px solid white;
}

h4{
    width: 100%;
    display: block;
}

@media screen and (min-width:400px) and (max-width:1000px){
    .container{
        grid-template-columns: 170px 170px 170px;
    }
    .box{
        font-size: 14px;
    }
}

@media screen and (min-width:1000px) and (max-width:1500px){
    .container{
        grid-template-columns: 170px 170px 170px 170px;
        padding: 10px 5px;
    }
    .box{
        font-size: 16px;
        margin: 5px auto;
    }
}