body{
	margin: 0;
	padding: 0;
	color: #1a1a1a;
	background-color: #e6e6e6;
	display: grid;
}

#items,
header,
main,
footer{
	display: grid;
    grid-template-columns: minmax(17em, 36em);
	justify-content: center;
}

header,
#site{
    padding-left: 1.5em;
    padding-right: 1.5em;
}

header{
    padding-top: 1em;
    padding-bottom: 1em;
	height: 15em;
	background-color: dodgerblue;
	align-items: center;
}

#items,
main{
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

#name,
article,
#copy{
    padding-left: 2em;
	padding-right: 2em;
}

#name{
	text-align: center;
}

article{
    padding-top: 1em;
	padding-bottom: 1em;
	background-color: white;
	overflow: auto;
}

#light-blue{
    background-color: #deebff;
}
#light-cyan{
    background-color: #e6fcff;
}
#light-yellow{
    background-color: #fffae6;
}
#light-red{
    background-color: #ffebe6;
}
#light-purble{
    background-color: #eae6ff;
}
#blue{
    background-color: #b3d4ff;
}#cyan{
    background-color: #b3f5ff;
}

#circle{
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    height: 5em;
    width: 5em;
}
#oval{
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    height: 5em;
    width: 10em;
}
#rectangle{
    border: 1px solid #1a1a1a;
    height: 5em;
    width: 10em;
}
#rectangle-round{
    border: 1px solid #1a1a1a;
    border-radius: 1em;
    height: 5em;
    width: 10em;
}
#square{
    border: 1px solid #1a1a1a;
    height: 5em;
    width: 5em;
}
#square-round{
    border: 1px solid #1a1a1a;
    border-radius: 1em;
    height: 5em;
    width: 5em;
}

a{
	color: #1a1a1a;
	text-decoration: underline;
}
a:focus,
a:hover{
	color: #404040;
	text-decoration: underline;
}

table{
    border-collapse: collapse;
    margin-bottom: 1em;
}
th{
    background-color: lightgray;
    text-align: left;
}
th,
td{
    border-bottom: 1px solid;
    padding: 0.3em 0.5em;
}

.end{
    text-align: end;
}

/* MEDIA */
@media (min-width: 32em){
    #site{
        padding-left: 2em;
        padding-right: 2em;
    }
}
@media (min-width: 41em){
    #items{
        grid-template-columns: repeat(auto-fill, minmax(17em, 1fr));
    }
}
@media (min-width: 62em){
    main,
    footer{
        grid-template-columns: repeat(auto-fill, minmax(26em, 1fr));
    }
}

@media (min-width: 40em){
    #site1{
        display: grid;
        grid-template-columns: 40em;
        justify-content: center;
    }
}
@media (min-width: 81em){
    #site2{
        display: grid;
        grid-template-columns: 79em;
        justify-content: center;
    }
}
@media (min-width: 113em){
    #site3{
        display: grid;
        grid-template-columns: 113em;
        justify-content: center;
    }
}
@media (min-width: 142em){
    #site{
        display: grid;
        grid-template-columns: 142em;
        justify-content: center;
    }
}