@import url(reset.css);

.m-plus-rounded-1c-thin {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .m-plus-rounded-1c-light {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .m-plus-rounded-1c-regular {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .m-plus-rounded-1c-medium {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .m-plus-rounded-1c-bold {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .m-plus-rounded-1c-extrabold {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .m-plus-rounded-1c-black {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
.potta-one-regular {
    font-family: "Potta One", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  .nanum-brush-script-regular {
    font-family: "Nanum Brush Script", cursive;
    font-weight: 400;
    font-style: normal;
  }
  
  .object1 { grid-area: para1;}
  .object2 { grid-area: para2;}
  .object3 { grid-area: para3;}
  .object4 { grid-area: para4;}
  .object5 { grid-area: header; }
  .object6 { grid-area: hero; }
  .object7 { grid-area: footer; }


.grid-container {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas:
    'header header header header'
    'hero hero hero hero'
    'para1 para2 para3 para4'
    'footer footer footer footer';
  gap: 10px;
  padding: 10px;
}

  h1{
    font-family: Potta One;
    font-size: xxx-large;
    text-align: center;
  }
  p{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: large;
    text-align: center;
    margin: 5px;
  }
  img{
    height: 300px;
    width: 100%;
    overflow: hidden;
  }
  footer{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: large;
    text-align: center;
    font-weight: 800;
    margin: 5px;
  }
  div {
    border: 5px solid black;
  }