@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap");

:root,
:root.light {
  --background-color: #fafafa;
  --text-color: #000;
  --shade-100: #efefef;
  --shade-300: #8a8a8a;
  --shade-500: #3d3d3d;
  --secondary-color: #ccd0be;
  --grey-color: #c2bfbc;
  --grey-text: #595959;
}

:root.dark {
  --background-color: #0d1926;
  --text-color: #f7fafc;
  --shade-100: #1a324c;
  --shade-300: #4383cb;
  --shade-500: #8cb0d9;
  --secondary-color: #a67a59;
  --grey-color: #303f50;
  --grey-text: #cfd8e2;
}

:root.brown {
  --background-color: #eeeae2;
  --text-color: #120c07;
  --shade-100: #c7a991;
  --shade-300: #6f482a;
  --shade-500: #4a301c;
  --secondary-color: #8cb0d9;
  --grey-color: #c2bfbc;
  --grey-text: #5e5955;
}

:root.pink {
  --background-color: #fcf7f9;
  --text-color: #260d17;
  --shade-100: #ffcce1;
  --shade-300: #bf4075;
  --shade-500: #732646;
  --secondary-color: #a8d1c8;
  --grey-color: #d1c7cd;
  --grey-text: #62505b;
}

:root.green {
  --background-color: #f2f5f4;
  --text-color: #1b3817;
  --shade-100: #bae5b3;
  --shade-300: #024541;
  --shade-500: #012d32;
  --secondary-color: #e5b3b9;
  --grey-color: #c8d1c7;
  --grey-text: #536250;
}

:root.neon {
  --background-color: #101b37;
  --text-color: #fff;
  --shade-100: #101b37;
  --shade-300: #4b4bfb;
  --shade-500: hsl(190, 99%, 47%);
  --secondary-color: #e41376;
  --grey-color: hsl(190, 99%, 30%);
  --grey-text: #fff;
  --neon-color: #e41376;
}

:root.purple {
  --background-color: #f8f5ff;
  --text-color: #2a1a3a;
  --shade-100: #dcd3f3;
  --shade-300: #9c88d9;
  --shade-500: #5f4b8b;
  --secondary-color: #ffd6e0;
  --grey-color: #e0d8f0;
  --grey-text: #6a5a7a;
}

.neon-path {
  display: none;
}

.neon body {
  font-family: "Orbitron", sans-serif;
}

.neon body::before,
.neon body::after {
  content: "";
  position: fixed;
  top: 0;
  width: 10px;
  z-index: 99;
  background-color: var(--neon-color);
  height: 100vh;
  box-shadow: 0 0 15px 0 var(--neon-color);
}

@media screen and (max-width: 720px) {
  .neon body::before,
  .neon body::after {
    width: 5px;
  }

  .neon .project-content-container {
    border: 1px solid var(--shade-300);
  }
}

.neon body::before {
  left: 0;
}

.neon body::after {
  right: 0;
}

.neon h1,
.neon .section-title {
  text-shadow: 2px 1px var(--neon-color);
}

.neon .arrow {
  color: var(--neon-color);
}

.neon .link-btn {
  border-color: var(--neon-color);
  color: var(--shade-500);
}

.neon .nav-links a {
  text-shadow: 1px 1px var(--neon-color);
}

.neon ::marker {
  color: var(--secondary-color);
}

.neon a {
  text-decoration-color: var(--neon-color) !important;
}

.neon img:not(.img-404) {
  box-shadow: 10px 10px 0 0 var(--neon-color);
}

.neon .neon-path {
  display: block;
}

.neon .wave-border path:not(.neon-path) {
  display: none;
}

.neon input[value="all"]:checked ~ .post-tags label[data-post="all"],
.neon
  input[value="javascript"]:checked
  ~ .post-tags
  label[data-post="javascript"],
.neon
  input[value="portfolio"]:checked
  ~ .post-tags
  label[data-post="portfolio"],
.neon
  input[value="conferences"]:checked
  ~ .post-tags
  label[data-post="conferences"] {
  border-color: var(--neon-color);
  color: var(--shade-500);
}

.neon .input-container.focused .form-input {
  border-color: var(--neon-color);
}

.neon .focused label {
  border: 1px solid var(--neon-color);
  border-bottom-color: transparent;
}

.neon .article-content,
.neon .card-content {
  border: 1px solid var(--shade-300);
}

#light-select .color.text {
  background-color: #000;
}
#light-select .color.shade-100 {
  background-color: #efefef;
}
#light-select .color.shade-300 {
  background-color: #8a8a8a;
}
#light-select .color.shade-500 {
  background-color: #3d3d3d;
}
#light-select .color.background {
  background-color: #fff;
}

#dark-select .color.text {
  background-color: #f7fafc;
}
#dark-select .color.shade-100 {
  background-color: #1a324c;
}
#dark-select .color.shade-300 {
  background-color: #4383cb;
}
#dark-select .color.shade-500 {
  background-color: #8cb0d9;
}
#dark-select .color.background {
  background-color: #0d1926;
}

#brown-select .color.text {
  background-color: #120c07;
}
#brown-select .color.shade-100 {
  background-color: #c7a991;
}
#brown-select .color.shade-300 {
  background-color: #6f482a;
}
#brown-select .color.shade-500 {
  background-color: #4a301c;
}
#brown-select .color.background {
  background-color: #eeeae2;
}

#pink-select .color.text {
  background-color: #260d17;
}
#pink-select .color.shade-100 {
  background-color: #ffcce1;
}
#pink-select .color.shade-300 {
  background-color: #bf4075;
}
#pink-select .color.shade-500 {
  background-color: #732646;
}
#pink-select .color.background {
  background-color: #fcf7f9;
}

#green-select .color.text {
  background-color: #1b3817;
}
#green-select .color.shade-100 {
  background-color: #bae5b3;
}
#green-select .color.shade-300 {
  background-color: #024541;
}
#green-select .color.shade-500 {
  background-color: #012d32;
}
#green-select .color.background {
  background-color: #f2f5f4;
}

#neon-select .color.text {
  background-color: #fff;
}
#neon-select .color.shade-100 {
  background-color: #101b37;
}
#neon-select .color.shade-300 {
  background-color: #4b4bfb;
}
#neon-select .color.shade-500 {
  background-color: #01c8ee;
}
#neon-select .color.background {
  background-color: #e41376;
}

#purple-select .color.text {
  background-color: #2a1a3a;
}
#purple-select .color.shade-100 {
  background-color: #dcd3f3;
}
#purple-select .color.shade-300 {
  background-color: #9c88d9;
}
#purple-select .color.shade-500 {
  background-color: #5f4b8b;
}
#purple-select .color.background {
  background-color: #f8f5ff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #0d1926;
    --text-color: #f7fafc;
    --shade-100: #1a324c;
    --shade-300: #264a73;
    --shade-500: #8cb0d9;
    --secondary-color: #2a556f40;
    --grey-color: #afbecf;
    --grey-text: #cfd8e2;
  }
}