:root {
  --pink1: #fce1ef;
  --pink2: #ffa5d8;
  --pink3: #ffd6ef;
  --accent: #ff6fbb;
  --deep: #e9408f;
  --white: #fff;
  --shadow: rgba(246, 122, 203, 0.16);
}

/* Animated BG */
body {
  margin:0;
  min-height:100vh;
  font-family:'Segoe UI','Fira Sans',Arial,sans-serif;
  color: #52183a;
  overflow-x: hidden;
  background: linear-gradient(-45deg, var(--pink1), var(--pink2), var(--pink3), var(--accent));
  background-size: 400% 400%;
  animation: gradientMove 11s ease infinite;
}
/* Gradient anim */
@keyframes gradientMove {
  0% {background-position:0% 60%;}
  50%{background-position:100% 40%;}
  100%{background-position:0% 60%;}
}

header, footer {
  background: var(--accent);
  color: var(--white);
  padding: 1rem 2rem;
  text-align: center;
  letter-spacing:1px;
  box-shadow:0 4px 22px var(--shadow);
  border-radius: 0 0 18px 18px;
}

nav {
  margin-top:1rem;text-align: center;
  letter-spacing:0.2px;
}
nav a {
  color: var(--deep);
  font-weight:600;
  text-decoration:none;
  margin: 0 1rem;
  padding: 0.35rem 0.85rem;
  border-radius:9px;
  transition: background 0.16s;
  display:inline-block;
  font-size:1.06rem;
}
nav a:hover, nav a.active {background: #fff0f6;}

main {
  max-width:900px;
  margin:2.5rem auto 4rem auto;
  background:rgba(255,255,255,0.88);
  border-radius:19px;
  box-shadow:0 2px 40px var(--shadow);
  padding:2.6rem 2.2rem;
  position:relative;
}

h1 {font-size:2.4rem; font-weight:800;}
h2 {font-size:1.55rem; font-weight:700;}
h3 {font-weight:700;}
.btn, button {
  background:linear-gradient(92deg,var(--accent),var(--pink2));
  border:none;
  border-radius:11px;
  padding: 0.8em 2em;
  color: white;
  font-size: 1.11rem;
  margin: 1.5rem 0.7rem 1rem 0;
  cursor:pointer;
  box-shadow:0 2px 16px var(--shadow);
  transition: background 0.22s, transform 0.18s;
  font-weight:600;
}
.btn:focus, button:focus {outline:2px solid var(--accent);}
.btn:hover,button:hover {
  background: linear-gradient(90deg,#fff,var(--pink1));
  color: var(--accent);
  transform: translateY(-3px) scale(1.045);
}
section.hero {
  display:flex;justify-content:center;align-items:center;
  background:linear-gradient(120deg,var(--pink2)25%,#fff0fa80 100%);
  border-radius:15px;
  box-shadow:0 2px 32px var(--shadow);
  min-height:260px;
  margin-bottom:2rem;
  position:relative;
  overflow:hidden;
}

.hero-img {
  width:170px;height:170px;
  border-radius:50%;object-fit:cover;
  box-shadow:0 3px 19px var(--accent);
  border:3px solid #fff;
  margin-right:2.3rem;
  background:#fff;
}
.hero-content {
  flex:1;
}
.hero-content h1{margin:0;}
.hero-content p{font-size:1.21rem;}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
  grid-gap: 21px;
  margin: 2rem 0 0 0;
}
.gallery-grid img {
  width: 100%;
  height:195px;
  object-fit: cover;
  border-radius: 15px;
  display: block;
  box-shadow:0 4px 16px var(--shadow);
  transition:transform 0.23s,box-shadow 0.23s;
  cursor: pointer;
  background:var(--white);
}
.gallery-grid img:hover {
  transform: scale(1.07) rotate(-3deg);
  box-shadow:0 8px 36px #fc6c8575;
}

/* Timeline */
.timeline {
  margin: 1.5rem 0;
}
.timeline-card {
  background: var(--white);
  margin: 2rem 0;
  border-radius: 17px;
  box-shadow:0 2px 23px var(--shadow);
  padding: 2rem 1.4rem;
  display: flex;align-items: center;gap:1.2rem;
  transition:box-shadow 0.2s;
}
.timeline-card:hover {box-shadow:0 8px 33px var(--shadow);}
.timeline-img {
  width: 90px;height: 90px;border-radius:15px;
  box-shadow:0 3px 12px var(--shadow);
  object-fit:cover;flex-shrink:0; border:2.5px solid var(--accent);
}
.games-wrap {display:flex;flex-wrap:wrap;gap:2.4rem;justify-content:center;}
.gamebox {
  background: #fff7fa;
  border-radius: 17px;
  box-shadow:0 3px 19px var(--shadow);
  padding:2.1rem 1.4rem;
  width:315px;min-height:320px;
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:1.4rem;
}
.memory-board {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  gap:11px;
  justify-content: center;
  margin: 1.2rem 0 0 0;
}
.memory-card {
  width:42px; height:42px;
  background: var(--pink2);
  border-radius: 8px;
  box-shadow:0 2px 8px var(--shadow);
  font-size:1.38rem; color:transparent;
  cursor:pointer;transition:background 0.25s,color 0.25s;
  display:flex;align-items:center;justify-content:center;
  user-select:none;
}
.memory-card.flipped,.memory-card.matched {
  color:#fff; font-weight:700;
  background: var(--accent);
  cursor: default;
}
#bounce-playground{
  min-height:96px;margin-top:1.2rem;
  display:flex;flex-direction:row;align-items:flex-end;gap:18px;justify-content:center;
}
.bounce-ball{
  width:38px;height:38px;
  border-radius:50%;
  background:radial-gradient(circle,var(--accent) 67%,#fff 101%);
  box-shadow:0 5px 23px var(--accent);
  position:relative;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;animation: bounce 1.15s infinite alternate cubic-bezier(.23,.5,.54,.9);
}
@keyframes bounce {to {transform:translateY(-35px);}}
@media (max-width:780px){
  main{padding:1.2rem;}
  .timeline-card{flex-direction:column;text-align:center;}
  .timeline-img{margin-bottom:1rem;}
  .games-wrap{flex-direction:column;align-items:center;}
  .hero-img{margin:0 0 1.2rem 0;}
  .hero{flex-direction:column;text-align:center;}
}