body{
    background-image: url(back.jpg);
    background-color: black;
    background-position: center;
    background-size: cover;

}
.container {
    display: grid;
    grid-template-columns: [left] auto [center] auto [right] 0px;
    grid-template-rows: [top] auto [middle] auto [bottom] auto;
    column-gap: 15px;
    row-gap: 15px;
    grid-template-areas:
      "top-left top-center top-right"
      "center-left center-center center-right"
      "bottom-left bottom-center bottom-right";
    justify-items: center;
    align-items: center;
    justify-content: stretch;
    align-content: stretch;
    min-height: 97vh;
    
}
.item-a{
    grid-area: center-center;
    text-align: center;
}
.item-b{
    grid-area: bottom-left-end / bottom-left-start / top-center / top-center;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: left;
    height: 100%;
    width: 100%;
}
.item-c{
    grid-area: top-right / top-right-end / center-center / center-center-start;
    background-position: right;
    background-size: 50%;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}
h1{
    color: white;
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 85px;
  text-shadow: 0 1px black

}
h2{
    color: white;
 font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 45px;
  text-shadow: 0 1px black;
  margin-top: 5px;
  margin-bottom: 5px;

}
@media screen and (max-width: 780px) {
    h1{
        font-size: 50px;
    
    }
    h2{
        font-size: 25px;
    
    }

}