/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */ :root {
  /*WHITE*/
  --white-bg-color: #fff;
  --white-text-color: #fff;
  /*BEIGE*/
  --beige-bg-color: #CFC9AB;
  --beige-text-color: #fff;
  /*OLIVE*/
  --olive-bg-color: #838b74;
  --olive-text-color: #fff;
	  /*DARK*/
  --dark-bg-color: #434343;
  --dark-text-color: #fff;
}
[type="radio"] {
  position: fixed;
  left: -9999px;
}
label {
  cursor: pointer;
}
/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-wrapper {
  transition: all 0.3s ease-in-out;
}
.color-palette {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: flex;
  grid-column-gap: 15px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10000;
}
.color-palette label {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0;
  box-shadow: 0px 0px 10px 0px #000000;
}
.color-palette label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.container {
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto;
}
[id="white"] ~ .page-wrapper [for="white"] {
  background: var(--white-bg-color);
}
[id="dark"] ~ .page-wrapper [for="dark"] {
  background: var(--dark-bg-color);
}
[id="beige"] ~ .page-wrapper [for="beige"] {
  background: var(--beige-bg-color);
}
[id="olive"] ~ .page-wrapper [for="olive"] {
  background: var(--olive-bg-color);
}
/* CHECKBOX HACK STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[type="radio"]:checked ~ .page-wrapper label::before {
  display: block;
}
/* WHITE */
[id="white"]:checked ~ .page-wrapper {
  color: var(--white-text-color);
  background: var(--white-bg-color);
}
[id="white"]:checked ~ .page-wrapper [for="white"]::before {
  background: #000;
}
[id="white"]:checked ~ .page-wrapper .wrapper {
  box-shadow: 0 2rem 4rem 0.25rem rgba(46, 43, 55, 0.575)!important;
}
[id="white"]:checked ~ .page-wrapper .wrapper .panel > .color0 {
  background-color: #627b87!important;
	  transition: all 0.3s ease-in-out;
}
[id="white"]:checked ~ .page-wrapper .wrapper .panel .image > .filter01 {
  filter: hue-rotate(0deg)!important;
	  transition: all 0.3s ease-in-out;
}
[id="beige"]:checked ~ .page-wrapper .wrapper .panel > .color2 {
  background-color: #d2c5b1!important;
	  transition: all 0.3s ease-in-out;
}

/* DARK */
[id="dark"]:checked ~ .page-wrapper {
  color: var(--dark-text-color);
  background: var(--dark-bg-color);
}
[id="dark"]:checked ~ .page-wrapper [for="dark"]::before {
  background: #000;
}
[id="dark"]:checked ~ .page-wrapper .wrapper {
  box-shadow: 0 2rem 4rem 0.25rem rgba(16, 13, 25, 0.9)!important;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .panel > .color0 {
  background-color: #111!important;
	  transition: all 0.3s ease-in-out;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .panel > .color0 h1 {
  color: #fff!important;
	  transition: all 0.3s ease-in-out;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .panel > .color0 h1::after {
  background-color: #fff!important;
	  transition: all 0.3s ease-in-out;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .panel > .color0 {
  color: #fff!important;
	  transition: all 0.3s ease-in-out;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .panel .image > .filter01 {
filter: grayscale(70%) hue-rotate(200deg) !important;
	transition: all 0.3s ease-in-out;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .panel > .color2 {
  background-color: #222!important;
	  transition: all 0.3s ease-in-out;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .panel > .color2 h2 {
  color: #fff!important;
	  transition: all 0.3s ease-in-out;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .panel > .color2 h2::after {
  background-color: #fff!important;
	  transition: all 0.3s ease-in-out;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .panel > .color2 {
  color: #fff!important;
	  transition: all 0.3s ease-in-out;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .panel > .color4 {
  background-color: #111!important;
	  transition: all 0.3s ease-in-out;
}
[id="dark"]:checked ~ .page-wrapper .wrapper .copyright {
  color: #fff!important;
	  transition: all 0.3s ease-in-out;
}

/* BEIGE */
[id="beige"]:checked ~ .page-wrapper {
  color: var(--beige-text-color);
  background: var(--beige-bg-color);
}
[id="beige"]:checked ~ .page-wrapper [for="beige"]::before {
  background: #000;
}
[id="beige"]:checked ~ .page-wrapper .wrapper {
  box-shadow: 0 2rem 4rem 0.25rem rgba(46, 43, 55, 0.575)!important;
}
[id="beige"]:checked ~ .page-wrapper .wrapper .panel > .color0 {
  background-color: #7a837e!important;
	  transition: all 0.3s ease-in-out;
}
[id="beige"]:checked ~ .page-wrapper .wrapper .panel .image > .filter01 {
  filter: hue-rotate(270deg)!important;
	  transition: all 0.3s ease-in-out;
}
[id="beige"]:checked ~ .page-wrapper .wrapper .panel > .color2 {
  background-color: #adb6be!important;
	  transition: all 0.3s ease-in-out;
}
[id="beige"]:checked ~ .page-wrapper .wrapper .panel > .color4 {
  background-color: #46494d!important;
	  transition: all 0.3s ease-in-out;
}

/* OLIVE */
[id="olive"]:checked ~ .page-wrapper {
  color: var(--olive-text-color);
  background: var(--olive-bg-color);
}
[id="olive"]:checked ~ .page-wrapper [for="olive"]::before {
  background: #000;
}
[id="olive"]:checked ~ .page-wrapper .wrapper {
  box-shadow: 0 2rem 4rem 0.25rem rgba(46, 43, 55, 0.75)!important;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .panel > .color0 {
  background-color: #CFC9AB!important;
	  transition: all 0.3s ease-in-out;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .panel > .color0 h1 {
  color: #000!important;
	  transition: all 0.3s ease-in-out;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .panel > .color0 h1::after {
  background-color: #000!important;
	  transition: all 0.3s ease-in-out;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .panel > .color0 {
  color: #000!important;
	  transition: all 0.3s ease-in-out;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .panel .image > .filter01 {
  filter: hue-rotate(250deg)!important;
	  transition: all 0.3s ease-in-out;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .panel > .color2 {
  background-color: #6d828e!important;
	  transition: all 0.3s ease-in-out;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .panel > .color2 h2 {
  color: #fff!important;
	  transition: all 0.3s ease-in-out;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .panel > .color2 h2::after {
  background-color: #fff!important;
	  transition: all 0.3s ease-in-out;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .panel > .color2 {
  color: #fff!important;
	  transition: all 0.3s ease-in-out;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .panel > .color4 {
  background-color: #6f3e3e!important;
	  transition: all 0.3s ease-in-out;
}
[id="olive"]:checked ~ .page-wrapper .wrapper .copyright {
  color: #000!important;
	  transition: all 0.3s ease-in-out;
}