/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}

/******************************************
/* LAYOUT
/*******************************************/
body {
  background-image: url("../assets/bar.jpg");
  background-size: auto;
  color: #FCF7DE;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  justify-content: space-between;
}
.drinkCard img {
  width: 80%;
  border-radius: .5em;
  margin: 1.5em 0 3em 0;
  border: .2em solid;
}

nav img {
  width: 100%;
  margin-bottom: 7em;
}

.off{
  display: none;
}

.intro {
  margin: 0 0 0 4em;
}

.drinkCard span {
  display: inline-block;
  width: 45%;
  cursor: pointer;
}

.previous {
  margin: .5em 0 1.5em .5em; 
  padding: 0 .5em;
}

.next {
  margin: .5em .5em 1.5em 0;
  padding: 0 .5em 0 2em;
}

.drinkCard {
  margin: 5em 0 0 4em;
  width: 65%;
  background-color: #7EA195;
  border-radius: 1em;
  border: .4em solid;
}

.drinkCard div {
  padding: 1.5em 3em 0;
}

main {
  width:60%;
  margin: 4em 10em 7em 3em;
}

li {
  list-style:none; 
  padding: .1em 0;
}

nav li {
  padding: .3em 0;
}
li:hover {
  cursor:pointer;
}
ul {
  padding: 0;
}

nav {
  margin: 4em 10em 0 0;
  display: flex;
  flex-direction: column;
}

h5 {
  font-size: 1.2em;
}
input, button {
  background-color: #FCF7DE;
  border: .15em solid #7EA195;
  border-radius: .2em;
  padding: .3em .7em;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/
/* 850px needs media query */