body {
  background-image: url(https://sadhost.neocities.org/images/tiles/0064_small.gif);
}

.container {  display: grid;
  grid-template-columns: 200px 300px 600px 300px 210px;
  grid-template-rows: 150px 275px 50px 100px 75px 50px 100px 50px;
  grid-auto-columns: 1fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    ". banner banner banner ."
    ". image main sidebar ."
    ". to_do main sidebar ."
    ". to_do main sidebar ."
    ". to_do main sidebar ."
    ". blinkies blinkies blinkies ."
    ". music music image2 ."
    ". . . . .";
}
.banner { 
  grid-area: banner; 
  width: 1200px;
  height: 150px;
}
.banner img{
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.image { 
  grid-area: image;
  width: 300px;
  height: 275px;
}
.image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.to_do { 
  grid-area: to_do;
  background-image: url();
  width: 300px;
  height: 300px;
}
.to_do img{
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.main { 
  grid-area: main;
  background-image: url(https://sadhost.neocities.org/images/tiles/bck-crackle.gif);
  margin-right: 5px;
  margin-left: 5px;
  padding: 10px;
  border: 5px solid black;
  width: 550px;
  height: 500px;
  }
.main:background-image{
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.sidebar { 
  grid-area: sidebar; 
  width: 300px;
  height: 500px;
  background-color: black;
}

.blinkies { grid-area: blinkies; }

.music { grid-area: music; }

.image2 { grid-area: image2; }

h1 {
  color: white;
  margin: 15px;
  text-align: center;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-size: 55px;
}

p {
  color: white;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

.button {
  background-color: red;
  border: 2px dotted black;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  margin: 5px;
}
.button:hover{
  background-color: pink;color: white;
  }

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

