/* ==================================================
   Just for fun
                                             - cheech
   ================================================== */

:root{
  --container-max: 900px;
  --radius: 12px;
  --gap: 1rem;
  --bg: #f0f0f0;
  --card-bg: #fff;
  --text: #222;
  --muted: #777;
  --accent: #ff6b6b;
  --accent-2: #4ecdc4;
  --btn-hover: #45b7aa;
  --shadow: 0 6px 18px rgba(16,24,40,0.08);
  --transition: 0.22s ease;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #121212;
    --card-bg: #1e1e1e;
    --text: #e6e6e6;
    --muted: #b0b0b0;
    --accent: #ff8a80;
    --accent-2: #26a69a;
    --btn-hover: #00897b;
    --shadow: 0 6px 22px rgba(0,0,0,0.45);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding: clamp(12px, 4vw, 40px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  transition:background-color var(--transition), color var(--transition);
  overflow-x:hidden;
}

.container{
  width:100%;
  max-width:var(--container-max);
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:clamp(12px, 4vw, 28px);
  box-shadow:var(--shadow);
  text-align:center;
  opacity:0;
  animation:fadeInContainer 1s ease-out forwards;
  transition:background-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

h1{
  margin:0 0 0.5rem 0;
  color:var(--accent);
  font-size:clamp(1.25rem, 4.5vw, 2.25rem);
  line-height:1.05;
  transform:translateY(-20px);
  opacity:0;
  animation:slideDownTitle 0.8s ease-out 0.2s forwards;
}

p{
  margin:0 0 1rem 0;
  font-size:clamp(0.95rem, 2.8vw, 1.05rem);
  line-height:1.6;
  color:var(--text);
  opacity:0;
  animation:fadeInText 0.6s ease-out 0.5s forwards;
}

.image-wrapper{margin:1.25rem 0; position:relative; display:block}

#meme-image{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  border:2px solid rgba(0,0,0,0.06);
  opacity:0;
  animation:fadeInImage 1.2s ease-out 0.8s forwards;
  transition:transform var(--transition);
  object-fit:cover;
}


footer{margin-top:1.5rem; color:var(--muted); font-size:0.9rem; opacity:0; animation:fadeInText 0.6s ease-out 1s forwards}

@keyframes fadeInContainer{to{opacity:1}}
@keyframes slideDownTitle{to{transform:translateY(0); opacity:1}}
@keyframes fadeInText{to{opacity:1}}
@keyframes fadeInImage{0%{opacity:0; transform:scale(0.96)}100%{opacity:1; transform:scale(1)}}

@keyframes shakeImagegentle{
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes shakeImagemedium{
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-1deg); }
  75% { transform: translateX(4px) rotate(1deg); }
}

@keyframes shakeImagestrong{
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-6px) rotate(-2deg); }
  50% { transform: translateY(-2px); }
  75% { transform: translateX(6px) rotate(2deg); }
}

.layout-row{display:flex; gap:var(--gap); align-items:center}
.layout-row .image-wrapper, .layout-row .content{flex:1}

@media (min-width:700px){
  body{align-items:center}
  .container{padding:clamp(18px, 3.5vw, 36px)}
}

@media (min-width:900px){
  .container{display:block}
  h1{font-size:clamp(1.5rem, 2.5vw, 2.5rem)}
  p{font-size:1.05rem}
}

body.dark{
  background:var(--bg);
  color:var(--text);
}
body.dark .container{background:var(--card-bg); box-shadow:var(--shadow)}

@media (max-width:420px){
  .container{padding:12px}
}

img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:focus{outline:2px dashed rgba(0,0,0,0.08); outline-offset:3px}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1200;
  visibility:hidden;
  opacity:0;
  transition:opacity 200ms ease, visibility 200ms ease;
}
.modal.open, .modal[aria-hidden="false"]{visibility:visible; opacity:1}
.modal-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,0.65); backdrop-filter:blur(2px);
}
.modal-content{
  position:relative;
  max-width:95%;
  max-height:95vh;
  padding:8px;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-content img{max-width:100%; max-height:85vh; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,0.5)}
.modal-close{
  position:absolute; top:8px; right:8px; z-index:2;
  background:transparent; border:none; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer;
  padding:6px 8px; border-radius:6px;
}
.modal-close:focus{outline:2px solid rgba(255,255,255,0.2)}

@media (max-width:420px){
  .modal-content img{max-height:92vh; border-radius:6px}
  .modal-close{font-size:1.25rem}
}