body {
 
@font-face {
font-family: "pixel";
src: url("PixelOperator.ttf");
src:
url("PixelOperator.ttf") format("ttf");
}


}
  
p{
    font-family: pixel;
}   
    }
h3{
    font-family: pixel;
    font-weight: normal;
}


.container {  display: grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 0.5fr;
grid-gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas:

    "pictures intro intro intro intro nav picture"
    "pictures intro intro intro intro nav picture"
    "pictures content content content content nav picture"
    "pictures content content content content buttons picture"
    "pictures art art art art buttons picture"
    "pictures footer footer footer footer footer picture";
    width: 1400px;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    overflow: hidden;
     margin-top: 0;

    

}



.footer { grid-area: footer; background-color:  beige; border-width:7px;border-style:solid;
border-color:#f4a682;border-radius: 10px; margin-top: -119px; height: 150px;}

.nav { grid-area: nav; background-color:  beige; border-width:7px;border-style:solid;
border-color:#f4a682;border-radius: 10px; height: 695px}

.buttons { grid-area: buttons; background-color:  beige; border-width:7px;border-style:solid;
border-color:#f4a682;border-radius: 10px; height: 415px; margin-top: -47px}

.intro { grid-area: intro; background-color:  beige; border-width:7px;
border-style:solid;
border-color:#f4a682;border-radius: 10px; ;}

.content {
    grid-area: content; background-color:  beige; border-width:7px;border-style:solid;
border-color:#f4a682;border-radius: 10px;}

.art { grid-area: art; background-color: beige; border-width:7px;border-style:solid;
border-color:#f4a682;
border-radius: 10px; display:inline-block; 
  padding:0px; 
  margin-top:-89px; 
    height: 200px;
}

.pictures {grid-area: pictures; background-color: transparent;}

.picture {grid-area: picture; background-color: transparent; }

.content{   
    background-color: #fff;
    border: 1px solid #eb794d;
    border-radius: 4px 0 4px 0;
    color: #000;
    font-size: 16px;
    left: -1px;
    padding: 10px 7px 5px;

}
p{
margin:	0% 0% 0% 0%;
padding: 0;
}

.content{
    height:400px;
    overflow:scroll;
    overflow-x:hidden;
    
}

a:link {
  color: orange;
  background-color: transparent;
  text-decoration:none;
}
a:hover {
  color: black ;
  background-color: #FF9369 ;
}

div {
  font-family: pixel;
}

.container2 {  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
  grid-template-rows: 1fr 0.3fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 10px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "column1 title title title column2"
    "column1 description description description column2"
    "column1 pictures2 pictures2 pictures2 column2"
    "column1 pictures3 pictures3 pictures3 column2";
      background-color: transparent;
   
    height: 2600px;
        margin-left: auto;
            margin-right: auto;
      ;
}

.title { grid-area: title;  background-image: url(bg_yellowzinnia.jpg); border-style:solid;
border-color:#f4a682;border-radius: 10px; }

.description { grid-area: description;  background-image: url(bg_yellowzinnia.jpg); border-style:solid;
border-color:#f4a682;border-radius: 10px;}

.pictures2 { grid-area: pictures2; background-image: url(bg_yellowzinnia.jpg); border-style:solid;
border-color:#f4a682;border-radius: 10px;}

.pictures3 { grid-area: pictures3;  background-image: url(bg_yellowzinnia.jpg); border-style:solid;
border-color:#f4a682;border-radius: 10px;}

.column1 { grid-area: column1; background-color: transparent; }

.column2 { grid-area: column2; background-color: transparent; }

#asukapng  {
float: left;    
 margin: 0 15px 0 0;
}