style.css

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

:root {
  /* ### Primary */
  /* --Col-Lime-Green: hsl(163, 72%, 41%); */
  --Col-Bright-Red: hsl(356, 69%, 56%);

  /* --Col-Facebook: hsl(208, 92%, 53%); */
  /* --Col-Twitter: hsl(203, 89%, 53%); */
  /* --Col-Instagram: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); */
  /* --Col-YouTube: hsl(348, 97%, 39%); */

  /* #### Light Theme */
  --Col-Toggle: hsl(230, 22%, 74%);
  --Col-BG: hsl(0, 0%, 100%);
  --Col-BG-Pattern: hsl(225, 100%, 98%);
  --Col-Card-BG: hsl(227, 47%, 96%);
  --Col-Card-BG-hover: hsl(227, 40%, 90%);
  --Col-Text-1: hsl(228, 12%, 44%);
  --Col-Text-2: hsl(230, 17%, 14%);
  --Col-Toggle-hover: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));


  --Col-glass-dark: rgba(100, 100, 100, 0.04);
  --Col-glass-dark-border: hsla(227, 40%, 90%, 0.1);
  --Font-size: 14px;
  --Family: 'Inter', sans-serif;
  /* - Weights: 400, 700 */
}


html.is_dark {
  /* #### Dark Theme */
  --Col-Toggle: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));
  --Col-BG: hsl(230, 17%, 14%);
  --Col-BG-Pattern: hsl(232, 19%, 15%);
  --Col-Card-BG: hsl(228, 28%, 20%);
  --Col-Card-BG-hover: hsl(228, 28%, 30%);
  --Col-Text-1: hsl(228, 34%, 66%);
  --Col-Text-2: hsl(0, 0%, 100%);


  --Col-glass-dark: rgba(255, 255, 255, 0.04);
  --Col-glass-dark-border: hsla(228, 28%, 30%, 0.1);

}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: all 0.1s ease;


  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

html,
body {
  font-size: var(--Font-size);
  font-family: var(--Family);
  font-weight: 700;
  background: var(--Col-BG);
  color: var(--Col-Text-1);
  background: var(--Col-BG);
  /* z-index: -11; */
}

@keyframes rotate {
  0% {
    transform: scale(3) rotate(0deg);
  }

  25% {
    transform: scale(3.5) rotate(0deg);
  }

  50% {
    transform: scale(3.5) rotate(60deg);
  }

  75% {
    transform: scale(3) rotate(60deg);
  }

  100% {
    transform: scale(3) rotate(0deg);
  }
}

#loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  animation: rotate 3s infinite;
  background: var(--Col-BG) url(./Assets/hexagon-1.svg) center no-repeat;
}






a {
  color: var(--Col-Text-1);
  text-decoration: none;
  font-size: 1.1rem;
}

canvas {
  display: block;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 90%;
  height: 80vh;
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

header {
  position: fixed;
  width: 90%;
  top: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  padding: 1rem;
}

.left {
  /* align-self: left; */
  /* justify-self: left; */
  display: flex;
  gap: 0.8rem;
  flex-direction: column;
  justify-content: center;
}

.score-div,
.diamond-div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 1.5rem;
  line-height: 0.1;
}


.left img {
  width: 1.8rem;
}

.middle {
  align-self: left;
  justify-self: center;
  display: flex;
  gap: 0.7rem;
}

.right {
  align-self: flex-start;
  justify-self: right;

}

.hero {
  background: var(--Col-Card-BG-hover);
  border-radius: 1rem;
  max-width: 400px;
  width: 95%;
  margin: auto;
  padding: 2rem 0rem 3.5rem 0rem;
  position: absolute;
  left: 0%;
  right: 0%;
  border-radius: 2rem;
  transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1);
}

/* html.is_dark */

.hero {

  background: var(--Col-glass-dark);
  backdrop-filter: blur(40px);
  border: 4px solid var(--Col-glass-dark-border);
  background-clip: padding-box;
  box-shadow: 0 10px 50px -20px #22222230;
}

.hide {
  left: -230%;
}

.hero h1 {
  width: 100%;
  font-size: 2.5rem;
  font-weight: 700;
  padding-bottom: 1rem;
  /* border-bottom: 1.2px solid var(--Col-BG); */
  line-height: 4rem;
}

.wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.7rem;

}

.lower-hero {
  width: 100%;
  display: flex;
  gap: 1.7rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.intro {
  display: block;
}

.gameover,
.settings {
  display: none;
}

.settings .wrapper .lower-hero>div {
  min-width: 50%;
  max-width: 80%;
  margin: auto;
}

.dark-mode-div,
.theme-div {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.theme-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1000px;
  border: 0.1px solid #000;

}

.theme-btn:hover {
  transform: scale(1.5);
}

.theme-btn.applied {
  border: 3px solid var(--Col-Text-1);

}

/* colors = [
    color("#d0004e")338,
    color("#00b188")166,
    color("#0055fb")220,
    color("#ff784b")15,
    color("#d250f6")287,
    color("#7854f7")253,
    color("#ff7d7d")0,
    color("#12a5ed")200,
    color("#ffca00")48,
    color("#7ed321")89,
    color("#f5325b")347,
    color("#ff8400")31,
    color("#06c1ff")195
    ];
  // colors = [
  //   color("#e66bba")321,
  //   color("#3b3086")248,
  //   color("#ffc2c0")2,
  //   color("#fae0db")10,
  //   color("#7291f9")226
  // ];
  // colors = [
  //   color("#d07499")336,
  //   color("#f88999")351,
  //   color("#b9c4e3")224,
  //   color("#808fba")224
  // ];
  // colors = [
  //   color("#ffb997"),
  //   color("#f67e7d"),
  //   color("#843b62"),
  //   color("#0b032d"),
  //   color("#621940")
  // ]; */

#d0004e {
  background: linear-gradient(45deg,
      #ff7d7d,
      #ff784b,
      #ff8400,
      #ffca00,
      #7ed321,
      #00b188,
      #06c1ff,
      #12a5ed,
      #0055fb,
      #7854f7,
      #d250f6,
      #d0004e,
      #f5325b);
}

#e66bba {
  background: linear-gradient(45deg, #3b3086, #7291f9, #fae0db, #ffc2c0, #e66bba);
}

#d07499 {
  background: linear-gradient(45deg, #d07499, #f88999, #b9c4e3, #808fba);
}

#ffb997 {
  background: linear-gradient(45deg, #ffb997, #f67e7d, #843b62, #0b032d, #621940);
}


.btn-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}

.btn {
  transition: all 0.1s ease-in;
}

.btn:hover,
p:hover,
a:hover {
  color: var(--Col-Text-2);
  transform: scale(1.1);
}

header .middle i:hover {
  color: var(--Col-Bright-Red);
  transform: scale(1.1);
}






/* toggle css; */
.switch {
  position: relative;
  display: inline-block;
}

.switch-input {
  display: none;
}

.switch-label {
  display: block;
  width: 50px;
  height: 25px;
  text-indent: -150%;
  clip: rect(0 0 0 0);
  color: transparent;
  user-select: none;
}

.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}

.switch-label::before {
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--Col-Toggle);
  border-radius: 9999em;
  transition: all 0.25s ease;
}

.switch-label::after {
  top: 10%;
  left: 5%;
  right: 55%;
  bottom: 10%;
  border-radius: 10000px;
  background: var(--Col-Card-BG-hover);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  transition: all 0.25s ease;
}

.switch-input:checked+.switch-label::before {
  /* active color */
  background: var(--Col-Toggle);
}

.switch-input:checked+.switch-label:hover::before {
  background: var(--Col-Toggle-hover);
}

.switch-input:checked+.switch-label::after {
  /* active switch position */
  left: 55%;
  right: 5%;
}