:root {

  --primary-light: #1a5c13;

  --primary: #15c252;

  --primary-dark: #263e0f;

  --white: #FFFFFF;

  --LightGreen-1: #3efa05;

  --Green-2: #86e87c;

  --Mint-3: #bbeb9a;

  --Viridian: #7be970;

  --darkgreen: #167a3b;

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

  margin: 0;

  padding: 0;

  box-sizing: inherit;

}
html {

  box-sizing: border-box;

  font-size: 62.5%;

  overflow-y: scroll;

  background: var(--LightGreen-1);

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

  html {

    font-size: 75%;

  }

}
.blok {
 min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

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

  background: var(--Green-2);
}
.blokclass {
  width: 25rem;
  height: 40rem;

  border-radius: 3rem;

  box-shadow: 0.8rem 0.8rem 1.4rem var(--Viridian-3), -0.2rem -0.2rem 1.8rem var(--White);

  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: 2.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(--primary), -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(--darkgreen-3);

  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(--Viridian-1) 0%, var(--primary) 50%, var(--Green-2) 100%);

  opacity: 0;

  transition: all 0.4s ease;

}

.switch input:checked ~ label::before {

  opacity: 1;

}

.switch input:checked ~ label::after {

  left: 57%;

  background: var( --primary-light);

}
.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(--Green-2), -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(--primary-dark);

}

.clock .minutes {

  width: 0.4rem;

  height: 4.6rem;

  background: var(--primary-dark);

}

.clock .seconds {

  width: 0.2rem;

  height: 5.2rem;

  background: var(--primary);

}

.clock .point {

  position: absolute;

  width: 0.8rem;

  height: 0.8rem;

  border-radius: 50%;

  background: var(--Green-2);

  z-index: 300;

}

.clock .marker {

  width: 95%;

  height: 95%;

  border-radius: 50%;

  position: relative;

  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--darkgreen-3), 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(--primary), 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(--primary), 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(--Green-2), -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(--Mint-3);

}

.textbox p {

  font-size: 0.9rem;

  margin-left: -1.8rem;

  color: var(--primary-dark);

}

.textbox__close {

  width: 1.6rem;

  height: 1.6rem;

  margin: 0 0.5rem;

  display: flex;

  font-size: 1.6rem;

  color: var(--Green-3);

  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(--Green-2), -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(--primary);

}

.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(--Viridian);

  transition: all 0.5s ease;

}

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

  color: var(--primary);

}

.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(--Violet-3), 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: 100%;

  height: 1rem;

  cursor: pointer;

  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--primary), 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(--Green-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(--Viridian), 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(--Viridian);

  background: linear-gradient(-1deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 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(--Green-2);

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

  opacity: 0;

  transition: opacity 0.3s ease;

}