/* TODO: Replace title svg with text and import font from Google Fonts
More info here: https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file */

body {
  font-family: sans-serif;
  margin: 0;
  background: #151718;
  color: #ffffff;
}

.lightTheme {
  background: #ffffff;
  color: #151718;
}

/* Changes the correctColor gradient to dark/black */
/* .correctColorDark {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 100%
  ) !important;
} */

#header {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7%;
  margin-top: 2%;
  width: 165px;
  height: 42px;
  align-items: center;
}

#logo {
  position: relative;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: -3px;
  margin-right: 3px;
  width: 32px;
  height: 32px;
}

#title {
  font-family: "Asap";
  font-style: normal;
  font-weight: 700;
  font-size: 37px;
  line-height: 42px;
  display: inline-block;
  /* align-items: center; */
  /* text-align: center; */
  color: #535458;
  margin: 0px;
}

#themeToggle {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 15px;
  top: 15px;
  color: grey;
  background: none;
  border: none;
  transform: scale(1);
  transition: all 0.5s;
}

#themeToggle:hover {
  transform: scale(1.2);
}

#themeIcon {
  color: grey;
  width: 25px;
  height: 25px;
  transform: scale(1);
  transition: all 0.5s;
}

#themeIcon.animate {
  color: grey;
  transform: scale(0);
}

.transform-active {
  /* background-color: blue;
  animation-name: darkToLight;
  animation-duration: 1s; */
  color: #151718;
}

.transform {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}

/* @keyframes darkTolight {
  0% {
    color: #ffffff;
  }
  100% {
    color: #151718;
  }
} */

/* #previewId {
  width: 100px;
  height: 100px;
  background-color: var(color);
  border: solid black;
} */

/* correctColor gradient */
/* #correctColor {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 25%;
  background-color: var(color);
  margin: auto;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1) 100%
  );
  z-index: -1;
} */

#topColors {
  width: 275px;
  margin: auto;
}

#correctColor {
  display: inline-block;
  position: relative;
  width: 125px;
  height: 125px;
  border-radius: 8px;
  margin-left: 10px;
}

#previewAll {
  background-color: rgb(127, 127, 127);
  display: inline-block;
  position: relative;
  width: 125px;
  height: 125px;
  border-radius: 8px;
  order: 1;
  margin-right: 10px;
}

#redContainer,
#greenContainer,
#blueContainer {
  display: auto;
  justify-content: center;
  margin: auto;
  width: 275px;
}

#sliderRed,
#sliderGreen,
#sliderBlue {
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #323337;
  width: 275px;
  height: 30px;
  top: 100px;
  border-radius: 8px;
  margin: auto;
  margin-top: 5%;
  filter: drop-shadow(0px 15px 25px #000000);
}

#sliderRed::-webkit-slider-thumb,
#sliderGreen::-webkit-slider-thumb,
#sliderBlue::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #535458;
  cursor: pointer;
  border-radius: 8px;
}

#currentRed,
#currentGreen,
#currentBlue,
#ratingRed,
#ratingGreen,
#ratingBlue {
  display: inline-block;
  position: relative;
}

#previewRed,
#previewGreen,
#previewBlue {
  display: inline-block;
  position: relative;
  width: 203px;
  height: 78px;
  /* background-color: var(color); */
  /* border: solid black; */
  border-radius: 8px;
  margin: auto;
  z-index: -1;
}

#previewRed {
  background-color: rgb(255, 0, 0);
}

#previewGreen {
  background-color: rgb(0, 255, 0);
}

#previewBlue {
  background-color: rgb(0, 0, 255);
}

.buttonContainer {
  display: flex;
  justify-content: center;
}

#submitButton {
  position: fixed;
  width: 112px;
  height: 36px;
  bottom: 4%;
  border: 2px solid;
  border-radius: 8px;
  transition: all 0.3s ease 0s;
}

#submitButton:hover {
  position: fixed;
  width: 112px;
  height: 36px;
  bottom: 4%;
  border: 2px solid;
  border-radius: 8px;
  filter: drop-shadow(0px 10px 15px #8dc9c980);
  transform: translateY(-5px);
}

#submitButton:active {
  position: fixed;
  width: 112px;
  height: 36px;
  bottom: 4%;
  border: 2px solid;
  border-radius: 8px;
  filter: drop-shadow(0px 10px 15px #8dc9c980);
  transform: translateY(-1px);
}