body{
    background-color:#fff;
    color:#755234;
    font-family: "Inter", sans-serif;
}
h1, h2, h3{
    font-family:"Libre Baskerville", serif;
}
nav{
  gap: 2rem;
  position:relative;
  z-index:1000;
}
header{
    display:flex;
    flex-direction:row;
}
header img{
    width:100px;
    height:auto;
}
nav{
    display:flex;
    flex-direction:row;
    background-color:#fef0d0;
    margin-left:2rem;
    justify-content: center;
    align-items: center;
    padding:.5rem;
}
nav a{
    color:#755234;
    text-decoration:none;
    font-size:12px;
}
nav a:hover{
    color:#573208;
}
.main{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.one{
    width:500px;
    height:auto;
    gap: 0;
    margin-bottom:-100px;
    margin-top:-125px;
}
.main h1{
    color:#755234;
    margin-bottom: -15px;
    font-weight: lighter;
}
.main p{
    font-size: smaller;
}
.display{
    width:450px;
    height:600px;
}
.dis{
    background-color: #755234;
    width:500px;
    height:650px;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}
footer{
    background-color:#876029;
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    width:500px;
    margin-top:30px;
}
footer img{
    width:50px;
    height:50px;
    margin:3px;
    padding:10px;
}
.two{
    width: 250px;
    height:auto;
    margin-top:-60px;
    margin-bottom:-50px;
}
.about{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.old{
    width:500px;
    height:auto;
    margin-top:2rem;
}
.about p{
    background-color:#ecd3a0;
    padding:1rem;
    text-align:center;
}
.about h1{
    font-weight: lighter;
    margin-bottom:-25px;
    text-align: center;
}
.menu h1{
    text-align:center;
    font-weight: lighter;
    font-size: 50px;
}
.drinks h2{
    font-weight: lighter;
    grid-column:1;
    grid-row:1;
}
.drinks h3{
    margin-bottom:0.4rem;
    font-weight: lighter;
    margin:0;
}
.drinks ul{
    margin-top:0;
    padding-left:1.2rem;
}
.drinks li{
    margin-bottom:0.3rem;
    font-size: 10px;
}
.drinks{
    display:grid;
    grid-template-columns: 160px 1fr 160px;
    grid-template-rows: auto 120px auto;
}
.drinks img{
    width:150px;
    height:250px;
    grid-column: 1;
    grid-row:2 / 4;
}
.seasonal{
    grid-column:2;
    grid-row:2;
    gap:0;
    align-self:start;
}
.coffee{
    grid-column:2;
    grid-row:3;
    align-self: start;
}
.tea{
    grid-column:3;
    grid-row:2;
    align-self:start;
}
.desserts{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:auto auto auto;
}
.desserts li{
    font-size: 10px;
}
.desserts img{
    width:200px;
    height:auto;
    grid-column: 3;
    grid-row:2 / 4;
}
.seasonald{
    grid-column:2;
    grid-row:2;
}
.bread{
    grid-column:2;
    grid-row:3;
}
.pastries{
    grid-column:1;
    grid-row:2;
}
.cookies{
    grid-column:1;
    grid-row:3;
}
.desserts h2{
    grid-column:3;
    grid-row:1;
    font-weight: lighter;
}
.desserts h3{
    font-weight: lighter;
    margin:0;
    text-align: right;
}
.three{
    width:500px;
    height:auto;
    margin-bottom:-100px;
}
.loc h1{
    text-align: center;
    font-size:60px;
    font-weight: lighter;
}
.loca img{
    width: 200px;
    height:auto;
    grid-column: 1;
    grid-row: 1;
}
.loca p{
    grid-column: 2;
    grid-row: 1;
}
.loca{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}
.locat{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}
.locat p{
    grid-column: 2;
    grid-row: 1;
}
.locat img{
    width: 200px;
    height:auto;
    grid-column: 1;
    grid-row: 1;
}
.four{
    width:500px;
    height:auto;
}
.five{
    width:200px;
    height:auto;
}
.work{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.work h1{
    font-weight: lighter;
    margin-top:-30px;
    font-size: 40px;
}
.w1{
    width:400px;
    height:auto;
}
.work p{
    font-size:30px;
}
.w2{
    width:300px;
    height:auto;
}
.add-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #fef0d0;
  color: #573208;
  text-decoration: none;
  border-radius: 6px;
  transition: 0.2s;
  margin-bottom:1rem;
}
.add-button:hover {
  background-color: #ecd3a0;
}
@media (min-width:760px){
    footer{
        width:1300px;
    }
    .olive{
        display:grid;
        grid-template-columns: 700px 700px;
        grid-template-rows: auto;
    }
    .main{
        grid-column: 1;
        grid-row: 1;
        margin-top:100px;
    }
    .dis{
        grid-column: 2;
        grid-row: 1;
        margin-top:-70px;
    }
    .main h1{
        font-size: 50px;
        font-weight:lighter;
    }
    .about{
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .sha{
        grid-column: 2;
        grid-row: 1;
        margin-top:-100px;
    }
    .about h1{
        margin-left:3rem;
    }
    .about img{
        grid-column: 1;
        grid-row: 2;
        margin-left:1rem;
    }
    .about p{
        grid-column: 2;
        grid-row:2;
        margin-right:3rem;
    }
    .loca img, .locat img{
        padding:1rem;
    }
    .loca, .locat{
        grid-template-columns: 250px 500px;
        align-items: end;
    }
    .loca p, .locat p{
        text-align:start;
    }
    .image{
        display:flex;
        flex-direction: row-reverse;
    }
    .four{
        width:200px;
        height:auto;
        margin-top:-50px;
    }
    .work{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto 100px;
    }
    .work h1, p, form{
        grid-column:2;
        text-align: center;
        padding:1rem;
    }
    .w1{
        grid-column: 1;
    }
    .w2, .five{
        grid-column: 3;
    }
    .work h1, p, form{
        grid-row: 2;
    }
    .w1{
        grid-row: 2 / 4;
        margin-top:-240px;
    }
    .w2{
        grid-row: 1 / 3;
        margin-top:-50px;
        width:400px;
    }
    .five{
        grid-row: 4;
        margin-left:50px;
    }
    form{
        margin-top:125px;
    }
    .menu{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .drinks{
        grid-column: 1;
    }
    .seasonal, .coffee, .tea{
        display:flex;
        flex-direction: column;
        align-content: start;
    }
    .tea{
        margin-left:-190px;
    }
    .desserts{
        grid-column: 2;
    }
    .seasonald, .pastries, .cookies, .bread{
        display:flex;
        flex-direction: column;
        align-content: end; 
    }
    .seasonald h3, .pastries h3, .cookies h3, .bread h3{
        text-align:start;
    }
    .menu h1{
        text-align:center;
    }
}