@import "reset.css";

:root {
    --light-grey: #F0F0F0;
    --medium-grey: #5C5C5C;
    --dark-grey: #343434;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Medium.ttf");
}

/*** GENERAL ***/

body {
    font-family: "Roboto",sans-serif;;
    font-size: 1rem;
}

.line {
   display:block;
   width: 8rem;
   height: 2px;
   background-color: #343434;
   margin: 1rem auto;
}

/*** HEADER ***/

.header , .header nav ul {
    display: flex;
}

.header {
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    max-width: 50rem;
    margin: 0 auto;
}

.header nav ul {
gap: 2rem;
}

.header h1 , .header nav {
    text-transform: uppercase;
    color: var(--medium-grey); 
    font-size: 60%;
}

/*** HERO ***/

.hero {
    min-height: 100vh;
    background-image: url("../img/home-bg.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: var(--light-grey);
    text-transform: uppercase;
}

.hero p {
    font-size: 1.5rem;
    filter: brightness(0.8);
    letter-spacing: 0.3rem;
}

.hero span {
    display: block;
    font-size: 2rem;
}

.hero button {
background-color: transparent;
padding: 0.8rem 2.2rem;
outline: none;
border: 1px solid var(--light-grey);
margin-top: 1rem;
}

/*** GALLERY ***/

.gallery {
    max-width: 50rem;
    margin: 6rem auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 10% 1fr 1fr;
    grid-template-areas: 
    "header header header"
    "prawn bakery salad"
    "vegetables bakery pizza";
    row-gap: 2rem;
    column-gap: 2rem;
}

.gallery-header {
    grid-area: header;
    justify-self: center;
}

.gallery-prawn {
    grid-area: prawn;
}

.gallery-vegetables {
    grid-area: vegetables;
}

.gallery-bakery {
    grid-area: bakery;
}

.gallery-salad {
    grid-area: salad;
}

.gallery-pizza {
    grid-area: pizza;
}

/*-- MENU --*/
.special-menu {
   background-color: #F0F0F0 ;
   color: #343434;
   text-align: center;
   padding-top: 2rem;;
}

.special-menu-content {
   max-width: 800px;
   margin: 0 auto;
   display:flex;
   gap: 20rem;
   padding-left: 1rem;
}

.special-menu-1 li {
   margin-bottom: 2rem; 
}

.special-menu-1 p {
   margin-bottom: 1rem;
}

.special-menu-1 p:nth-child(2) {
   font-size: 0.9rem;
}

/*-- CONTACT --*/
.contact {
   background-color: #F0F0F0 ;
   text-align: center;
   padding: 2rem 0;
}

.contact form {
   max-width:600px;
   margin: 0 auto;
   padding-left: 1rem;
   padding-right: 1rem;
   padding-bottom: 10rem;
}

.contact form .row {
   display:flex;
   justify-content: space-between;
   gap: 2rem;
}

.contact form .row input {
   width: 100%;
   background-color: #fff;
   border: 0;
   padding: 0.6rem 2rem;  
   color:#5C5C5C;
}

.contact form textarea {
   border: 0;
   padding: 0.6rem 2rem;  
   color:#5C5C5C;
   display:block;
   margin-top :1.5rem;
   width: 100%;
   height: 18rem;
}

.contact form input[type="submit"] {
   display:block;
   margin: 1.5rem auto;
   text-transform: lowercase;
   border: 2px solid #5C5C5C;
   padding: 1rem 8rem;
   border-radius: 5px;
   background-color: transparent;
}

/*-- FOOTER --*/
footer {
   height: 25rem;
   color:#fff;
   background-color: #343434;
   text-align: center;
   display: flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
}

footer h3 {
   font-size: 1.8rem;
   text-transform:uppercase;
   margin-bottom: 1rem;
}