:root {
  /* Color Definitions */
  --white: #e9e6e6;
  --white-bright: #fff;
  --grey: rgb(175, 175, 175);
  --grey-dark-2: #1d2124;
  --grey-dark: rgb(37, 37, 37);
  --black: #1b1c1f;
  --dark-black: #101113;
  --black-light: #1d1d1dcb;
  --red-dark: #791302;
  --yellow-dark: #74640d;
  --blue-dark: #254e85;
  --green-dark: #085e36;
  --orange-dark: #8a5212;
  --border-color: #e9e6e6b0;
  --card-text-color: #212122;

  /* Color-Themes */
  --red: #be0f1d;
  --blue: #2160b3;
  --green: #30a114;
  --yellow: #f0cf14;
  --orange: #ff9901;

  /* Borders */
  --border: 2px solid var(--border-color);

  /* Special */
  --home-filter: #082e6831;
  --glass-effect: rgba(62, 115, 184, 0.068);
  --skills-background: rgb(216, 216, 216);
}

/* --- Text Colors --- */
.header,
.home,
.projects,
.contact,
a:any-link,
details .button,
p {
  color: var(--white);
}

.h1 {
  color: var(--blue-dark);
}
.h2 {
  color: var(--white-bright);
}

.h3,
.h4 {
  color: var(--white-bright);
}

.skills .card .card-text,
.skills .h2,
.skills .h3,
.skills p {
  color: var(--card-text-color);
}

/* Backgrounds */
.body,
.about,
.header,
.projects {
  background-color: var(--black);
}

details,
details .button {
  background-color: var(--dark-black);
}
details .button:is(:hover, :focus) {
  background-color: var(--grey-dark);
}

.contact-container {
  border-radius: 1.25rem;
  border: 2px solid rgba(236, 236, 236, 0.884);
  background-color: rgb(39, 39, 39);
}

#btn-submit.button {
  background-color: var(--white);
  color: var(--black);
}

.contact-container input,
.contact-container textarea {
  background-color: var(--black);
  color: inherit;
}

.input-group label.required::after {
  color: var(--red);
}

section.home::after {
  background-color: #242423;
}
.home {
  background-color: #f3f3f3;
}

.skills {
  background: var(--skills-background);
}

.skills .card {
  background-color: var(--white-bright);
}
details .text-container {
  background-color: var(--grey-dark);
}

/* Borders */
.header {
  border-bottom: var(--border);
}

.about-image img {
  border: var(--border);
}

.typewriter p {
  border-right: var(--border);
}

.red:is(.websiteOwnerName, .logo) ::first-letter,
.header a.active.red {
  color: var(--red);
}
.yellow:is(.websiteOwnerName, .logo) ::first-letter,
.header a.active.yellow {
  color: var(--yellow);
}
.blue:is(.websiteOwnerName, .logo) ::first-letter,
.header a.active.blue {
  color: var(--blue);
}
.green:is(.websiteOwnerName, .logo) ::first-letter,
.header a.active.green {
  color: var(--green);
}
.orange:is(.websiteOwnerName, .logo) ::first-letter,
.header a.active.orange {
  color: var(--orange);
}

.volume-slider.red {
  accent-color: var(--red);
}
.volume-slider.yellow {
  accent-color: var(--yellow);
}
.volume-slider.blue {
  accent-color: var(--blue);
}
.volume-slider.green {
  accent-color: var(--green);
}
.volume-slider.orange {
  accent-color: var(--orange);
}

/* Background Actual Color */
.contact.red {
  background-color: var(--red);
}
.contact.yellow {
  background-color: var(--yellow);
}
.contact.blue {
  background-color: var(--blue);
}
.contact.green {
  background-color: var(--green);
}
.contact.orange {
  background-color: var(--orange);
}

/* Projects Border Color */
details .number.red,
details .button.red {
  border: 2px solid var(--red);
}
details .number.yellow,
details .button.yellow {
  border: 2px solid var(--yellow);
}
details .number.blue,
details .button.blue {
  border: 2px solid var(--blue);
}
details .number.green,
details .button.green {
  border: 2px solid var(--green);
}
details .number.orange,
details .button.orange {
  border: 2px solid var(--orange);
}