* {
  margin: 0px;
  padding: 0px;
  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
}
#container-1 {
  display: flex;
  flex-direction: row;
  gap: 25px;
}
.top_img{
  width: 100%;
}
#top_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main {
  margin: 30px;
}
#top_container>h4{
  margin: 20px 0px;
  
}
#top_container>h1{
  margin: 20px 0px;
  
}
#top_container>h1 a{
  color: black;
  text-decoration: none;
}
#top_container>h1 a:hover{
  text-decoration:underline;
}
#headers {
  display: flex;
  margin-top: 30px;
}

#headers > p {
  font-size: large;
  margin: 20px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid blue;
}
#headers > p:hover {
  background-color: #64b5f6;
}
/* fetch designing------------------  */
#main-container {
  margin: 30px 0px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.body_img {
  width: 100%;
  height: 250px;
}

@media all and (min-width: 200px) and (max-width: 792px) {
  #container-1 {
    flex-direction: column;
  }
  #headers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  #main-container{
    grid-template-columns: repeat(2, 1fr);
  }
}