/* ---------- Fonts & reset ---------- */
@font-face { font-family: openDyslexic; src: url(font/OpenDyslexic-Regular.otf); }
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;font-family:'openDyslexic',sans-serif;background:#1a1a2e;color:#eee;}

/* ---------- Navigation ---------- */
nav{
  position:fixed;top:0;left:0;right:0;
  background:rgba(0,0,0,.8);backdrop-filter:blur(10px);
  z-index:1000;padding:.5rem 0;text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}
nav a{
  background:none;border:none;color:#ccc;font-size:1.1rem;margin:.8rem .8rem;padding:.5rem 1rem;
  cursor:pointer;transition:all .3s;text-decoration:none;
}
nav a:hover, nav a.active{color:#0f0;text-shadow:0 0 10px #0f0;}

#hamburger{
  display:none;position:fixed;top:15px;right:15px;font-size:40px;background:none;border:none;color:#ccc;
  cursor:pointer;z-index:10000;
}

#mobile-menu{display:none;position:fixed;inset:0;background:rgba(0,0,0,.97);backdrop-filter:blur(10px);
             z-index:9999;padding-top:100px;text-align:center;overflow-y:auto;}
#mobile-menu.active{display:block;}
#mobile-menu a{
  display:block;width:88%;margin:18px auto;
  padding:22px;font-size:26px;background:none;border:none;color:#ccc;
  cursor:pointer;transition:all .3s;text-decoration:none;
}
#mobile-menu a:hover,#mobile-menu a.active{color:#0f0;text-shadow:0 0 15px #0f0;}

@media (max-width:868px){
  #hamburger{display:block !important;}
  nav{display:none !important;}
}

/* ---------- Pages ---------- */
.page{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-top:80px;opacity:0;visibility:hidden;transition:opacity .4s;
}
.page.active{opacity:1;visibility:visible;}

#home   {background:linear-gradient(135deg,#667eea,#764ba2);}
#animal {background:linear-gradient(135deg,#f093fb,#f5576c);}
#games  {background:linear-gradient(135deg,#404040,#E5E5E5);}
#it     {
  background-size:400% 400%;
  animation:gradientShift 1.5s ease infinite;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
@keyframes gradientShift{
  0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}
}
#contact{background:linear-gradient(135deg,#43e97b,#38f9d7);}

.content{padding:2rem;overflow-y:auto;width:100%;}
h1{font-size:2.5rem;margin:1rem 0;text-align:center;}
h2{font-size:1.5rem;margin:1rem 0;text-align:center;}
p{font-size:1.3rem;line-height:1.6;margin:1rem 0;text-align:center;}

.hover{transition:transform .3s;box-shadow:0 10px 40px rgba(0,0,0,.4);border-radius:15px;}
.hover:hover{transform:scale(1.2);box-shadow:0 20px 60px rgba(0,0,0,.6);}

#donateBtn,#contactBtn{
  display:inline-block;padding:1.4rem 3.2rem;margin:1.5rem 0;
  font-weight:600;color:#000;background:linear-gradient(90deg,#00ffcc,#cc00ff);
  border-radius:999px;text-decoration:none;
}
.donateLink{
  display:inline-block;padding:1.4rem 3.2rem;margin:1.5rem 0;
  font-weight:600;color:#000;background:linear-gradient(90deg,#00ffcc,#cc00ff);
  border-radius:999px;text-decoration:none;
}

#habImg,#ffsImg,#originalImg,#upscale32xImg,#hamCutoutImg,#pongImg,#TAFImg{
  width:45%;max-width:600px;margin:1rem;display:inline-block;
}
#studioImg{width:60%;max-width:1200px;margin:1rem;display:inline-block;}

/* ---------- Slideshow ---------- */
.slideshow-container{max-width:1000px;position:relative;margin:auto;}
.mySlides{display:none;text-align:center;}
.prev,.next{
  cursor:pointer;position:absolute;top:50%;width:auto;margin-top:-22px;padding:16px;color:white;font-weight:bold;
  font-size:18px;transition:.6s ease;border-radius:0 3px 3px 0;user-select:none;
}
.next{right:0;border-radius:3px 0 0 3px;}
.prev:hover,.next:hover{background-color:rgba(0,0,0,.8);}
.text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:-1.5rem;width:100%;text-align:center;}
.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:-1.5rem;width:100%;}
.dot{
  cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;
  transition:background-color .6s ease;
}
.active,.dot:hover{background-color:#717171;}

/* ---------- Loader (used in the IT slideshow) ---------- */
.loader{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:8px solid #f3f3f3;border-top:8px solid #3498db;border-radius:50%;
  width:60px;height:60px;animation:spin 1s linear infinite;
}
@keyframes spin{
  0%{transform:translate(-50%,-50%) rotate(0deg);}
  100%{transform:translate(-50%,-50%) rotate(360deg);}
}


/* 
uploader
*/

#uploadForm {
    margin-bottom: 20px;
}

#gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.image-container {
    position: relative;
    margin: 10px;
    width: 200px;
    height: 200px;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delete-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: red;
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
}