/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  min-height: 100vh;
  overflow: hidden;
  background: #1f1a17;
  color: #f4eadb;
  position: relative;
}

.network-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url("Background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.background-overlay {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(32, 24, 20, 0.35), rgba(32, 24, 20, 0.55)),
    radial-gradient(circle at center, rgba(160, 125, 90, 0.12), rgba(20, 20, 20, 0.4));
  pointer-events: none;
  z-index: 1;
}

.connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.connections line {
  stroke: rgba(244, 234, 219, 0.28);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 3px rgba(244, 234, 219, 0.15));
}

.node {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #f7efe4;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(247, 239, 228, 0.18);
  box-shadow:
    0 0 30px rgba(80, 55, 35, 0.18),
    inset 0 0 20px rgba(255, 245, 230, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.node:hover {
  transform: scale(1.05);
  border-color: rgba(247, 239, 228, 0.38);
  box-shadow:
    0 0 40px rgba(160, 125, 90, 0.22),
    inset 0 0 20px rgba(255, 245, 230, 0.08);
}

.nucleus {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(200, 170, 130, 0.22), rgba(70, 50, 35, 0.32));
}

.nucleus:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.project {
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(166, 133, 101, 0.18), rgba(40, 30, 24, 0.28));
}

.project:nth-of-type(2) {
  left: 19%;
  top: 20%;
}

.project:nth-of-type(3) {
  left: 69%;
  top: 24%;
}

.project:nth-of-type(4) {
  left: 18%;
  top: 66%;
}

.project:nth-of-type(5) {
  left: 69%;
  top: 66%;
}

.node-title {
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}

.node-subtitle {
  font-size: 0.72rem;
  opacity: 0.8;
  max-width: 80%;
  line-height: 1.25;
}

.float-slow {
  animation: drift1 7s ease-in-out infinite;
}

.float-one {
  animation: drift2 6s ease-in-out infinite;
}

.float-two {
  animation: drift3 8s ease-in-out infinite;
}

.float-three {
  animation: drift4 7.5s ease-in-out infinite;
}

.float-four {
  animation: drift2 9s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { margin-top: 0px; }
  50% { margin-top: -6px; }
}

@keyframes drift2 {
  0%, 100% { margin-top: 0px; margin-left: 0px; }
  50% { margin-top: -8px; margin-left: 4px; }
}

@keyframes drift3 {
  0%, 100% { margin-top: 0px; margin-left: 0px; }
  50% { margin-top: 5px; margin-left: -6px; }
}

@keyframes drift4 {
  0%, 100% { margin-top: 0px; }
  50% { margin-top: 7px; }
}

@media (max-width: 900px) {
  .nucleus {
    width: 140px;
    height: 140px;
  }

  .project {
    width: 110px;
    height: 110px;
  }

  .node-title {
    font-size: 0.9rem;
  }

  .node-subtitle {
    font-size: 0.66rem;
  }
}

@media (max-width: 700px) {
  body {
    overflow: auto;
  }

  .network-page {
    min-height: 100vh;
    height: auto;
    padding: 3rem 1rem 5rem;
  }

  .connections {
    display: none;
  }

  .node,
  .nucleus,
  .project,
  .project:nth-of-type(2),
  .project:nth-of-type(3),
  .project:nth-of-type(4),
  .project:nth-of-type(5) {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 1.2rem auto;
  }

  .nucleus:hover {
    transform: scale(1.05);
  }
}