<!-- Remove style checbox -->
<input type="checkbox" id="layers" checked>
<label for="layers" data-unchecked="Add Styles" data-checked="Remove Styles"></label>

<input type="checkbox" class="custom-checkbox">

html{font-size:31.25%; /* every 1rem eqal 5px */}

.custom-checkbox{width:25rem; height:25rem; transition:0.3s;}

/* 
   Styled Checkbox 
   you can remove the begining of the selector "#layers:checked ~" - 
   It's only for demonstrastion 
*/
#layers:checked ~ .custom-checkbox{
  all:unset;
  position:relative; 
  display:block; 
  box-sizing:border-box; 
  width:38rem; 
  height:20rem; 
  padding:2rem;
  border-radius:10rem; 
  background-color:rgb(var(--mistyRose));
  transition:0.2s;
  &::before{
    content:""; 
    display:block; 
    box-sizing:border-box; 
    transition:0.2s;
    width:16rem; 
    height:16rem; 
    border-radius:50%;
    border:solid 4rem rgb(var(--white)); 
    background-color:rgb(var(--rouge));
  }
  &:checked{
    background-color:rgb(var(--azureishWhite));
    &::before{
      background-color:rgb(var(--caribbeanGreen)); 
      transform:translateX(18rem);}
  }
  &:hover, 
  &:focus{
    &:not(:disabled){
      outline:none; 
      box-shadow:0 0 1px #fff, 0 0 3px #fff, 0 0 6px #0ba9ca; 
      cursor:pointer;
    }
  }
}


:root{
    --white: 255, 255, 255; /* #ffffff*/
    --mistyRose: 255, 232, 232; /* #FFE8E8 */
    --rouge: 255, 42, 43; /* #FF2A2B */
    --azureishWhite: 223, 247, 237; /* #DFF7ED */
    --caribbeanGreen: 15, 202, 128; /* #0FCA80 */
}

html{font-family:arial; background-color:#ddd;}
body{
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  height:100vh; 
  padding:0;
}




/* remove/show checkbox with styled yellow label */
input#layers{
  position:fixed; top:20px; left:15px; z-index:11;
  display:block; padding:5px; border:solid 1px rgb(136 136 136 / 0.7); border-radius:4px;
  background-color:rgb(255 221 64 / 0.8);
  margin-right:5px;
  &:checked ~ label::before{content:attr(data-checked);}
  &:not(:checked) ~ label::before{content:attr(data-unchecked);}
}
label{
  position:fixed; z-index:10; left:10px; top:10px;
  display:block; padding:10px; padding-left:30px; border-radius:4px;
  background-color:rgb(255 221 64 / 0.8); font-size:3.5rem;
}


.twitterLink{width:10rem; height:10rem; font-size:4rem;}