*{
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#wrapper{
    max-width: 1920px;
    min-height: 100vh;
    background-color: white;
    display: grid;
    grid-template-areas:
    "title"
    "menu"
    "content"
    "base";
    grid-template-columns: 1fr;
    grid-template-rows: 165px 60px 1fr auto;
}
header{
    grid-area: title;
    padding: 4px;
}
header img{
    max-width: 300px;
    margin-left: 40%;
    padding-top: 15px;
    padding-bottom: 1.5px;
}
nav{
    grid-area: menu;
    background-color: rgba(0, 0, 0, 0.704);
    padding: 0 5 0 5;
}
nav ul{
    list-style-type: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
nav a{
    text-decoration: none;
    font-size: 19px;
    display: block;
    width: 100%;
    padding: 1em;
    color: white;
}
nav a:hover{
    background-color: white;
    color: black;
}
#home-main, #about-main, #pricing-main{
    grid-area: content;
    margin: 0px 10px 50px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(421px, auto);
    grid-template-areas:
    "headline headline"
    "text img";
    padding: 5% 0 10% 0;
    gap: 2rem;
}
.main-headline{
    grid-area: headline;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    color: #222;
    margin-bottom: 1rem;
}
#home-intro, #about-intro, #pricing-intro{
    grid-area: text;
    font-size: 1.1rem;
    color: #444;
}
#home-main img, #about-main img, #pricing-main img{
    max-width: 590px;
    grid-area: img;
    width: 100%;
    height: auto;
    justify-self: center;
}

footer{
    grid-area: base;
    background-color: #000000b4;
    display: grid;
    grid-template-areas: "menu logo-footer menu1";
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 20px 10%;
}
footer #menu{
    grid-area: menu;
    display: flex;
    justify-content: center;
}
footer #menu1{
    grid-area: menu1;
    display: flex;
    justify-content: center;
}
footer ul{
    list-style-type: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
}
footer a{
    color: white;
    text-decoration: none;
    text-align:center;
    font-size: large;
}
footer a:hover{
    color: white;
    background-color: black;
}
footer img{
    grid-area: logo-footer;
    max-width: 100px;
    justify-self: center;
}

/* ------ Home Page ------ */
#home-intro{
    padding: 15% 10% 0% 20%;
    text-align: right;
}

/* ------ About Page ------ */
#about-intro{
    text-align: right;
    padding: 9% 10% 4% 20%;
}

/* ------ Pricing Page ------ */
#pricing-intro{
    text-align: right;
    padding: 9% 10% 4% 20%;
}

/* ------ Inspo Page ------ */
#inspo-main{
    grid-area: content;
    display: grid;
    grid-template-areas:
    "headline"
    "text"
    "gallery";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 2% 5%;
    gap: 2rem;
}
#inspo-main h1{
    text-align: center;
    grid-area: headline;
    font-size: 2.5rem;
    margin-bottom:0.5rem;
}
#inspo-intro{
    grid-area: text;
    margin: 0 auto;
    max-width: 1000px;
}
#inspo-intro p{
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
#gallery{
    grid-area: gallery;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:1.5rem;
    width: 100%;
}

#gallery img{
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ------ Contact Us Page ------ */
#contact-main{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 40px;
padding: 5% 20px;
}
#theForm, #contact{
    max-width:600px;
    flex: 1 1 400px;
}

#contact-list{
    padding-bottom: 10%;
}
#contact ul{
    list-style-type: none;
}
/* ------ CSS for alt screens ------- */
/* ------ Home Page ------ */
@media only screen and (max-width:1060px){
    header img{
        max-width: 250px;
        margin-left: 0;
        padding-top: 5px;
        padding-bottom: 1.5px;
    }
    #wrapper{
        max-width: 1920px;
        min-height: 100vh;
        background-color: white;
        display: grid;
        grid-template-areas:
        "title"
        "menu"
        "content"
        "base";
        grid-template-columns: 1fr;
        grid-template-rows: 130px minmax(auto, 60px) 1fr auto;
    }

    #home-main, #about-main, #pricing-main{
        grid-area: content;
        display: grid;
        grid-template-areas: 
        "headline"
        "text"
        "img";
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(298px, auto) 286px;
        padding: 2% 0 0 0;
        gap: 1.5rem;
    }
    .main-headline{
        grid-area: headline;
        font-size: 2.2rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }
    #home-intro, #about-intro, #pricing-intro{
        grid-area: text;
        text-align: center;
        padding: 0 10%;
        margin: 0 0 2rem 0;
    }
    #home-main img, #about-main img, #pricing-main img{
        max-width: 400px;
        grid-area: img;
        display: block;
        margin: 0 auto;
        height: auto;
    }
  footer{
        grid-template areas:
        "logo-footer"
        "menu"
        "menu1"
        grid-template-columns: 1fr;
        text-align: center;
        row-gap: 20px;
        padding: 30px 5%;
    }
    footer ul{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
}

@media only screen and (max-width: 768px){
    .main-headline{
        font-size: 1.8rem;
    }
    #home-main img{
        max-width: 90%;
    }
}

@media only screen and (max-width: 630px){
    nav a{
    text-decoration: none;
    font-size: 16px;
    display: block;
    width: 100%;
    padding: 1em;
    color: white;
}
nav{
    grid-area: menu;
    background-color: rgba(0, 0, 0, 0.704);
    padding: 0;
}
}

/* ------ About Page ------ */
/* ------ Inspo Page ------ */
@media only screen and (max-width: 800px){
#gallery{
    grid-area: gallery;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:1.5rem;
    width: 100%;
}
}

/* ------ Pricing Page ------ */
/* ------ Contact Us Page ------ */
@media only screen and (max-width: 1109px){
    #contact-main #theForm label{
       text-align: left;
   }
}
@media only screen and (max-width:770px){
   #contact-main{
       flex-direction: column;
       align-items: center;
       paddding: 30px 10px;
       gap: 30px;
   }
   #contact{
       width: 100%;
       max-width: 700px;
   }
       #contact-main #theForm label{
       text-align: right;
   }
    }
@media only screen and (max-width: 554px){
    #contact-main #theForm label{
       text-align: left;
   }
}
    
@media only screen and (max-width: 430px){
    #contact-main #theForm #comments{
        min-width:300px;
        max-width:300px;
    }
    #contact-main #theForm input, #contact-main #theForm select{
        max-width: 300px;
    }
    div.one {
	text-align: left;
	font-size: 16px;
	max-width: 300px;
}
}
/* ------ Error 404 Page ------ */