:root {

  --MediumPurple: #9370DB;

  --BlueViolet: #8A2BE2;

  --Indigo: #4B0082;

  --white: #FFFFFF;

  --MediumOrchid: #BA55D3;

  --blueLight-2: #7B68EE;

  --Pink: #FFC0CB;

  --SlateBlue: #6A5ACD;

}
*, *::before, *::after {

  margin: 0;

  padding: 0;

  box-sizing: inherit;

}
html {

  box-sizing: border-box;

  font-size: 62.5%;

  overflow-y: scroll;

  background: var(--MediumOrchid);

}
@media screen and (min-width: 300px) {

  html {

    font-size: 75%;

  }

}
.box {
  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  font-family: "Roboto", sans-serif;

  background: var(--MediumOrchid);
}
.wiget {

  width: 25rem;

  height: 40rem;

  border-radius: 3rem;

  box-shadow: 0.8rem 0.8rem 1.4rem var(--blueLight-2), -0.2rem -0.2rem 1.8rem var(--SlateBlue);

  padding: 4rem;

  display: grid;

  grid-template-columns: 17.6rem 19rem 20.4rem;

  grid-template-rows: repeat(autofit, min-content);

  grid-column-gap: 5rem;

  grid-row-gap: 3.5rem;

  align-items: center; 
    }
.switch {

  grid-column: 1/2;

  display: grid;

  grid-template-columns: repeat(2, min-content);

  grid-gap: 3rem;

  justify-self: center;

}

.switch input {

  display: none;

}

.switch__1, .switch__2 {

  width: 6rem;

}

.switch__1 label, .switch__2 label {

  display: flex;

  align-items: center;

  width: 100%;

  height: 3rem;

  box-shadow: 0.3rem 0.3rem 0.6rem var(--MediumPurple), -0.2rem -0.2rem 0.5rem var(--white);

  background: rgba(255, 255, 255, 0);

  position: relative;

  cursor: pointer;

  border-radius: 1.6rem;

}

.switch__1 label::after, .switch__2 label::after {

  content: "";

  position: absolute;

  left: 0.4rem;

  width: 2.1rem;

  height: 2.1rem;

  border-radius: 50%;

  background: var(--Pink);

  transition: all 0.4s ease;

}

.switch__1 label::before, .switch__2 label::before {

  content: "";

  width: 100%;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(330deg, var(--MediumOrchid) 0%, var(--primary) 50%, var(--BlueViolet) 100%);

  opacity: 0;

  transition: all 0.4s ease;

}

.switch input:checked ~ label::before {

  opacity: 1;

}

.switch input:checked ~ label::after {

  left: 57%;

  background: var(--SlateBlue);

}
.clock {

  grid-column: 1/2;

  grid-row: 2/2;

  width: 12rem;

  height: 12rem;

  justify-self: center;

  box-shadow: 0.3rem 0.3rem 0.6rem var(--Indigo), -0.2rem -0.2rem 0.5rem var(--white);

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

}

.clock .hand {

  position: absolute;

  transform-origin: bottom;

  bottom: 6rem;

  border-radius: 0.2rem;

  z-index: 200;

}

.clock .hours {

  width: 0.4rem;

  height: 3.2rem;

  background: var(--MediumPurple);

}

.clock .minutes {

  width: 0.4rem;

  height: 4.6rem;

  background: var(--BlueViolet);

}

.clock .seconds {

  width: 0.2rem;

  height: 5.2rem;

  background: var(--MediumOrchid);

}

.clock .point {

  position: absolute;

  width: 0.8rem;

  height: 0.8rem;

  border-radius: 50%;

  background: var(--Indigo);

  z-index: 300;

}

.clock .marker {

  width: 95%;

  height: 95%;

  border-radius: 50%;

  position: relative;

  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--blueLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);

}

.clock .marker::after {

  content: "";

  width: 60%;

  height: 60%;

  position: absolute;

  box-shadow: inset 1px 1px 1px var(--SlateBlue), inset -1px -1px 1px var(--white);

  border-radius: 50%;

  top: 20%;

  left: 20%;

  filter: blur(1px);

}

.clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 {

  position: absolute;

  border-radius: 0.1rem;

  box-shadow: inset 1px 1px 1px var(--Pink), inset -1px -1px 1px var(--white);

}

.clock .marker__1, .clock .marker__2 {

  width: 0.2rem;

  height: 0.6rem;

  left: 5.6rem;

}

.clock .marker__3, .clock .marker__4 {

  width: 0.6rem;

  height: 0.2rem;

  top: 5.6rem;

}

.clock .marker__1 {

  top: 2%;

}

.clock .marker__2 {

  top: 98%;

  transform: translateY(-0.6rem);

}

.clock .marker__3 {

  left: 2%;

}

.clock .marker__4 {

  left: 98%;

  transform: translateX(-0.6rem);

}
.textbox {

  grid-column: 1/2;

  grid-row: 10/2;

  justify-self: center;

  width: 17rem;

  height: 4rem;

  border-radius: 1rem;

  box-shadow: 0.3rem 0.3rem 0.6rem var(--MediumOrchid), -0.2rem -0.2rem 0.5rem var(--white);

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.textbox__icon {

  width: 3rem;

  height: 3rem;

  border-radius: 1rem;

  margin: 0 0 0 0.2rem;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.8rem;

  color: var(--MediumOrchid);

}

.textbox p {

  font-size: 0.9rem;

  margin-left: -1.8rem;

  color: var(--blueLight-2);

}

.textbox__close {

  width: 1.6rem;

  height: 1.6rem;

  margin: 0 0.5rem;

  display: flex;

  font-size: 1.6rem;

  color: var(--Pink);

  cursor: pointer;

}
.squarebox {

  grid-column: 1/2;

  grid-row: 15/2;

  width: 17.4rem;

  height: 4rem;

  box-shadow: 0.3rem 0.3rem 0.6rem var(--SlateBlue), -0.2rem -0.2rem 0.5rem var(--white);

  border-radius: 1rem;

  display: flex;

  align-items: center;

  position: relative;

}

.squarebox input {

  display: none;

}

.squarebox > input:checked + label {

  transition: all 0.5s ease;

  color: var(--MediumPurple);

}

.squarebox__1, .squarebox__2, .squarebox__3 {

  width: 5.8rem;

  height: 3.6rem;

  font-size: 1.4rem;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

  color: var(--BlueViolet);

  transition: all 0.5s ease;

}

.squarebox__1:hover, .squarebox__2:hover, .squarebox__3:hover {

  color: var(--Indigo);

}

.squarebox__color {

  position: absolute;

  height: 3.4rem;

  width: 6.2rem;

  margin-left: 0.3rem;

  border-radius: 0.8rem;

  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--Indigo), inset -0.2rem -0.2rem 0.5rem var(--white);

  pointer-events: none;

}



#tab-1:checked ~ .squarebox__color {

  transform: translateX(0);

  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}



#tab-2:checked ~ .squarebox__color {

  transform: translateX(4.8rem);

  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}



#tab-3:checked ~ .squarebox__color {

  transform: translateX(10.6rem);

  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

}
.slider {

  grid-column: 1/2;

  grid-row: 19/2;

  align-self: center;

  display: flex;

  flex-direction: column;

}

.slider__box {

  width: 50%;

  height: 1rem;

  cursor: pointer;

  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--MediumOrchid), inset -0.2rem -0.2rem 0.5rem var(--white);

  border-radius: 1rem;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

}

.slider__btn {

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  background: var(--white);

  position: absolute;

  box-shadow: 0px 0.1rem 0.3rem 0px var(--blueLight-2);

  z-index: 200;

  display: flex;

  justify-content: center;

  align-items: center;

}

.slider__btn:hover ~ .slider__tooltip {

  opacity: 1;

}

.slider__btn::after {

  content: "";

  position: absolute;

  width: 0.8rem;

  height: 0.8rem;

  border-radius: 50%;

  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--Pink), inset -0.2rem -0.2rem 0.5rem var(--white);

}

.slider__color {

  height: 100%;

  width: 50%;

  position: absolute;

  left: 0;

  z-index: 100;

  border-radius: inherit;

  background: var(--SlateBlue);

  background: linear-gradient(-1deg, var(--SlateBlue) 0%, var(--primary) 50%, var(--blueLight-2) 100%);

}

.slider__tooltip {

  position: absolute;

  top: 2.6rem;

  height: 2.5rem;

  width: 3rem;

  border-radius: 0.6rem;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.2rem;

  color: var(--MediumOrchid);

  box-shadow: 0.3rem 0.3rem 0.6rem var(--blueLight-2), -0.2rem -0.2rem 0.5rem var(--white);

  opacity: 0;

  transition: opacity 0.3s ease;

}