:root {  --bg-color: #121212;  --text-color: #fff;  --container-bg: #1e1e1e;  --container-shadow: rgba(255, 255, 255, 0.1);  --accent: lightblue;  --accent-hover: deepskyblue;  --success: #28a745;  --success-hover: #218838;  --link-color: lightblue;  --muted-color: #ccc;  --footer-bg: #1a1a1a;  --footer-border: #444;  --form-bg: #1e1e1e;  --form-text: #ccc;  --form-border: #555;  --sign-button-color: lightblue;  --sign-hover-color: lightgray;  --button-text-color: black;  --header-bg: #1a1a1a;  --header-link-color: lightblue;}html, body {  min-height: 100vh;}body {  display: flex;  flex-direction: column;  margin: 0;  font-family: sans-serif;  background-color: var(--bg-color);  color: var(--text-color);  overflow-x: hidden;}main {  flex: 1;}.center {  display: flex;  justify-content: center;  align-items: center;  padding: 2rem 0;  text-align: center;}.container,.wrapped-container {  text-align: center;  background-color: var(--container-bg);  border-radius: 8px;  box-shadow: 0 0 10px var(--container-shadow);  padding: 1rem;}h1, h2, h3 {  margin: 12px;  color: var(--accent);}.button,.return {  display: inline-block;  font-weight: 400;  text-align: center;  vertical-align: middle;  user-select: none;  padding: 0.375rem 0.75rem;  font-size: 1rem;  line-height: 1.5;  border-radius: 0.25rem;  cursor: pointer;  border: 1px solid transparent;  text-decoration: none;  transition: background-color 0.15s ease-in-out, transform 0.2s;  color: var(--button-text-color);  background-color: var(--accent);}.button:hover,.return:hover {  opacity: 0.9;  transform: scale(1.05);}.button-primary {  color: #fff;  background-color: var(--accent);  border-color: var(--accent);}.button-primary:hover {  background-color: var(--accent-hover);}footer {  background-color: var(--footer-bg);  color: var(--muted-color);  text-align: center;  padding: 10px;  margin-top: 40px;  border-top: 1px solid var(--footer-border);}footer p {  margin: 0;  font-size: 14px;}.header-container {  display: flex;  justify-content: space-between;  align-items: center;  padding: 15px 40px;  background-color: var(--header-bg);  height: 72px;}.center-nav-link {  display: flex;  justify-content: center;  align-items: center;  padding: 2rem 0;  color: var(--header-link-color);  text-decoration: none;  font-weight: bold;}.center-nav-link a:hover,.nav-links a:hover {  text-decoration: underline;}.nav-links {  display: flex;  gap: 20px;}.nav-links a {  color: var(--header-link-color);  text-decoration: none;  font-weight: bold;}.category {  margin-bottom: 3rem;}.carousel-wrapper {  position: relative;  overflow: hidden;  width: 100%;}.carousel {  display: flex;  width: max-content;  will-change: transform;  transform: translateX(25%);  animation: scroll 50s linear infinite;  gap: 20px;}@keyframes scroll {  from { transform: translateX(25%); }  to { transform: translateX(-25%); }}.carousel:hover {  animation-play-state: paused;}.project-card {  min-width: 300px;  max-width: 400px;  width: 100%;  border-radius: 10px;  text-align: center;  text-decoration: none;  color: white;  transition: transform 0.3s ease;  overflow: visible;}.project-card span {  display: block;  margin-top: 8px;  color: var(--text-color);  font-weight: bold;  text-align: center;}.project-card:hover {  transform: scale(1.05);}.project-card img,.gallery-image {  min-width: 300px;  max-width: 400px;  display: block;  width: 100%;  height: 100%;  object-fit: cover;  border-radius: 18px;  transition: transform 0.2s ease;}.project-card img:hover,.gallery-image:hover {  transform: scale(1.05);}.vertical { display: flex; flex-direction: column; }.left { text-align: left; }.top-center { position: absolute; left: 50%; transform: translateX(-50%); }.left-btn { left: -50px; }.right-btn { right: -50px; }.carousel-btn:hover { background-color: var(--accent-hover); }.like-button {  margin-top: 15px;  padding: 8px 16px;  background-color: var(--success);  border: none;  border-radius: 6px;  cursor: pointer;  font-weight: bold;  color: white;}.like-button:hover {  background-color: var(--success-hover);}.gallery {  display: flex;  flex-wrap: wrap;  gap: 20px;  justify-content: center;  margin-top: 20px;}.image-wrapper {  position: relative;  aspect-ratio: 16 / 9;  overflow: hidden;  border-radius: 16px;  border: 1px solid rgba(255, 255, 255, 0.1);  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);}.image-wrapper img {  width: 100%;  height: 100%;  object-fit : cover;  display: block;}.image-wrapper:hover {  transform: scale(1.08);}.overlay-text {  position: absolute;  bottom: 12px;  left: 12px;  background: var(--bg-color);  backdrop-filter: blur(8px);  padding: 6px 14px;  border-radius: 10px;  font-size: 0.85rem;  font-weight: 500;  pointer-events: none;  border: 1px solid rgba(255, 255, 255, 0.1);  z-index: 2;}