body {
margin: 20px;
margin-left: 200px;
margin-right:200px;
 font: 15px 'Courier New', monospace;
}

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.main { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.spacing { grid-area: spacing; }
.spacing2 { grid-area: spacing2; }

.grid-container {
  display: grid;
  grid-template:
    'header header header header header'
    'spacing menu main right spacing2'
    'spacing footer footer footer spacing2';
    grid-template-columns: 1fr 220px 2fr 1fr 1fr;
    grid-template-rows: 150px auto 150px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background: teal;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.spacing {
  background-color: white;
}
.spacing2 {
  background-color: white;
}

.buttongrp {
  display: flex;
  flex-direction: column;
  }
  
.button {
  border: none;
  background-image: url(https://fallingspecialplace.neocities.org/buttons/strawbutton.gif);
  width:200px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  margin: 5px 5px;
  cursor: pointer;
  transition-duration: 0.4s;
}

.button:hover {
  color: white;
  box-shadow:0 6px 12px 0 rgba(0,0,0,0.6);
}

.container {
  background-color: pink;
  margin:5px;
  height: 40px;
}
.container2 {
 display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightpink;
  margin:5px;
}

.main {display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto auto;
  padding: 10px;
}

.main div {
  background-color: #f1f1f1;
  border: 1px solid black;
  padding: 2px;
  gap: 2px;
  margin: 5px;
  font-size: 30px;
  text-align: center;
  border-radius: 25px;}
 
 .cute1 {  grid-column-start: 1;
  grid-column-end: 4;
  background-image: url(background/tumblr_517b61d902de6c34b0fab7fa8766e413_83a4b235_75.jpg);}
  
  .cute3 {  grid-column-start: 2;
  grid-column-end: 4;}
  
  .cute4 { grid-column-start: 1;
  grid-column-end: 3;}
  
  .cute7 { grid-column-start: 2;
  grid-column-end: 4;  }
  
  
  
  
  
  
  