:root {
    --color--1: #A68163;
    --color--2:#546957;
    --color--3:#B6C3B7;
    --color--4:#F2F0ED;
    --color--5:#2B362D;
    --color--6: red;
    --color--7: green;
    --color--8:#b6c3b7;
  }

.light-theme { background:  transparent; }
.dark-scheme { background: transparent; }

@media (prefers-color-scheme: dark) {
    .text-color { background-color: #b6c3b7; } 
}

:root .dark-scheme {
  --color--1:#221205;
  --color--2:#222b23;
  --color--3:#292b29;
  --color--4:#35240c;
  --color--5:#2B362D;
  --color--6: rgb(39, 0, 0);
  --color--7: rgb(0, 29, 0);
  --color--8:#2f312f;
}

.dark-grid {  
  display: grid;
  grid-template-columns: 60px;
  border-radius: 34px;
}



.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color--5);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--color--4);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #ccc;
  }
  
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }