:root {
  
  /* Light mode */
  

--light-text: #222430;
  --light-bg: #F7F7F7;
  --light-theme: #8D45F2;

    

  /* Dark mode */
  

--dark-text: #C7C7C7;
  --dark-bg: #222430;
  --dark-theme: #BD93F9;

  

  /* Sepia */
  

--sepia-text: #3C3528;
  --sepia-bg: #7B6E57
;
  --sepia-theme: #C1AE8A;

 
   /* Crimson */
  

--crimson-text: #FBF4DF;
  --crimson-bg: #490B0F;
  --crimson-theme: #EC5564;


  /* Gamer */
  

--gamer-text: #00D604;
  --gamer-bg: #004433;
  --gamer-theme: #D4FF14;


  /* Bluescreen */
  

--bluescreen-text: #FFEBFF;
  --bluescreen-bg: #00196B;
  --bluescreen-theme: #DA4EDA;


  /* Caution Sign Yellow */
  

--caution-text: #6D5803;
  --caution-bg: #fef964;
  --caution-theme: #6D5803;


  /* MAKE MY EYES BEG FOR MERCY */
  

--begformercy-text: #FF0F0F;
  --begformercy-bg: #000055;
  --begformercy-theme: #6BFF6B;


  /* Purple */
  

--purple-text: #FCF5FC;
  --purple-bg: #42002E;
  --purple-theme: #DB57DB;

 
   
 
  /* Default mode */


--switch-shadow-color: var(--light-switch-shadow);
  --switch-icon: var(--light-switch-icon);
  --switch-text: var(--light-switch-text);
  --text-color: var(--dark-text);
  --bg-color: var(--dark-bg);
  --theme-color: var(--dark-theme);
}



/* Light mode */


#theme-switch1:checked ~ #page {
  --text-color: var(--light-text);
  --bg-color: var(--light-bg);
  --theme-color: var(--light-theme);
}



/* Sepia */


#theme-switch3:checked ~ #page {
  --text-color: var(--sepia-text);
  --bg-color: var(--sepia-bg);
  --theme-color: var(--sepia-theme);
}



/* Crimson */


#theme-switch4:checked ~ #page {
  --text-color: var(--crimson-text);
  --bg-color: var(--crimson-bg);
  --theme-color: var(--crimson-theme);
}

/* Gamer */


#theme-switch5:checked ~ #page {
  --text-color: var(--gamer-text);
  --bg-color: var(--gamer-bg);
  --theme-color: var(--gamer-theme);
}

/* Bluescreen */


#theme-switch6:checked ~ #page {
  --text-color: var(--bluescreen-text);
  --bg-color: var(--bluescreen-bg);
  --theme-color: var(--bluescreen-theme);
}

/* Caution Sign Yellow */


#theme-switch7:checked ~ #page {
  --text-color: var(--caution-text);
  --bg-color: var(--caution-bg);
  --theme-color: var(--caution-theme);
}

/* MAKE MY EYES BEG FOR MERCY */


#theme-switch8:checked ~ #page {
  --text-color: var(--begformercy-text);
  --bg-color: var(--begformercy-bg);
  --theme-color: var(--begformercy-theme);
}

/* Purple */


#theme-switch9:checked ~ #page {
  --text-color: var(--purple-text);
  --bg-color: var(--purple-bg);
  --theme-color: var(--purple-theme);
}






/* Theme switcher */


.theme-switch { /* Hides the radio buttons */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}



.switch-label {
  background: #dcdcac;
  border: 4px solid #111111;
  border-radius: 5px;
  color: #222430;
  cursor: pointer;
  display: inline-block;
  font-size: 1.25em;
 margin: 20px 0 20px 20px;
  padding: 8px 12px;
  transition: box-shadow .2s, border .2s;
}



.theme-switch:focus + .switch-label,
.switch-label:hover{
  box-shadow: 0 0 10px #20f1e7;
  border: 3px solid #20f1e7;
  border-radius: 5px;
}



/* Styling */


html,
body {
margin: 0;
  padding: 0;
  height: 100%; background-color: #665566;

}



#page {font-size: 1.5em; padding: 2em; letter-spacing: 0.1em;}



main { background: var(--bg-color);
  color: var(--text-color); transition: color .2s, background-color .2s;
 margin: auto;
 min-height: 100%; max-width: 60ch;
  padding: 2ch; 
 border: 1em double var(--text-color);
 border-style: double dashed double dashed;}



a {
  color: var(--theme-color);
}



footer {
  padding: 1em 0;
  margin: 3em 0;
  border-top: 1em dashed #111; font-size: 2em;}

footer p {

color: #111; margin-left: 1em;
}

.style-options {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}