style.css

* {
  font-family: 'Alata', sans-serif;
  margin: 0px;
  padding: 0px;
}

body {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* flex: 1 0 auto; */


  position: relative;
  width: 100vw;
  min-height: 100vh;
  cursor: pointer;
}

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

}

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

}

@media only screen and (max-width: 375px) {
  
}

#loader{
  margin: 0px;
  padding: 0px;
  z-index: 99;
  
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  max-width: 100vw;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: #8A2BE280;

  overflow: hidden;
}

@media only screen and (max-width: 1024px) {
  #loader-graphic {
    height: 400px;
    width: 400px;
    object-fit: cover;
  }
}

@media only screen and (max-width: 768px) {
  #loader-graphic {
    height: 325px;
    width: 325px;
    object-fit: cover;
  }
}

@media only screen and (max-width: 375px) {
  #loader-graphic {
    height: 250px;
    width: 250px;
    object-fit: cover;
  }
}


.body-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  max-width: 100%;
  padding: 50px 25px;
  text-align: center;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

}

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

}

@media only screen and (max-width: 375px) {
  .body-section {
    padding: 25px 10px;
  }
}

/*  */


#hero {
  justify-content: flex-end;
  min-height: 90vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url('https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/j-v42-bb-beer-01-doodles_1.jpg?bg=transparent&con=3&cs=srgb&dpr=1&fm=jpg&ixlib=php-3.1.0&q=80&usm=15&vib=3&w=1300&s=5b56f990860fdaf7fe282c298ad7b517');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.hero-copy, .results-copy {
  color: white;
  margin-bottom: 10px;
  font-size: clamp(20px, 4vw, 30px);
}

#hero-title {
  display: block;
  margin-bottom: 0px;
  font-weight: bold;
  font-size: clamp(60px, 16vw, 120px);
}

#hero-subtitle, #results-title {
  margin-bottom: 10px;
  font-size: clamp(40px, 8vw, 60px);
}

.hero-search-module {
  display: flex;
  align-items: space-evenly;
  /* justify-content: space-evenly; */
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  margin-bottom: 10vh;

  
}

@media only screen and (max-width: 1024px) {
  .hero-search-module {
    flex-direction: column;
    align-items: center;
  }
}

@media only screen and (max-width: 768px) {
  .hero-search-module {
    flex-direction: column;
    align-items: center;
  }
}

@media only screen and (max-width: 481px) {
  .hero-search-module {
    flex-direction: column;
    align-items: center;
  }
}

@media only screen and (max-width: 375px) {
  .hero-search-module {
    flex-direction: column;
    align-items: center;
  }
}

.hero-search-field {
  height: 100px;
  width: 25%;
  padding: 10px;
  margin: 10px;
  background-color: white;
  border: 5px solid #8A2BE2;
  color: gray;
  font-size: clamp(18px, 2vw, 20px);
  vertical-align: middle;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media only screen and (max-width: 1024px) {
  .hero-search-field {
    height: 100px;
    width: 90%;
  }
}

@media only screen and (max-width: 768px) {
  .hero-search-field {
    height: 100px;
    width: 90%;
  }
}

@media only screen and (max-width: 481px) {
  .hero-search-field {
    height: 75px;
    width: 90%;
  }
}

@media only screen and (max-width: 375px) {
  .hero-search-field {
    height: 75px;
    width: 90%;
  }
}

#submit-button {
  height: 100px;
  padding: 10px;
  margin: 10px;
  border-radius: 12px;
  background-color: #8A2BE2;
  border-color: white;
  color: white;
  font-size: clamp(24px, 4vw, 36px);
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media only screen and (max-width: 1024px) {
  #submit-button {
    height: 100px;
    width: 90%;
  }
}

@media only screen and (max-width: 768px) {
  #submit-button {
    height: 100px;
    width: 90%;
  }
}

@media only screen and (max-width: 375px) {
  #submit-button {
    height: 75px;
    width: 90%;
  }
}


#submit-button:hover {
  background-color: orange;
}

.invalid {
  border: 5px solid red;
}


/*  */


#results {
  flex-direction: column;
  background-image: linear-gradient(rgba(138, 43, 246, 0.9),rgba(138, 43, 246, 0.9)), url('https://d33wubrfki0l68.cloudfront.net/5fe28a4689cd653899c0aa5d8a9eedc35a53c7d6/8e870/assets/background/bg-swirl.png');
  color: white;
  height: 100%;
  width: 100%;
  min-height: 40vh;
  padding-top: 10vh;
  padding-bottom: 5vh;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#results-header {
  margin: 25px;
}

.results-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  
  width: 100%;
  height: 100%;
  margin: 25px 0px;
  background-color: #8A2BE2;
}

@media only screen and (max-width: 1024px) {
  .results-container {
    padding: 25px 0px;
  }
}

@media only screen and (max-width: 768px) {
  .results-container {
    padding: 25px 0px;
  }
}

@media only screen and (max-width: 375px) {
  .results-container {
    padding: 10px 0px;
  }

  .results-container div:first-child {
    margin-top: 25px;
  }
  
  .results-container div:last-child {
    margin-bottom: 25px;
  }
}

.result-card {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;


  margin: 50px;
  padding: 10px 25px;
  height: 20vw;
  min-height: 200px;
  width: 20vw;
  min-width: 200px;
  background-color: white;
  border: 5px solid orange;

  overflow: hidden;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

  .result-card {
    margin: 10px 10px 5px 10px;
    height: 25vw;
    min-height: 300px;
    width: 25vw;
    min-width: 300px;
  }

}

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

  .result-card {
    margin: 10px 10px 5px 10px;
    height: 30vw;
    min-height: 300px;
    width: 30vw;
    min-width: 300px;
  }

}

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

  .result-card {
    margin: 10px 10px 5px 10px;
    height: 70vw;
    min-height: 300px;
    width: 70vw;
    min-width: 300px;
  }

}

@media only screen and (max-width: 375px) {
  .result-card {
    margin: 10px 10px 5px 10px;
    height: 70vw;
    min-height: 300px;
    width: 70vw;
    min-width: 300px;
  }
}

.result-card a {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 25%;
  margin: 10px; 

  font-size: 20px;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  color: #8A2BE2;
}

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

}

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

}

@media only screen and (max-width: 375px) {
  .result-card a {
    height: 20%;
  }
}

.result-card img {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 50%;
  min-width: 100px;
  margin: 10px 10px 25px 10px;
  object-fit: cover;
  /* vertical-align: middle; */
}


/*  */

#footer {
  /* flex-shrink: 0; */
  justify-content: center;

  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 97;

  min-height: 10vh;
  padding: 25px 10px;
  background-color: orange;

  color: white;
  font-size: clamp(10px, 4vw, 20px);
  text-align: center;
}

@media only screen and (max-width: 1024px) {
  #footer {
    position: static;
  }
}

@media only screen and (max-width: 768px) {
  #footer {
    position: static;
  }
}

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

  #footer {
    position: static;
    background-image: linear-gradient(rgba(255, 165, 0, 0.9),rgba(255, 165, 0, 0.9)), url('https://cdn.myportfolio.com/183b704b-2705-4963-b7b3-51b96a1f88a5/9923e538-fe96-477b-bc20-0cf67c390b9b_rwc_0x22x1651x1238x1651.png?h=c4b33a0804311634acf5fbdea972e631');
    text-align: left;
  }

}

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

  #footer {
    position: static;
    /* bottom: calc(25px-10vh); */
    z-index: 0;
    background-image: linear-gradient(rgba(255, 165, 0, 0.9),rgba(255, 165, 0, 0.9)), url('https://cdn.myportfolio.com/183b704b-2705-4963-b7b3-51b96a1f88a5/9923e538-fe96-477b-bc20-0cf67c390b9b_rwc_0x22x1651x1238x1651.png?h=c4b33a0804311634acf5fbdea972e631');
    text-align: left;
  }
 
  
}

#footer-copy {
  padding: 0px 10px;
}


/*  */

#results-hidden {
  display: none;
}

#loader-hidden {
  display: none;
}

#loader-graphic-hidden {
  display: none;
}

.hidden {
  display: none !important;
}

#hidden {
  display: none !important;
}

.no-scroll {
  overflow: hidden;
}