@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

html {
  background: url('../images/placeholder-2.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Quicksand', sans-serif;
  color: white;
}

h1 {
  color: yellow;
}

h2 {
  color: white;
}

.action {
  margin-bottom: 26px;
}

h3 {
  color: yellow;
  margin-bottom: -14px;
}

h4 {
    color: yellow;
}

p {
  line-height: 24px;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  font-weight: bold;
}

.lists-26 {
    padding-left: 1rem;
}
.lists-26 li {
    margin-bottom: 8px;
}

.wrapper {
  min-height: 100%;
  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -150px;
}
.footer, .push {
  height: 150px;
}

header {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

#book-button:hover {
    background: green !important;
    color: yellow !important;
}

.head-image-container {
  width: 100%;
  margin-bottom: 40px;
}

#logo {
  height: 180px;
  margin-top: 40px;
}

.symbols {
  height: 30px;
  padding: 6px;
}

nav.main-nav {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

nav.drop-nav {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.grid-navigation {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 30px;
  text-align: center;
  margin-bottom: 40px;
}

.drop-grid-navigation {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 30px;
  text-align: center;
  margin-bottom: 40px;
}

img.rings {
  width: 160px;
}

main {
  width: 92%;
  max-width: 720px;
  margin: 0 auto;
}

img.product-image {
  width: 100%;
  border-radius: 20px;
}

div.product-grid {
  display: grid;
  grid-template-columns: auto;
  margin-bottom: 60px;
}

div.product-grid h2 {
  margin-top: 0;
}

div.gallery {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 10px;
  column-gap: 14px;
}

img.thumbs {
  width: 100%;
}

form {
  width: 100%;
  max-width: 500px;
  margin-bottom: 60px;
}

form label {
  color: yellow;
  margin-bottom: -10px;
  display: block;
}

form input[type=text] {
width: 94%;
border: none;
background: #f7f6f2;
padding: 10px;
margin: 0;
height: 30px;
font-size: 1em;
font-family: 'Quicksand', sans-serif;
border-radius: 20px;
}

form textarea {
width: 94%;
border: none;
background: #f7f6f2;
padding: 10px;
margin: 0;
height: 100px;
font-size: 1em;
font-family: 'Quicksand', sans-serif;
border-radius: 20px;
}

form input[type=submit] {
width: 100px;
border: none;
height: 42px;
padding: 10px;
font-size: 1em;
background: yellow;
color: green;
font-weight: bold;
font-family: 'Quicksand', sans-serif;
margin-top: 5px;
border-radius: 20px;
}

div.comments-received {
  margin-bottom: 60px;

}

footer {
  text-align: center;
  background: #27547a;
  border-top-style: solid;
  border-width: 2px;
  border-color: yellow;
}

/* Small screens */
@media only screen and (max-width: 576px) {
  /* Add styles for small screens here */



}

/* Medium screens */
@media only screen and (min-width: 576px) and (max-width: 768px) {
  /* Add styles for medium screens here */
  img.rings {
    width: 240px;

  }


}

/* Large screens */
@media only screen and (min-width: 768px) and (max-width: 992px) {
  /* Add styles for large screens here */

  img#logo {
    height: 240px;
  }

  img.rings {
    width: 220px;

  }

  .grid-navigation {
    grid-template-columns: auto auto auto;
  }

  div.product-grid {
    grid-template-columns: 70% 30%;
    column-gap: 30px;
    row-gap: 30px;
  }

  .drop-grid-navigation {
    grid-template-columns: auto auto auto;
  }



}

/* Extra-large screens */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  /* Add styles for extra-large screens here */

  img#logo {
    height: 240px;
  }

  img.rings {
    width: 220px;

  }

  .grid-navigation {
    grid-template-columns: auto auto auto;
  }

  div.product-grid {
    grid-template-columns: 70% 30%;
    column-gap: 30px;
    row-gap: 30px;
  }

  .drop-grid-navigation {
    grid-template-columns: auto auto auto;
  }

}

/* Extra-extra-large screens */
@media only screen and (min-width: 1200px) {
  /* Add styles for extra-extra-large screens here */
  img#logo {
    height: 240px;
  }


  img.rings {
    width: 220px;

  }

  .grid-navigation {
    grid-template-columns: auto auto auto;
  }

  div.product-grid {
    grid-template-columns: 70% 30%;
    column-gap: 30px;
    row-gap: 30px;
  }

  .drop-grid-navigation {
    grid-template-columns: auto auto auto;
  }


}