/* CSS Reset/Normalize */
body {
  box-sizing: border-box;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #FCFCFC;
}

/* TYPOGRAPHY */

.hexcode-text {
  font-size: clamp(0.75rem, 0.3889rem + 1.4815vw, 1.5rem);
  font-family: sans-serif;
  text-transform: uppercase;
  color: #374151;
  letter-spacing: 1px;
  margin: 0;
  cursor: default;
}

#color-scheme, #generate-colors-btn, i {
  font-size: clamp(0.75rem, 0.5457rem + 0.8381vw, 1.3rem);
  color: #374151;
}

#floating-text {
  font-size: clamp(2rem, 1.7593rem + 0.9877vw, 2.5rem);
  color: #374151;
  margin: 0;
}

/* BUTTONS */

#generate-colors-btn {
  background: white;
  border: solid 1px #D1D5DB;
  border-radius: 3px;
  padding: 1rem 0.5rem;
  cursor: pointer;
}
  
/* LAYOUT */

/* header */
#container {
  flex-grow: 1;
  padding: clamp(1rem, 0.5185rem + 1.9753vw, 2rem);
  max-width: 800px;
  overflow: hidden;
}

#border-container {
  border: solid 8px #374151;
  border-radius: 10px;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 1rem 0.5rem;
}

#color-picker {
  width: 67px;
  height: 52px;
  background: #E5E5E5;
  border: none;
}

#select-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#color-scheme {
  border: solid 1px #D1D5DB;
  background: white;
  appearance: none;
  padding: 1rem clamp(2.5rem, -0.1481rem + 10.8642vw, 8rem) 1rem 0.5rem;
  border-radius: 3px;
}

#icon-container {
  position: absolute;
  right: 10px;
  pointer-events: none;
}

/* color bars */
main {
  display: grid;
  grid-template: repeat(5, 1fr) / 1fr;
  height: 65vh;
  width: 100%;
  position: relative;
}

.color-hexcode-container {
  display: flex;
}

.color-bar {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 80%;
}

.hexcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
}

/* welcome text */
#floating-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* MEDIA QUERIES */

@media (min-width: 650px) {
main {
    grid-template: 1fr / repeat(5, 1fr);
  }

  .color-hexcode-container {
    flex-direction: column;
  }

  .hexcode-container, .color-bar {
    width: 100%;
  }

  .color-bar {
    height: 100%;
    align-items: end;
  }

  .hexcode-text {
    padding: 1rem;
  }
}