:root {
  --main-light-color: #817a8a;
  --button-light-color: #cdbbbb;
}

*.light-mode::selection {
  background: var(--light-skin-color);
  color: #ffffff;
}

html.light-mode::-webkit-scrollbar-track {
  background: transparent;
}

body.light-mode {
  background-color: white;
}

header.light-mode {
  background: #ffffff7a;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid #ffffff4a;
}

div#menu.fas.fa-bars.light-mode,
div#menu.fas.fa-bars.light-mode.fa-times {
  color: var(--main-light-color);
  background: rgba(255, 255, 255, 0.068);
}

div.info a.light-mode,
h3.name.light-mode,
section#home.home.light-mode h3,
p.post.light-mode,
h1.light-mode,
p.light-mode,
section#about.about.light-mode div.info.light-mode h3.light-mode,
section#about.about.light-mode div.box.light-mode h3.light-mode,
section#education.education.light-mode div.box.light-mode h3.light-mode {
  color: var(--main-light-color) !important;
}

.about .row .counter .box span.light-mode {
  background: #f0efef98 !important;
  color: var(--main-light-color) !important;
}

.about .row .counter .box h2.light-mode {
  color: var(--light-skin-color) !important;
}

input.box.light-mode,
textarea.box.light-mode {
  background: #f0efef98 !important;
}

header .index ul li a.light-mode,
button.button.light-mode,
a.button.light-mode {
  background: var(--button-light-color);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

header .index ul li a.active.light-mode {
  background: var(--light-skin-color);
}

header .index ul li a.light-mode {
  border: 1px solid var(--light-skin-color);
}

header .index ul li button.light-mode,
.toggle-light-mode.on-body.light-mode {
  background: #ffffff6c;
  color: #817a8ad2;
  box-shadow: none;
}

span.light-mode,
h3.portfolio-title.light-mode,
section#contact.contact.light-mode i {
  color: var(--light-skin-color) !important;
}

img.light-mode {
  border-color: var(--light-skin-color) !important;
}

html.light-mode::-webkit-scrollbar-thumb,
header.light-mode .index ul li a:hover,
button.button.light-mode:hover,
section#education.education.light-mode i.fas.light-mode {
  background: var(--light-skin-color) !important;
}

header.light-mode .index ul li button:hover {
  background-color: var(--light-skin-color);
  color: white;
}

section#education.education.light-mode div.box.light-mode {
  border-left-color: var(--light-skin-color);
}

div.style-switcher-toggler.s-icon.light-mode,
i.fas.fa-cog.fa-spin.light-mode {
  color: var(--light-skin-color);
}

div.counter.light-mode div.box.light-mode,
div.box.light-mode span.light-mode,
div.project-data.light-mode {
  background: whitesmoke;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.contact .row .content .title {
  color: var(--main-light-color) !important;
}

.style-switcher .color-1.light-mode {
  background: #fdb9ff;
}

.style-switcher .color-2.light-mode {
  background: #ace8fa;
}

.style-switcher .color-3.light-mode {
  background: #ffc27c;
}

.style-switcher .color-4.light-mode {
  background: #ff869f;
}

.style-switcher .color-5.light-mode {
  background: #9eff81;
}

div.box.light-mode span.light-mode {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

section#contact.contact.light-mode form i {
  color: white !important;
}

.contact .row form .box.light-mode {
  color: var(--main-light-color);
}