*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color:#333;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: max-content auto max-content;
  width: 100vw;
  height: 100vh;
}

header {
  display: block;
  grid-row: 1 / 2;
  padding: 0 1rem;
}

/* spinner spans all rows*/
.loader {
  display: block;
  grid-row: 1 / 4;
  opacity: 0.5;
}

/* main takes the middle part of the body grid */
main {
  grid-row: 2 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  overflow-y: scroll;
  padding: 0 1rem;
  gap: 1rem;
  height: 100%;
  border-radius: 0.5rem;
}

footer {
  display: block;
  grid-row: 3 / 4;
  padding: 1rem;
}

/* main title */
header > p {
  font-size: 2rem;
  margin: 1rem 0;
}

/* columns, gap are the same as in main grid */
header > form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: max-content max-content max-content;
  gap: 1rem;
  margin: 1rem 0;
}

header > form > button,
header > form > select {
  height: 2rem;
}

/* labels on top row of the header */
label.category,
label.area,
label.ingredient {
  grid-row: 1 / 2;
}

/* select elements in the middle row */
#category,
#area,
#ingredient {
  grid-row: 2 / 3;
}

/* buttons on the bottom */
#btn-category,
#btn-area,
#btn-ingredient {
  grid-row: 3 / 4;
}

/* sections for lists */
#category-section,
#area-section,
#ingredient-section {  
  overflow-y: scroll;
  grid-row: 1 / 2;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 0 1rem;
}

/* on the left */
#category-section {
  grid-column: 1 / 2;
}

/* middle */
#area-section {
  grid-column: 2 / 3;
}

/* right */
#ingredient-section {
  grid-column: 3 / 4;
}

/* section list */
ul {
  list-style: none;
}

ul > li {
  margin: 1rem 0;
}

/* list item container */
ul > li > a > div {
  border: 1px solid #bbb;
  border-radius: 0.3rem;
  position: relative;
  border-radius: 0.25rem;
}

/* item title */
ul > li > a > div > p {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 1.5rem;
  color: whitesmoke;
  padding: 0.5rem;
  border-radius: 0 0 0.25rem 0.25rem;
  background-color: rgba(0, 0, 0, 0.5);
}

/* item thumbnail */
ul > li > a > div > img {
  border-radius: 0.25rem;
  width: 100%;
}

/* spans through all main grid rows and columns */
#modal {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  z-index: 100;
  overflow-y: scroll;
  background-color: rgba(0,0,0,0);
  padding: 5%;
  border-radius: 0.5rem;
}

/* the same as modal but padded */
.card {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  background-color: whitesmoke;
  border-radius: 0.5rem;
  padding: 1rem;
  width: 100%;
  position: relative;
  box-shadow: 0 0 30px 10px #ddd;
}

/* close button */
.card > button {
  background-color: #eee;
  padding: 1rem;
  border: none;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-radius: 0 0.5rem  0 0.5rem;
  width: fit-content;
  height: fit-content;
  position: absolute;
  right: 0;
  transition: all 300 ease-in-out;
}

.card > button:hover {
  background-color: #eee;
  box-shadow: 0 0 30px 5px #ddd;
  transform: scale(105%);
  font-size: 105%;
}

.card > button:active {
  background-color: #eee;
  box-shadow: 0 0 5px 1px #ddd;
  transform: scale(101%);
  font-size: 101%;
}

/* dish name */
.card > p:first-of-type {
  font-size: 2rem;
  padding-right: 3rem;

}

/* info */
.card > p {
  padding: 0.5rem;
}

/* main pic */
.card > img {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 1rem;
}

/* recipe */
.card > p:last-of-type {
  padding: 1rem 0;
}

/* ingredient container */
.card > div {
  position: relative;
  padding: 0.5rem 1rem;
}

/* thumbnails */
.card > div > img {
  width: 5rem;
}

/* ingredient */
.card > div > span:first-of-type {
  position: absolute;
  top: 0.5rem;
  padding-top: 1rem;
  padding-left: 1rem;
  font-style: italic;
}

/* measure */
.card > div > span:last-of-type {
  position: absolute;
  bottom: 0.5rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  font-weight: 600;
}

/* tags */
.tag {
  padding: 0 0.5rem;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  background-color: #eee;
  font-style: oblique;
  font-size: small;
}

/* links */
.card > a{
  width: max-content;
  text-decoration: none;
  margin: 0.5rem;
}

#source, #video {
  font-weight: 600;
}

#encrypt, #decrypt {
  margin: 0 0.5rem;
  padding: 0.5rem;
}


/* hide load spinner, modal */
.hide {
    visibility: hidden;
    display: none;
}

/* spinner parts */
.lds-ripple {
    position: absolute;
    width: 6rem;
    height: 6rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lds-ripple div {
    position: absolute;
    border: .2rem solid #aaa;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
  }
  
  @keyframes lds-ripple {
    0% {
      top: 3rem;
      left: 3rem;
      width: 0;
      height: 0;
      opacity: 0;
    }
    4.9% {
      top: 3rem;
      left: 3rem;
      width: 0;
      height: 0;
      opacity: 0;
    }
    5% {
      top: 3rem;
      left: 3rem;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: 0px;
      left: 0px;
      width: 6rem;
      height: 6rem;
      opacity: 0;
    }
  }
  /**********/



  @media screen and (max-width: 480px) {

      body {
        height: 100%;
      }

      header > form {
        display: flex;
        flex-direction: column;
      }

      main {
        display: flex;
        flex-direction: column;
      }

      footer {
        position: sticky;
        bottom: 0;        
      }
  }

  @media screen and (min-width: 768px) {

    .card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: max-content max-content;
    }

    .card > p:first-of-type {
      font-size: 2rem;
      padding-right: 3rem;
      grid-column: 1 / 3;
    }
    
    .card > p:nth-child(3),
    .card > p:nth-child(4),
    .card > p:nth-child(5) {
      grid-column: 1 / 2;
      height: max-content;
    }

    .card > p:last-of-type {
      padding: 1rem 1rem;
    }

    .card > img {
      grid-column: 1 / 2;
      margin-top: 1rem;
      margin-right: 1rem;
    }

    .tag {
      grid-column: 1 / 2;
    }

    .card > a{
      grid-column: 1 / 2;
    }
  }