@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --background: #0b0e14;
  --border: #1f2430;
  --navbackground: #0a0f18;
  --primary: #6c4bff;
  --input: #0f1722;
  --accent: #00e0ff;
  --foreground: #e6edf3;
  --navbarForeground: #9fb4ff;
  --card: #0f1620;
  --mounted-foreground: #9aa6b2;
  --secondary: #0a1020;
  --secondary-foreground: #c8d7ff;
  --sidebar: #0a0f18;
  --raduis-md: 12px;
  --radius-xl: 48px;
  --raduis-sm: 6px;
  --primary-foreground: #ffffff;
}

.fs-20 {
  font-size: 20px;
}

#body {
  background-color: var(--background);
  width: 100%;
  min-height: 100vh;
  font-family: "Inter";
  word-wrap: break-word;
}

#headerBar {
  border-radius: 12px;
  background-color: var(--navbackground);
  border: 1px solid var(--border);
}

.logo {
  height: 36px;
  width: 36px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.name {
  font-weight: 600;
  font-size: 18px;
}

.text {
  color: var(--foreground);
}

.nav-text {
  text-decoration: none;
  color: var(--navbarForeground);
  font-size: 14px;
  font-weight: 500;
  font-family: "Inter", "Inter Fallback";
}

.hire-me {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
}

.hero-visual {
  flex: 1;
  min-height: 300px;
  background: radial-gradient(
      120px 120px at 20% 30%,
      var(--accent) 0%,
      transparent 60%
    ),
    radial-gradient(160px 160px at 80% 60%, var(--primary) 0%, transparent 60%),
    linear-gradient(180deg, var(--navbackground), var(--card));
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(225, 225, 225, 0.02) inset;
}

#me {
  min-height: 70vh;
}

#me h1 {
  font-size: 40px;
  line-height: 48px;
  margin: 16px 0 12px 0;
  font-weight: 700;
}

#me > div {
  flex: 1;
}

#me p {
  color: var(--mounted-foreground);
  font-size: 16px;
  margin: 0 0 20px 0;
}

#dwncv {
  padding: 12px 16px;
  background: var(--secondary);
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary-foreground);
  border-radius: 12px;
  text-decoration: none;
}

#project-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 400px));
  grid-auto-rows: minmax(150px, auto); 
  align-items: center;
}

.project {
  padding: 14px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

.project > .preview {
  border-radius: 6px;
  height: 140px;
  background: var(--input);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed var(--border);
}

.project > .preview > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 6px;
}

.project > .description > h1 {
  font-size: 16px;
  color: var(--foreground);
}

.project > .description > p {
  font-size: 14px;
  color: var(--mounted-foreground);
  margin: 0;
}

.project > .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project > .tags > span {
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding: 6px 10px;
  border-radius: 48px;
  font-size: 12px;
  font-weight: 500;
}

.skills-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.skill-group {
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skill-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary-foreground);
  background: var(--secondary);
  padding: 6px 10px;
  width: max-content;
  border-radius: var(--radius-xl);
}

.skill {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.skill .label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--foreground);
}

.skill .bar {
  height: 10px;
  background: var(--input);
  border-radius: 48px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.skill .bar .fill {
  height: 100%;
  width: 70%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.messageForums {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
}

.input {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  color: var(--foreground);
}

.textarea {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  color: var(--foreground);
  min-height: 120px;
}

.button-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--primary-foreground);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  border: none;
}

.footer {
  padding: 24px;
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--foreground);
}

/* Mobile size */
@media screen and (max-width: 600px) {

  .name {
    font-weight: 600;
    font-size: 15px;
  }

  #project-grid {
    grid-template-columns: 1fr;
  }

  .skills-groups {
    grid-template-columns: 1fr;
  }
}