/* Page */
html, body {
  scroll-behavior: smooth;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

body::-webkit-scrollbar {
  display: none;
}

/* Blob */
.animated-blobs {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  overflow: hidden;
  background: #0c0c0c;
}

.animated-blobs::before, .animated-blobs::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 0, 150, 0.2), transparent 50%),
              radial-gradient(circle at 70% 70%, rgba(0, 200, 255, 0.2), transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(0, 255, 150, 0.2), transparent 50%);
  animation: blobFlow 60s linear infinite;
}

.animated-blobs::after {
  animation-delay: -30s;
  transform: rotate(180deg);
}

@keyframes blobFlow {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Navbar */
.navbar.bg-dark {
  background-color: rgba(0, 0, 0, 0.3) !important; 
  transition: background-color 0.3s ease;
}

.navbar.bg-dark:hover {
  background-color: rgba(0, 0, 0, 0.8) !important; 
}

.navbar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 15%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
  pointer-events: none;
  z-index: -1;
}

.navbar a,
.navbar .nav-link,
.navbar-brand {
  color: white !important;
}

.navbar-toggler {
  border-color: white;
  box-shadow: none;
}

.navbar-toggler-icon {
  filter: invert(1);
}


/* Content */
section {
  scroll-snap-align: start;
}

.section-container {
  width: 85%;
  max-width: 1000px;
  padding: 2rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.3); 
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px); 
}

.fullscreen-section {
  min-height: 100vh;
}

@media (max-width: 450px) {
  .fullscreen-section {
    min-height: auto;
    margin-top: 15rem;
    margin-bottom: 6rem;
  }
}

.medium-margin{
  margin-bottom: 50px;
}

/* Presentation */

.profile-img {
  width: clamp(100px, 20vw, 200px);
  height: auto;
  border: 4px solid white;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.floating-img {
  margin-top: clamp(-100px, -150px,-200px);
  z-index: 2;
  position: relative;
}

.presentation{
  font-size: clamp(1rem, 2vw, 1.25rem);
}

/* Skill */
.skill-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-color: rgba(0, 0, 0, 0.3); 
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  min-height: 100%;
}

.skill-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.skill-card p {
  min-height: 3.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Game cards inside */
.game-card {
  background-color: rgba(0, 0, 0, 0.3); 
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.game-card:hover {
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
}

.game-card p {
  min-height: 3.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Contact */
.contact-card {
  background-color: rgba(0, 0, 0, 0.3); 
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}