.container {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
	flex-wrap: wrap;
}
.grid {
    max-width: 940px;
    display: grid;
	grid-template-columns: 1fr 3.4fr;
	gap: 15px 15px;
	    grid-template-areas:
      "header header"
      "nav nav"
      "chat main";
    position: relative;
}

.header {
    position: relative;
    grid-area: header;
	
    background-size: cover;
    height:140px;
	width: 100%;
    border: none;
    border-radius: 3px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1
}
.header img {
width:270px;
margin-top:9px;
}

.grid-item {
  border-radius: 4px;
  display: flex;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size:20px;
}


.chat {
    grid-area: chat;
}

.main {
    grid-area: main;
	flex-direction: column;
	overflow:hidden;

}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  flex-direction: row;
  justify-content: center;
  align-content: stretch;
  padding:3px;
  overflow: hidden;
}

.info-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;  
}

.border-box {
border-radius:5px;
background-image:url(images/thumb.png);
background-size:90%;
background-repeat:no-repeat;
background-position:bottom left;

 height: 300px;
 width:300px;
 margin:10px;

}

.title {
    background-color:rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    position: relative;
	font-size: 16px;
	
}

.divider {
margin: 10px;	
}

.yellow p {
color:black;
padding:0px;
font-size: 10px;

}


.yellow {

	background-image: url(images/sticky.png);
	background-size: 260px;
	background-repeat:no-repeat;
	height: 260px;
	width:260px;
	margin:10px;
	padding: 10px;
}

.yellow img{
padding:3px;
width:200px;
height:50px;
margin-left: 20px;


}



.yellow h1{
	font-family: "Rock Salt", cursive;
	font-weight: 400;
	font-style: normal;
	font-size:24px;
	color:black;
	text-align: center;
	
}

.yellow ul {
	font-family: "Permanent Marker", cursive;
	font-weight: 400;
	font-style: normal;
	font-size:15px;
	color:rgba(45, 45, 31, 1);
	margin-left:10px;
	margin-top:0px;
	padding:7px;
	text-align:left;
}
.yellow ul li {
	margin : 0.5em;
}

.preview img {

height:270px;
width:270px;
}

.preview{
transition: opacity 0.5s ease 0s;
}
.preview:hover{
opacity: 0;
}



@media (max-width: 640px) {
	.grid{
    grid-template-areas:
	"header header"
      "nav nav"
      "main main"
	  "chat chat";
    grid-template-columns: 1fr;

  }
  

  
	}


@media (max-width: 330px) {
	
	
#headimg{
width:69%;	
}
  
.flex-row p{
font-size:14px;
}	
  
.header {
	height:100px;
}
  
.nav{
	margin: 0px;
}

.container{
padding-top:5px;
}


	
	

	}
	



@media (max-width: 320px) {



#headimg{
width:60%;	
}
  	
  
.header {
	height:90px;
}
  

	}
	

	}