body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


main {
  flex: 1;
  margin: 20px;
  padding: 0;
  display: flex;
  gap: 20px;
}

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto 1fr 1fr auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: purple;
}


.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 3 / 1 / 4 / 2; }
.div4 { grid-area: 1 / 2 / 2 / 3; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 3 / 2 / 4 / 3; }
.div7 { grid-area: 1 / 4 / 2 / 5; }
.div8 { grid-area: 2 / 4 / 3 / 5; }
.div9 { grid-area: 3 / 4 / 4 / 5; }
.div10 { grid-area: 1 / 5 / 2 / 6; }
.div11 { grid-area: 2 / 5 / 3 / 6; }
.div12 { grid-area: 3 / 5 / 4 / 6; }
.div13 { grid-area: 1 / 3 / 4 / 4; }
.div14 { grid-area: 4 / 1 / 5 / 6; }

.links {
  text-align: center;
  font-weight: bold;
  color: blue;
  background-color: red;
  margin: 10px;
  height: fit-content;
}

a {
  text-decoration: none;
  color: inherit;
}

.imgs {
  text-align: center;
  font-weight: bold;
  color: white;
  background-color: red; 
  margin: 10px;
  padding: 10px;
}

.div13 {
  align-self: center;
  text-align: center;
  color: white;
  background-color: green;
  margin: 10px;
  height: fit-content;
  padding: 20px;
}

.div14 { 
  color: white;
  background-color: blue; 
  margin: 10px;
  height: fit-content;
  padding: 20px;
}

.div14:hover::after {
  content: "This is the footer after hover";
}

.dog-image {
  display: block;
  margin: 0 auto;
  width: 100%; 
  border-radius: 20px;
}

.dog-image:hover {
  border: solid 5px white;
}

.cat-image {
  display: block;
  margin: 0 auto;
  width: 100%; 
  border-radius: 20px;
}

.cat-image:hover {
  border: solid 5px blue;
}


p.link:hover {
  display: inline-block;
  background-color: orange;
  color: white
}

a:hover {
  display: inline-block;
  background-color: orange;
  color: white
}