.default {
  --primary-color:#FFDAB3;
  --secondary-color:#dba988;
  --background-default: #FFF2E0;
  --background-paper: #fff;
  --font-color: #525282;
  --heading-color: #525282;
  --link-color:#525282;
  --visitlink-color:rgb(60, 71, 115);
  --focuslink-color:rgb(17, 163, 114);
  --activelink-color:rgb(148, 60, 120);
}

.dark {
  --primary-color:#926869;
  --secondary-color:#9881bc;
  --background-default: #3C394E;
  --background-paper: #111;
  --font-color: #EADFDB;
  --heading-color: #EADFDB;
  --link-color:#EADFDB;
}

.darker {
  --primary-color:#774872;
  --secondary-color:#7D5D72;
  --background-default: #0E0204;
  --background-paper: #111;
  --font-color: #E0BCCA;
  --heading-color: #E0BCCA;
  --link-color:#E0BCCA;
}

footer {
  background:var(--primary-color);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

p, a, h1, button, h2, h3, h4, h6, header {
    font-family:  'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

button:hover {
    background: var(--secondary-color);
}

a {
  border-bottom: solid 1px;
}

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

/* visited link */
a:visited {
  color:var(--visitlink-color);
}

a:focus {
    color:var(--focuslink-color);
}

a:hover {
  border-bottom: 3px solid currentColor;
}

/* selected link */
a:active {
  color: var(--activelink-color);
}

a {
  text-decoration: none;
}

body {
  background: var(--background-default);
  color: var(--font-color);
  transition: background 2s;
}

nav {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
  margin-right: 4px;
}

/* width of scrollbar */
::-webkit-scrollbar {
    width: 20px;
}

/* Track Scrollbar */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px grey;
    border-radius: 5px;
}

/* Handle of Scrollbar */
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

.switch-toggle {
  float: left;
  background: grey;
  border: 1px solid rgb(32, 27, 27);
  border-radius: 5px;
  padding: 2px;
}

.switch-toggle input {
  position: absolute;
  opacity: 0;
}

.switch-toggle input + label {
  padding: 7px;
  float: left;
  color: #ffffff;
  cursor: pointer;
}

.switch-toggle input:checked + label {
  background: black;
  transition: background;
  transition-delay: 100;
}

#theme-selector {
    border-radius: 15px;
    text-align: center;
    border: solid rgb(126, 139, 202) 3px;
    background-color:#d4dfff;
    margin-right: 4px;
}