.dark-display {
  display: none;
  margin-right: 5px;
  opacity: 0.5;
}

.dark-mode-btn {
  position: relative;
  width: 65px;
  height: 25px;
  border-radius: 35px;
  padding: 0;
  text-align: left;
  vertical-align: middle;
  display: flex;
  align-items: center;
  transition: all 0.4s ease-in-out;
  justify-content: space-between;
  margin: 0;
  margin-right: 30px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid #fff;
  padding: 0px 10px;
}

.dark-mode-btn i {
  font-size: 20px;
}

.dark-mode video {
  filter: opacity(0.25);
}

.radio-control {
  transition: all 0.4s ease-in-out;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 0;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-box-shadow: 2px 4px 7px -3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 4px 7px -3px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 4px 7px -3px rgba(0, 0, 0, 0.75);
}

.dark-mode .radio-control {
  transition: all 0.4s ease-in-out;
  right: 50%;
}

.dark-mode .one-switch {
  color: #fff !important;
}

.dark-mode .zero-switch {
  color: #333 !important;
}

.dark-mode .dark-mode-btn {
  justify-content: right;
  transition: all 0.4s ease-in-out;
}

.light-display {
  margin-left: -5px;
  opacity: 0.9;
}

.dark-mode .light-display {
  display: none;
}

.dark-mode .dark-display {
  display: inline-block;
}

.dark-mode {
  background-color: #080808 !important;
  transition: all 0.2s ease-in-out !important;
}

.dark-mode h4,
.dark-mode h1,
.dark-mode i {
  color: #fff !important;
  transition: all 0.2s ease-in-out !important;
}

.dark-mode .wrapper {
  background-color: #080808 !important;
  transition: all 0.2s ease-in-out !important;
}

.dark-mode .wrapper::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 0,100 100,100' style='fill:%23080808;' /%3E%3C/svg%3E");
  transition: all 0.2s ease-in-out;
}

.dark-mode #page-wrapper {
  background-color: #080808;
  transition: all 0.2s ease-in-out;
}

.dark-mode .light-desc {
  display: block;
}

.dark-mode .dark-desc {
  display: none;
}

.dark-mode .stroke1 {
  background-image: url("penstroke1light.png");
}

.dark-mode .stroke2 {
  background-image: url("penstroke2light.png");
}

.dark-mode .stroke3 {
  background-image: url("penstroke3light.png");
}

.dark-mode .stroke4 {
  background-image: url("penstroke4light.png");
}

.dark-mode .stroke5 {
  background-image: url("penstroke5light.png");
}

.dark-mode p:not(.main-desc) {
  color: #a3a3a3;
}

.dark-mode .select-items {
  background-color: #141414;
  filter: none;
  color: #fff;
}

.dark-mode .select-items div:hover {
  background-color: #252525;
}

.dark-mode .content-desc a {
  color: #a3a3a3;
}

.dark-mode .link-a-3d {
  color: #fff;
}

.dark-mode header.major h1 {
  border-color: #9d9d9d;
}

.dark-mode .dark {
  color: #fff;
  border-color: #fff !important;
}

.dark-mode a.button.next.alt.dark {
  color: #fff !important;
}

.dark-mode a.button.next.alt.dark::after {
  filter: none;
}

.dark-mode .contact-icons a,
.dark-mode .copyright {
  color: #a3a3a3;
}

/* DARK MODE SCROLL */
.dark-scroll {
  background-color: #080808 !important;
  transition: all 0.2s ease-in-out !important;
}

.dark-scroll h4,
.dark-scroll h1,
.dark-scroll i {
  color: #fff !important;
  transition: all 0.2s ease-in-out !important;
}

.dark-scroll .wrapper {
  background-color: #080808 !important;
  transition: all 0.2s ease-in-out !important;
}

.dark-scroll .wrapper::before {
  opacity: 0 !important;
  display: none;
}

.dark-scroll .dark-container {
  transition: all 0.2s ease-in-out !important;
  bottom: 0vh;
}

.dark-scroll .inner-dark {
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.dark-scroll .inner-dark img {
  transform: scale(1) translate(0, 0);
  transition: all 0.5s ease-in-out;
}

.dark-scroll .light-desc {
  display: block;
}

.dark-scroll .dark-desc {
  display: none;
}

.dark-scroll .stroke1 {
  background-image: url("penstroke1light.png");
}

.dark-scroll .stroke2 {
  background-image: url("penstroke2light.png");
}

.dark-scroll .stroke3 {
  background-image: url("penstroke3light.png");
}

.dark-scroll .stroke4 {
  background-image: url("penstroke4light.png");
}

.dark-scroll .stroke5 {
  background-image: url("penstroke5light.png");
}

.dark-scroll p {
  color: #a3a3a3;
}

.dark-scroll .select-items {
  background-color: #141414;
  filter: none;
  color: #fff;
}

.dark-scroll .select-items div:hover {
  background-color: #252525;
}

.dark-scroll .content-desc a {
  color: #a3a3a3;
}

.dark-scroll .link-a-3d {
  color: #fff;
}

/* END DARK MODE SCROLL END */
body {
  display: none;
}

/* DARK MODES COMBINED */

.dark-scroll.dark-mode {
  background-color: #eeeae9 !important;
  transition: all 0.2s ease-in-out !important;
}

.dark-scroll.dark-mode h4,
.dark-scroll.dark-mode h1,
.dark-scroll.dark-mode i {
  color: #333 !important;
  transition: all 0.2s ease-in-out !important;
}

.dark-scroll.dark-mode .wrapper {
  background-color: #eeeae9 !important;
  transition: all 0.2s ease-in-out !important;
}

.dark-scroll.dark-mode .wrapper.style2 {
  background-color: #afa393 !important;
  transition: all 0.2s ease-in-out !important;
}

.dark-scroll.dark-mode .wrapper::before {
  opacity: 1 !important;
  display: block;
}

.dark-scroll.dark-mode .dark-container {
  transition: all 0.2s ease-in-out !important;
  bottom: 0vh;
}

.dark-scroll.dark-mode .inner-dark {
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.dark-scroll.dark-mode .inner-dark img {
  transform: scale(1) translate(0, 0);
  transition: all 0.5s ease-in-out;
}

.dark-scroll.dark-mode .light-desc {
  display: none;
}

.dark-scroll.dark-mode .dark-desc {
  display: block;
}

.dark-scroll.dark-mode .stroke1 {
  background-image: url("penstroke1.png");
}

.dark-scroll.dark-mode .stroke2 {
  background-image: url("penstroke2.png");
}

.dark-scroll.dark-mode .stroke3 {
  background-image: url("penstroke3.png");
}

.dark-scroll.dark-mode .stroke4 {
  background-image: url("penstroke4.png");
}

.dark-scroll.dark-mode .stroke5 {
  background-image: url("penstroke5.png");
}

.dark-scroll.dark-mode p {
  color: #333;
}

.dark-scroll.dark-mode .select-items {
  background-color: #eeeae9;
  filter: drop-shadow(5px 5px 10px #8b8989);
  color: #333;
}

.dark-scroll.dark-mode .select-items div:hover {
  background-color: #afa393;
}

.dark-scroll .content-desc a {
  color: #a3a3a3;
}

.dark-scroll.dark-mode .link-a-3d {
  color: #333;
}

.dark-scroll.dark-mode .wrapper::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 0,100 100,100' style='fill:%23afa393%3B' /%3E%3C/svg%3E");
  transition: all 0.2s ease-in-out;
}