body.dark-mode  {
  background-color: #121212; 
  color: #fff;
}



/* Normal mode */
body {
  background-color: #ffffff;
  color: #000000;
}


/* Dark Mode Styles */
body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

body.dark-mode #about,
body.dark-mode #about h1,
body.dark-mode #certifications h1,
body.dark-mode h1.sub-title,
body.dark-mode .col .contents .box h4
body.dark-mode .col .contents .box h3
body.dark-mode .col .contents .box p
{
  color: #ffffff;
}

body.dark-mode #about,
body.dark-mode #certifications,
body.dark-mode #viewcerti details,
body.dark-mode #project 
{
  background-color: #0e0e0e;
}

body.dark-mode #viewcerti summary{
  color: black;
}



body.dark-mode #viewcerti,
body.dark-mode #viewcerti table,
body.dark-mode #viewcerti td,
body.dark-mode #viewcerti th {
  color: #ffffff;
}
body.dark-mode #viewcerti table a {
  color: #008b05;
}

body.dark-mode #viewcerti table a:hover {
  color: hsl(274, 76%, 87%);
}



body.dark-mode #viewcerti {
  background-color: #1e1e1e;
}

body.dark-mode #viewcerti tr {
  background-color: #2a2a2a;
}

body.dark-mode #viewcerti tr:nth-child(even) {
  background-color: #222;
}

body.dark-mode #viewcerti tr:hover {
  background-color: #333;
}

body.dark-mode #viewcerti th {
  background-color: #fbb560e9;
  color: black;
}


body.dark-mode .col .contents .box

{
	background-color: #aac2eb;
  

}

.switch {
  position: fixed;
  top: 10px;
  right: 10px;
  display: inline-block;
  width: 60px;
  height: 34px;


  /* global */
  --total_transition_duration: .3s;
  /* switch */
  --slider_width: 2.875em;
  --slider_height: 1.5em;
  --slider_light_bg: linear-gradient(90deg, #f32a85 0%, #f19d36 100%);
  --slider_night_bg: linear-gradient(90deg, #1701a1 0%, #af0693 75%);
  --slider_offset: calc((var(--slider_height) - var(--circle_diameter)) / 2);
  --slider_radius: calc(var(--slider_height) / 2);
  /* circle */
  --circle_diameter: 1.125em;
  --circle_rotation: 360deg;
  /* svg */
  --svg_width: var(--circle_diameter);
  --sun-color: #fff;
  --moon-color: #fff;

}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


.slider svg {
  position: absolute;
  height: auto;
  color: var(--svg-color);
  transition: var(--total_transition_duration) ease;
  width: 100%;
}

.circle svg.sun {
  transform: scale(1);
  color: var(--sun-color);
}

.circle svg.moon {
  transform: scale(0);
  color: var(--moon-color);
  width: calc(100% - 2px);
}

.slider {
  display: inline-block;
  width: var(--slider_width);
  height: var(--slider_height);
  border-radius: var(--slider_radius);
  position: relative;
  cursor: pointer;
  transition: var(--total_transition_duration) ease;
  overflow: hidden;
}

.slider::before,
.slider::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: var(--total_transition_duration) ease;
}

/* ::before and ::after backgrounds are needed for smooth 
transition of gradients otherwise there is no way :\ */
.slider::before {
  opacity: 0;
  background: var(--slider_night_bg);
}

.slider::after {
  opacity: 1;
  background: var(--slider_light_bg);
}

/* ------------ */

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--circle_diameter);
  height: var(--circle_diameter);
  position: absolute;
  top: var(--slider_offset);
  left: var(--slider_offset);
  transition: var(--total_transition_duration) ease;
  z-index: 10;
}

/* actions */

.switch input:checked+.slider::before {
  opacity: 1;
}

.switch input:checked+.slider::after {
  opacity: 0;
}

.switch input:active+.slider .circle {
  transform: scale(0.9);
}

.switch input:checked+.slider .circle {
  left: calc(100% - var(--circle_diameter) - var(--slider_offset));
}

.switch input:checked+.slider .sun {
  transform: scale(0) rotate(var(--circle_rotation));
}

.switch input:checked+.slider .moon {
  transform: scale(1) rotate(var(--circle_rotation));
}