body{
  font-family: "system-ui", sans-serif;
  font-size: 100%;
  line-height: 133%;
  background-image:linear-gradient(#0000,#FFFFFF),url("cloud.jpg");
  background-color:#cccccc;
  
}

h1{
  display:center;
  font-family:"georgia";
  font-size:30px;
  color:white;
}
.navbar ul{
	list-style-type:none;
	background-color:white);
	padding:0px;
	margin:0px;
	overflow: hidden;
}
.navbar a{
	color:white;
	text-decoration:none;
	padding:20px;
	display:block;
	text-align:center;
}
.navbar li{
	float:left;
}
.navbar a:hover{
	background-color: #6f8ab3;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-auto-flow: dense;
  gap: 1em 1em;
}
.item{
  padding:.5em;
  grid-column:1/-1;
}

@media screen and (min-width:550px){

.item{
  grid-column: initial;
}
.first{
  grid-column:;
  grid-row:1/4;
  background-color:#FEDCDB;
}
.second{
  grid-column:-1/2;
  grid-row:;
  background-color:#FEF1C9 ;
}
.third{
  grid-column:2/4;
  grid-row:;
  background-color:#F2D9EF;
}
.fourth{
  grid-column:;
  background-color: #D8EEDF;
}

.fith{
  grid-column:;
  background-color:#D8E5F7;
}
.sixth{
  grid-column:-1/1;
  background-color: #CED1F8;
}