:root { --bronze: #564D4B; --back: #e7e7e7; --links: #383440; --dirt: #555; --trackerstatus: #e6e5e3; --light: #592730; --white: #efeded; --fontlight: #e6e5e3; --fontdark: #4f484b; --fontmid: #aa936d; --grey: #dbdbdb; --highgrey: #f0f0f0; --marine: #56636E; --aqua: #3D1A17; --undead: #934e6b ; --shifter: #414453 ; --human: #ce7f54; --ghost: #879fa3; --demon: #80788d ; --elves: #7f8563 ; --witch: #5a7e64 ; --god: #6e3637 ; --stranger: #bc7837 ; --beck: #f1f1f1; --fonttime: #949494; --timeback: #dbdbdb; --evit: #A6A9AA; --pot: #C4C5C5; --ground: #C4C5C5; --bott: #C4C5C5; --cali: #d4d4d4; --black: #282828; --bullit: #efeded; --fontrisk: #e5e5e5; --paint: #400A0A;}

[data-theme="dark"] { --bronze: #564D4B; --back: #181818; --links: #9FA6A3; --dirt: #555; --trackerstatus: #e6e5e3; --light: #592730; --white: #efeded; --fontlight: #e6e5e3; --fontdark: #949494; --fontmid: #aa936d; --grey: #181818; --highgrey: #1e1e1e; --marine: #56636E; --aqua: #3A403C; --undead: #934e6b ; --shifter: #414453 ; --human: #ce7f54; --ghost: #879fa3; --demon: #80788d ; --elves: #7f8563 ; --witch: #5a7e64 ; --god: #6e3637 ; --stranger: #bc7837 ; --beck: #000; --fonttime: #949494; --timeback: #dbdbdb; --evit: #A6A9AA; --pot: #C4C5C5; --ground: #C4C5C5; --bott: #181818; --cali: #2B2B2B; --black: #282828; --bullit: #1e1e1e; --fontrisk: #e5e5e5; --paint: #f0f0f0;}
[data-theme="light"]
{ --bronze: #564D4B; --back: #e7e7e7; --links: #383440; --dirt: #555; --trackerstatus: #e6e5e3; --light: #592730; --white: #efeded; --fontlight: #e6e5e3; --fontdark: #4f484b; --fontmid: #aa936d; --grey: #dbdbdb; --highgrey: #f0f0f0; --marine: #56636E; --aqua: #3D1A17; --undead: #934e6b ; --shifter: #414453 ; --human: #ce7f54; --ghost: #879fa3; --demon: #80788d ; --elves: #7f8563 ; --witch: #5a7e64 ; --god: #6e3637 ; --stranger: #bc7837 ; --beck: #f1f1f1; --fonttime: #949494; --timeback: #dbdbdb; --evit: #A6A9AA; --pot: #C4C5C5; --ground: #C4C5C5; --bott: #C4C5C5; --cali: #d4d4d4; --black: #282828; --bullit: #efeded; --fontrisk: #e5e5e5; --paint: #400A0A;}

:root { --hgrey: #f6f6f6; --dgrey: #dbdbdb; --crea: #856a6a; --slavefont: #f6f6f6; --untot: #934e6b ; --wandler: #414453 ; --mensch: #ce7f54; --geist: #879fa3; --damon: #80788d ; --elf: #7f8563 ; --hexe: #5a7e64 ; --gott: #6e3637 ; --fremder: #bc7837 ; }  
#slave-head { width: 350px; height: 170px; float: left; margin-top: 10px;} 
.slave-pic { width: 150px; height: 94px; float: left; margin-top: 25px; margin-left: 10px; background-color: var(--crea);} 
.slave-name { width: 180px; height: 100px; margin-top: 25px; float: left; color: var(--slavefont) !important;} 
.slave-nameh { font-size: 18px; font-weight: bold;  text-transform: uppercase;  color: var(--slavefont); padding-left: 10px; padding-top: 10px;  font-family: 'Lato', sans-serif; letter-spacing: 2px; text-align: left; line-height: 19px; } 
.slave-namek { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--slavefont); font-family: 'Lato', sans-serif; padding-left: 10px;  line-height: 10px; text-align: left !important; } 
.slave-quote { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--slavefont); font-family: 'Lato', sans-serif; padding-left: 10px; margin-top: 5px; line-height: 10px;} 
#slave-head b { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--slavefont); font-family: 'Lato', sans-serif; padding: 2px; background-color: var(--crea);}  
#slave-head a:visited {color: var(--slavefont); text-decoration: none;}  
#slave-head a:hover, #slave-head a:active {color: var(--slavefont); text-decoration: none;}
#slave-head a:link { color: var(--slavefont); text-decoration: none;}

p { color: var(--fontdark); }

#pitch-head { width: 350px; height: 150px; margin: auto; margin-bottom: 5px; } .pitch-pic { width: 100px; height: 100px; float: left; margin-top: 25px; margin-left: 25px;}  .pitch-name { width: 200px; height: 100px; margin-top: 25px; float: left;}  .pitch-nameh { font-size: 18px; font-weight: bold;  text-transform: uppercase;  color: var(--pitchfont); padding-left: 10px; padding-top: 10px;  font-family: 'Lato', sans-serif; letter-spacing: 2px; text-align: left; line-height: 19px;} .pitch-namek { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--pitchfont); font-family: 'Lato', sans-serif; padding-left: 10px;  line-height: 10px; text-align: left; }  .pitch-quote { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--pitchfont); font-family: 'Lato', sans-serif; padding-left: 10px; margin-top: 7px; line-height: 10px;} #pitch-head a:visited {color: var(--pitchfont); text-decoration: none;}  #pitch-head a:hover, #pitch-head a:active {color: var(--pitchfont); text-decoration: none;} #pitch-head a:link { color: var(--pitchfont); text-decoration: none;} 

#schick-head { width: 350px; height: 150px; align: left; margin-bottom: 5px;} .schick-pic { width: 150px; height: 94px; float: left; margin-top: 25px; margin-left: 25px;}  .schick-name { width: 150px; height: 100px; margin-top: 25px; float: left;}  .schick-nameh { font-size: 18px; font-weight: bold;  text-transform: uppercase;  color: var(--highgrey); padding-left: 10px; padding-top: 10px;  font-family: 'Lato', sans-serif; letter-spacing: 2px; text-align: left; line-height: 19px;} .schick-namek { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--highgrey); font-family: 'Lato', sans-serif; padding-left: 10px;  line-height: 10px; text-align: left; }  .schick-quote { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--highgrey); font-family: 'Lato', sans-serif; padding-left: 10px; margin-top: 7px; line-height: 10px;} #schick-head a:visited {color: var(--highgrey); text-decoration: none;}  #schick-head a:hover, #schick-head a:active {color: var(--highgrey); text-decoration: none;} #schick-head a:link { color: var(--highgrey); text-decoration: none;} 


:root { --hgrey: #f6f6f6; --dgrey: #dbdbdb; --crea: #856a6a; --mortalfont: #f6f6f6; --untot: #934e6b ; --wandler: #414453 ; --mensch: #ce7f54; --geist: #879fa3; --damon: #80788d ; --elf: #7f8563 ; --hexe: #5a7e64 ; --gott: #6e3637 ; --fremder: #bc7837 ; }  .mortal-head { width: 800px; height: 150px; background-color: var(--crea); margin: auto;}  .mortal-pic { width: 100px; height: 100px; float: left; margin-top: 25px; margin-left: 25px; background-color: var(--crea);}  .mortal-name { width: 550px; height: 100px; margin-top: 25px; float: left;}  .mortal-nameh { font-size: 18px; font-weight: bold;  text-transform: uppercase;  color: var(--mortalfont); padding-left: 10px; padding-top: 10px;  font-family: 'Lato', sans-serif; letter-spacing: 2px; text-align: left; } .mortal-namek { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--fontdark); font-family: 'Lato', sans-serif; padding-left: 10px;  line-height: 10px; text-align: left; }  .mortal-quote { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--mortalfont); font-family: 'Lato', sans-serif; padding-left: 10px; margin-top: 20px; line-height: 10px;} .mortal-head a:visited {color: var(--mortalfont); text-decoration: none;}  .mortal-head a:hover, .mortal-head a:active {color: var(--mortalfont); text-decoration: none;} .mortal-head a:link { color: var(--mortalfont); text-decoration: none;}


/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
  display: flex;
  align-items: center;
	float: left;

  em {
    margin-left: 25px;
    font-size: 1rem;
  }
}
.theme-switch {
  display: inline-block;
  height: 17px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 13px;
  left: 2px;
  position: absolute;
  transition: .4s;
  width: 13px;
}

input:checked + .slider {
  background-color: var(--aqua);
}

input:checked + .slider:before {
  transform: translateX(30px);
}

.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}