@import url('reset.css');

:root{
  --golden: #cca43e;
  --dark:#363636;
  --darkblueish:#374151;
  --almostwhite:#e2e2e7;
  --darklayer:rgba(0,0,0,0.4);
  --goldenlayer:rgba(204,164,59,0.3);
}


/*
*     NAV SECTION
*/
nav{
  display:flex;
  justify-content:space-between;
  height:100px;
  align-items:center;
  background-color:var(--dark);
}
nav ul{
  display:flex;
  justify-content: space-around;
  margin-right:100px;
}
.brand{
  margin-left:100px;
  font-size:65px;
  text-decoration: none;
  font-family: Alex Brush, Open Sans, sans-serif;
  color:var(--golden);
}
nav ul li{
  display:block;
  padding: 10px 15px;
}
nav ul li a{
  text-decoration:none;
  color:var(--almostwhite);
  font-family:open sans, sans-serif;
  font-size:24px;
}
nav ul li a:hover{
  color:var(--golden);
}
.active{
  color:var(--golden);
}
/*
*     GENERAL CSS
*/
.full-image{
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
  height:800px;
}
.layer{
  text-align:center;
  height:100%;
  background-color:var(--darklayer);
  width:100%;
  display:flex;
  align-items:center;
}
.content{
  text-align:center;
  height:800px;
  width:1440px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
}
.content-wrapper{
  max-width:480px;
  margin:auto;
}
.wrapper{
  margin:auto;
}
.golden{
  color:var(--golden);
  font-size:36px;
  font-family:Alex Brush, Open Sans, sans-serif;
  text-shadow: 0 0 1px var(--golden);
}
.xlarge-font{
  font-size:190px;
}
.medium-font{
  font-size:90px;
}
.golden-border{
  border:solid var(--golden) 3px;
  text-align:center;
  font-size:21px;
  font-family:Open Sans, sans-serif;
  font-weight:600;
  width:240px;
  height:55px;
  color:var(--golden);
  background-color:rgba(0,0,0,0);
}
.golden-border:focus{
  outline:none;
}
.golden-border:hover{
  background-color:var(--goldenlayer);
}
.sub{
  font-family: Open Sans, sans-serif;
  font-weight:800;
  font-size:36px;
  color:var(--almostwhite);
}
.ast{
  margin-top:15px;
}
.lorem{
  font-family:Open Sans, san-serif;
  font-size:18px;
  max-width:360px;
  margin: 25px auto;
  line-height: 30px;
}
.light-bg{
  background-color:var(--almostwhite);
  color:var(--darkblueish);
}
.light-bg .sub{
  color:var(--darkblueish);
}
.dark-bg{
  background-color:var(--darkblueish);
  color:var(--almostwhite);
}
/*
*     GENERAL CSS
*/
/*
*     WELCOME SECTION
*/
.welcome{
  background-image: url("../images/table_tools.jpeg");
}
.semi-detail{
  color:var(--almostwhite);
  font-family: Open Sans,sans-serif;
  font-size: 18px;
  font-style:italic;
  margin-top: 10px;
}
/*
*     RECIPE SECTION
*/
.recipe{
  background-image:url("../images/ingridients.jpg");
}
/*
*    PAUSE SECTION
*/
.pause{
  background-image:url("../images/chef.jpeg");
}
/*
*    STORIA SECTION
*/
.single img{
  max-width:620px;
  border-radius:15px;
}
/*
*    MENU SECTION
*/
.grid4 {
  display:grid;
  grid-template-columns:1fr 1fr;
  width:600px;
  height:400px;
}
.grid4 img{
  display:inline-block;
  width:300px;
  height:200px;
  margin:0;
  padding:0;
}
/*
*    RESERVE SECTION
*/
.grid2{
  display:grid;
}
.grid2 img{
  width:300px;
  height:200px;
}
/*
*    FOOTER SECTION
*/
footer{
  background-color:var(--dark);
  color:var(--almostwhite);
  font-family:Open Sans, sans-serif;
  display: flex;
  justify-content:space-around;
  align-items:center;
  height:300px;
  text-align:center;
}
footer h3{
  font-size:24px;
  font-weight:600;
  margin-top:60px;
  align-self:start;
}
.footer-content-wrapper{
  height:100%;
}
.footer-flex{
  margin-top: 30px;
  display:flex;
  flex-flow:column;
  justify-content:space-around;
  align-items: center;
  height:150px;
}
.hour-flex{
  display:flex;
  width:300px;
  justify-content:space-around;
}
.hour-flex p{
  line-height: 25px;
}
.arrow a{
  font-size:90px;
  color:var(--almostwhite);
  text-decoration:none;

}
/*
*   ANIMATION
*/

.golden{
  transform:translateY(50%);
  opacity:0;
  scale:0.75;
  transition: all 500ms linear 500ms;
}
.inView{
  transform:translateY(0%);
  opacity:1;
  scale:1;
}
.content-wrapper{
  transition: all 700ms linear 500ms;
  opacity:0;
}
.sub{
  opacity:0;
  transition:all 700ms linear 500ms;
}
.faded{
  opacity:1;
}