Update main page

+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap');
+
 *{
     padding:0;
     margin:0;
     box-sizing:border-box;
 }
+body{
+    height: 100vh;
+    background-image: url('https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+    background-attachment: scroll;
+}
+flex-containter{
+    font-size:100px;
+    font-family: 'Noto Sans KR', sans-serif;
+}
+form input{
+    width:60%;
+    padding:7px;
+    background-color:white;
+    border-radius:30px;
+}
 .containter{
     position:relative;
-    width:90%;
+    width:80%;
     height:auto;
-    max-width:1200px;
+    max-width:3200px;
     margin:0;/*auto*/
     color:black;
+    font-size:100px;
+    font-family: 'Noto Sans KR', sans-serif;
 }
 form{
     width:90%;
     border-radius:4px;
     margin-top:-10px;
     margin-left:10px;
-    background-color:white;
-}
+/*     background-color:white;
+ */}
 form{
     display:inline-block;
 }
@@ -25,13 +47,29 @@ form{
     /*여러줄로 보여주기 위해선 grid 사용해야하는데, 우선은 영상목록 뽑아보고 결정*/
     /*grid로 바꿔놓음. 여러 열로 사진들이 정렬됨*/
     display:grid;
-    grid-gap:25px;
-    grid-template:auto/repeat(auto-fit,minmax(300px,1fr));
+    row-gap:15%;
+    grid-template-columns: repeat(auto-fill, minmax(25%, auto));
+/*     grid-template:auto/repeat(auto-fill,minmax(250px,1fr)); */
     margin-top:50px;
-    width:100%;
+    width:200%;
     margin-left:265px;
+    margin-bottom:100px;
+}
+/*form input{
+    width:80%;
+    padding:10px;
+    border:none;
+    outline:none;
+    font-size:1.8rem;
+    display:inline-block;
+}
+*/ form ion-icon{
+    width:9%;
+    font-size:3rem;
+    margin-left:10px;
+    margin-top:15px;
+    color:rgb(75,75,75);
 }
-
 .search-box{
     margin-left:-10px;
     margin-top:10px;
@@ -42,13 +80,16 @@ img{
     object-fit:cover;
 }
 html{
-   font-size:12px; 
+   font-size:15px;
+   font-family: 'Nanum Pen Script', cursive;
 }
 section{
-    min-height:10vh;
+    min-height:100vh;
     width:100%;
     display:flex;
     padding:100px 0;
+    align-items:stretch;
+
 }
 .brand{
     margin-top:-70px;
@@ -56,18 +97,3 @@ section{
     color:black;
     margin-bottom:30px;
 }
-/*form input{
-    width:80%;
-    padding:10px;
-    border:none;
-    outline:none;
-    font-size:1.8rem;
-    display:inline-block;
-}
-form ion-icon{
-    width:9%;
-    font-size:3rem;
-    margin-left:10px;
-    margin-top:15px;
-    color:rgb(75,75,75);
-}*/
\ No newline at end of file

@@ -11,7 +11,7 @@
     <div class="container">
       <h1 class="brand">Recipe APP</h1>
       <form>
-        <input id="name" type="text" placeholder="Search Your Recipe...">
+        <input id="name" type="text" placeholder="Search Your Recipe..ex) pizza">
         <ion-icon name="search"></ion-icon>
       </form>
       <p>

@@ -10,8 +10,8 @@ function getCheckboxValue(event)  {
 
 const searchForm = document.querySelector('form');
 const searchResultDiv = document.querySelector('.search-result')
-const APP_ID = 'fill your own ID';
-const APP_KEY = 'fill your own key';
+const APP_ID = '0a67fbc1';
+const APP_KEY = '225d31b59bf211d7ede34e2e885f1f3b';
 searchForm.addEventListener('submit', function(event){
   if(document.getElementById('name').value.length === 0){
     alert('한글자 이상 입력해주세요');
@@ -61,12 +61,12 @@ function boxinfo(results){
     boxsinfo +=
     `
     <style>
-    
+    @import url(//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap);
     </style>
 
     <div class="item">
-      <img src="${result.recipe.image}" alt="">
-      <div class="flex-container">
+      <img src="${result.recipe.image}">
+      <div class="flex-container" style="font-family: 'Noto Sans KR', sans-serif;">
         <h1 class="title">${result.recipe.label}</h1>
         <a href="${result.recipe.url}" target="_blank">View Recipe</a>
         <!--result.recipe.labe에 + home + recipe 한 검색결과 페이지를 버튼에 링크시켜놓음-->
@@ -79,7 +79,6 @@ function boxinfo(results){
         <a href="#n" onclick="shareRecipe('twitter','${result.recipe.url}');return false;" class="twitter" target="_self" title="트위터 공유"><span class="skip">트위터</span></a>
         </li>
         </ul>
-
       </div>
       ${(cal => {
         if (cal >= 2000) {