.space-grotesk-website {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #ffffff;
  }
}

:root {
  --border-color: #65e9c3; /* darker green for light mode */
}

body.dark {
  --border-color: #CFFFE2; /* light green for dark mode */
}

.project-container {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 20px;
  border: thick solid var(--border-color);
  padding: 5px;
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-container:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  transform: translateY(-8px); 
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.project-description {
  padding: 2px 16px;
}

.project-languages {
  padding: 2px 16px;
}

.project-languages span {
  border: 1px solid var(--text-color);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 0.9rem;
}

::view-transition-group(root) {
  animation-timing-function: var(--expo-in);
}

::view-transition-new(root) {
  mask: url('gokupoweringup.gif') center / 0 no-repeat;
  animation: scale 2.0s ease-in-out both;;
  animation-fill-mode: both;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: scale 2.0s ease-in-out both;;
  animation-fill-mode: both;
}

@keyframes scale {
  0% {
    mask-size: 0;
  }
  10% {
    mask-size: 10vmax;
  }
  90% {
    mask-size: 10vmax;
  }
  100% {
    mask-size: 100vmax;
  }
}