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

/* Box Model Hack */
/* *{
  box-sizing: border-box;
  border: 1px solid red;
}  */


body {
  background-color: #0000af ;
  color: white;
  text-align: center;
   
}

@font-face {
     font-family: 'jeopardy';
     src: url(../fonts/gyparody\ hv.ttf);
     font-style: normal;
     font-weight: 100;
}
@font-face {
     font-family: 'clue';
     src: url(../fonts/ITC\ Korinna\ Regular.otf);
     font-style: normal;
     font-weight: 100;
}
/******************************************
/* LAYOUT
/*******************************************/
img{
  display: block;
  margin: 0 auto;
  height: 17rem;
  border-radius: 5%;
}

section {
  display: flex;
  /* justify-content: space-evenly; */
  margin-top: 1rem;
  
  
   
  
}


div {
  flex-direction: row;
   
}

button {
  margin: .25rem;
   
}


/******************************************
/* ADDITIONAL STYLES
/*******************************************/
h1 {
  font-family: 'jeopardy';
  font-size: 10rem;
  margin: 0%;
}

h2,
h3 {
  font-family: 'clue';
  text-shadow: .25rem .25rem black;
  margin-top: 0%;
  margin-bottom: 0%;
  font-size: 3.5rem;
}

button {
  background-color: white;
  font-family: 'jeopardy';
  box-shadow: 1px black;
  border-radius: 5px;
  font-size: 2.5rem;
}

button:hover {
  background-color: gray;
  box-shadow: 1px black;
}

#bringItButton {
  margin-top: 1rem;
}
#buttons {
  margin-top: 1rem;
}

#imageContainer {
  width: 30%;
  margin-left: 20%;
}
#ingContainer {
  justify-content: center;
  align-content: center;
  width: 30%;
  margin-right: 20%;
}

#ingredients {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  font-family: 'clue';
  text-shadow: .15625rem .15625rem black;
  font-size: 2.5rem;
  list-style: none;
}

.hidden {
  display: none;
}


@media (max-width: 600px){
  button {
  font-size: 5rem;
  margin: .5rem;
        }
  #drinkInfo {
    flex-direction: column;
  }
  img {
    height: 25rem;
  }
  #imageContainer, 
  #ingContainer {
  display: flex;
   align-items: center;
   width: initial ;
   margin:initial ;
   margin: 0;
  }
h2 {
  text-shadow: .1875rem .1875rem black;
  font-size: 3rem;
}
h3 {
  text-shadow: .3125rem .3125rem black;
  font-size: 5rem;
}
#ingredients {
  text-shadow: .25rem .25rem black;
  font-size: 4rem;
  padding: initial;
}
h1 {
  font-size: 7rem;
  margin-bottom: 0;
}

}

@media (max-width: 992px){
  button {
  font-size: 5rem;
  margin: .5rem;
        }
  #drinkInfo {
    flex-direction: column;
  }
  img {
    height: 25rem;
  }
   #imageContainer, 
  #ingContainer {
    display: flex;
   align-items: center;
   width: initial;
   margin: 0;
  }
h2 {
  text-shadow: .1875rem .1875rem black;
  font-size: 3rem;
}
h3 {
  font-family: 'clue';
  text-shadow: .3125rem .3125rem black;
  margin-top: 0%;
  margin-bottom: 0%;
  font-size: 5rem;
}
#ingredients {
  text-shadow: .3125rem .3125rem black;
  font-size: 5rem;
  padding: initial;
}
h1 {
  font-size: 7rem;
  margin-bottom: 0;
}
}