/* header */
header {
    width: 90%;
    margin: auto;
    padding: 20px;
    padding-top: 20px;
    text-align: center;
}
#header {
    
    height: max-content;
    margin: auto;
    justify-content: space-around;
    display: flex;
    padding: 10px;
    /* margin-top: 10px; */
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    font-family: sans-serif;
    color: black;
}
#header > div {
    
    color: black; 
    padding-right: 20px;
    border-right: 2px solid red;
    /* text-decoration: 0; */
    
}
#header > div > a{
    color: black;
    text-decoration: 0;
}
#header > div:last-child {
    border-right: 0;
}


.search-container {
/* float: right; */
text-align: right;
cursor: pointer;
}


input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none

}

.search-container button {
float: right;

padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
/* background: #ddd; */
font-size: 17px;
border: none;
cursor: pointer;
}

#first {
display: flex;  

}

.fa-solid {
color: salmon;
}

/* common */
#page1, #page2 {
            justify-content: center;
            margin: auto;
            padding: 20px;
            width: 90%;
            box-sizing: border-box;
            padding: 20px;
            display: flex;
            
            /* padding-left: 30px; */
            line-height: 34px;
            /* margin-bottom: 40px; */
}

#part2, #p1 > p {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
}
#head2 > h2 {
    padding: 20px;
    margin: auto;
    padding-bottom: 0;
    font-size: 35px;
    font-weight: 500;
    color: #212121;
    text-align: center;
    /* border-bottom: 1px solid #fe5c75; */
    border-bottom-right-radius: 5px;
}

hr {
    width: 100px;
    text-align: center;
    border-top: 3px solid #fe5c75 ;
}
#part2, #p1 {
    margin: auto;
    padding: 20px;
    justify-content: center;
    text-align: center;
}
#star {
    padding-top: 200px;
    text-align: left;
    color: gray;
}
#part2 > h3, #m1 > div > h3, #m2 > div > h3, #p1 > h3 {
   font-size: 24px;
   font-weight: 100;
   font-family: sans-serif;
}


#m1, #m2 {
    width: 90%;
    /* height: 50%; */
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto;
    gap: 20px;
    margin: auto;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    /* margin-bottom: 40px; */
}
#m1 > div {
    margin: auto;
    width: 360px;
}
#m1 > div > img {
    width: 360px;
    height: 400px;
}
#s1 {

text-align: left;
color: gray;
}

#m2 > div {
    margin: auto;
    width: 360px;
}
#m2 > div > img {
    width: 360px;
    height: 400px;
}


/* footer */
#footer {
    padding: 20px;
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: auto;
    font-family: sans-serif;
    background-color: whitesmoke;
    font-family: sans-serif;

}

#footer > div {
    margin: auto;
    text-align: left;
}
#cons > span {
    width: 32px;
    height: 32px;
    background-color: gainsboro;
    padding: 10px;
    margin: auto;
    text-align: center;
}
footer > p {
    font-size: 16px;
    font-weight: 400;
}
hr {
    width: 100px;
    text-align: center;
    border-top: 3px solid #fe5c75 ;
}

    @media all and (min-width: 381px) and (max-width: 800px) {
    /* header */
    #header {
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
      }
      #header > div { 
               padding-right: 0;   
       }
       header {
         width: 100%;
       }
    
    
    
    /* common */
    #page1, #page2 {
        text-align: center;
       flex-direction: column;
       /* padding: 0; */
       width: 100%;
    }
    #m1, #m2 {
         grid-template-columns: repeat(1,1fr);
        grid-template-rows: auto; 
       
        /* width: 100%; */

    }
    #part1 > img {
        width: 360px;
        height: 380px;
    }
    #star {
        padding-top: 20px;
        text-align: center;
    }
    #part1> img, #p2 > img {
        width: 440px;
        height: 490px;
    }
    /* #m1>div>img, #m2>div>img {
       width: 324px;
       height: 56px ;
    } */

/* footer */
    #footer {
        grid-template-columns: repeat(2,1fr); 
    }

    }
    @media all and (min-width: 50px) and (max-width: 380px) {

        /* header */
        .search-container {
            float: none;
            text-align: center;
            margin: 0;
          }
          header {
            width: 100%;
            margin: 0;
            padding: 0;
          }
          #header {
            text-align: center;
            /* flex-direction: column; */
            display: block;
            padding: 0;
            justify-content: space-evenly;
          }
          #header > div {
           border-right: 0;
          }
       
       
       /* common */
        #page1, #page2 {
            flex-direction: column;
            text-align: center;
            padding: 0;
            margin: 0;
         }
     
    #m1, #m2 {
        grid-template-columns: repeat(1,1fr);
       grid-template-rows: auto; 
     }
     #star {
        padding-top: 20px;
        text-align: center;
    }
    #part1> img, #p2 > img {
        width: 360px;
        height: 380px;
    }

    /* footer */

    #footer {
        grid-template-columns: repeat(1,1fr);    
    }
    #footer > div {
        margin: auto;
        text-align: center;
    }
   
    }