/* Setting up variables */
:root {
    --title:'Cinzel', serif;
    --info:'Lora', serif;
    --submit: #9dae47;
    --selected: #bfa6a6;
}

/* applies to everything within the HTML element from the DOM */
html {
    height: 100vh;
    width: 100vw;
  }

/* applies to everything within the body element from the DOM */
body {
    background-image: url(../images/altbg.png);
    background-repeat: repeat;
    background-size: 100%; 
}

/* header and logo both style the Mixology Matchmaker logo at the top of each screen*/
  #logo {
    text-align: center;
    padding: 7px;
    width: inherit;
  }
  
/* style the liquor selection */
  #input-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
  }
  #button-container {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  /* This is for the actual liquor selection button */
  .value-button {
    font-family: var(--info);
    background-image: linear-gradient(135deg, rgb(136, 136, 136) 0%, rgb(93, 93, 93) 100%);
    margin: 5px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    width: 50vw;
  }
  /* And what happens when you hover over one of those buttons */
  #value-button:hover {
    background-color: var(--selected);
  }

  /* keeps the styling of any page titles consistent across the site */
  #title {
    color: red;
    font-family: var(--title);
  }
  /* styles the drinks that are listed after liquor selection is made */
  #drink-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .drink-list-item {
    margin: 10px;
    padding: 10px;
    background-color: transparent;
    color: white;
    text-align: center;
    font-family: var(--info);
    font-weight: bold;
  }
  #drink-list img {
    border: 5px gray solid;
    border-radius: 50px;
  }
  .drink-name {
    color: white;
    padding: 10px;
  }

  /* styles the button that takes you to the recipe page */
  .recipe-button {
    font-family: var(--info);
    background-image: linear-gradient(135deg, rgb(136, 136, 136) 0%, rgb(93, 93, 93) 100%);
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    border: none;
    border-radius: 5px;
  }
  .recipe-button:hover {
    background-color: var(--selected);
  }

  /* styles the recipe page */
  .back-button {
    font-family: var(--info);
    font-style: uppercase;
    background-image: linear-gradient(135deg, rgb(136, 136, 136) 0%, rgb(93, 93, 93) 100%);
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    border: none;
    border-radius: 5px;
  }
  #results {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #results h2 {
    color: white;
    font-family: var(--title);
    padding: 10px;
    text-decoration: underline;
  }

  #results p {
    color: white;
    font-family: var(--info);
    padding: 30px;
  }

  #results img {
    width: 35vw;
    border: 5px gray solid;
    border-radius: 50px;
  }

  .recipe-instructions {
    color: white;
    font-family: var(--info);
    padding: 10px;
    text-align: center;
  }