:root {
  --primary-color: #282c33;
  --primary-text-color: #abb2bf;
  --secondary-text-color: #c778dd;

  --navbar-color: rgb(13 13 13 / 56%);
}


.primary-color {
  color: var(--primary-color);
}
.primary-text-color {
  color: var(--primary-text-color);
}
.secondary-text-color {
  color: var(--secondary-text-color);
}

.primary-bg-color {
  border-color: var(--primary-color);
}

.secondary-bg-color {
  border-color: var(--secondary-text-color);
}

body {
  font-family: "Cascadia Code", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: var(--primary-color);
}

/* Custom styles for enhanced transparency effect */
.navbar-transparent {
  background-color: var(--navbar-color);
  backdrop-filter: blur(8px);
}

.navbar-solid {
  background-color: #0f172a;
  box-shadow: 0 4px 6px -1px var(--primary-color);
}

.project_line {
  position: relative;
  padding-bottom: 4px;
}

.project_line::after {
  position: absolute;
  content: "";
  display: block;
  width: 665px;
  top: 15px;
  left: 161px;
  border-bottom: 1px solid var(--secondary-text-color);
  padding-bottom: 4px;
}

.Skills_line {
  position: relative;
  padding-bottom: 4px;
}

.Skills_line::after {
  position: absolute;
  content: "";
  display: block;
  width: 320px;
  top: 15px;
  left: 121px;
  border-bottom: 1px solid var(--secondary-text-color);
  padding-bottom: 4px;
}

.about_line {
  position: relative;
  padding-bottom: 4px;
}

.about_line::after {
  position: absolute;
  content: "";
  display: block;
  width: 480px;
  top: 15px;
  left: 169px;
  border-bottom: 1px solid var(--secondary-text-color);
  padding-bottom: 4px;
}

.contact_line {
  position: relative;
  padding-bottom: 4px;
}

.contact_line::after {
  position: absolute;
  content: "";
  display: block;
  width: 420px;
  top: 15px;
  left: 169px;
  border-bottom: 1px solid var(--secondary-text-color);
  padding-bottom: 4px;
}

.social-icon:hover {
  transition: transform 0.3s ease-in-out;
  transform: scale(1.2);
}