*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

main {
  margin: 0 auto;
  width: 800px;
  font-family: Poppins, sans-serif;
}

h1 {
  text-align: center;
  font-size: 2.6rem;
}

.webapp-title, .input-container {
  margin: 3rem auto;
}


.output-container {
  border: 2px solid darkslateblue;
  min-height: 100px;
}

.swatch-container {
  margin: 5rem auto;
}

.color-main, .shade {
}

.color-main {
  height: 48px;
  width: 48px;
}

.shade {
  height: 32px;
  width: 64px;
}

.swatch, .color-container, .shade-container {
  display: flex;
  align-items: center;
}

.swatch {
  margin: 2rem auto;
  justify-content: space-between;
}

#js-output {
  margin: 0 auto;
}