/*====================================================
  RESET
====================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial,Helvetica,sans-serif;

    background:
    linear-gradient(
    135deg,
    #dbeafe,
    #fce7f3,
    #dcfce7);

    min-height:100vh;

    color:#111;

    overflow-x:hidden;

}


/*====================================================
SCROLLBAR
====================================================*/

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-thumb{
    background:#2563eb;
    border-radius:50px;
}

::-webkit-scrollbar-track{
    background:#edf2ff;
}


/*====================================================
HEADER
====================================================*/

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:75px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 15px;

    z-index:9999;

    backdrop-filter:blur(15px);

    background:
    linear-gradient(
    135deg,
    #ff3f15,
    #ff15e7,
    #ff3f15);

    box-shadow:
    0 8px 25px
    rgba(0,0,0,.18);

}


/*====================================================
SITE TITLE
====================================================*/

.site-title{

    color:#10ffff;

    font-size:22px;

    white-space:nowrap;

    font-weight:bold;

    text-shadow:
    3px 3px 8px
    rgba(255,0,0,.8);

}


/*====================================================
HOME BUTTON
====================================================*/

.home-link{
padding: 10px 18px;
  margin-right: 20px;
  text-decoration: none;
  color: #f0f;
  background: white; 
  border-radius: 10px;
  position: relative;
  font-weight: bold;
}

.home-link::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  background: linear-gradient(90deg,#00ffcc,#00bfff,#0000ff);
  background-size: 300%;
  animation: sky 3s linear infinite;
  z-index: -1;
}

@keyframes sky {
  0% {background-position:0%}
  100% {background-position:300%}
}


/*====================================================
ARROWS
====================================================*/

.arrow{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:white;

    color:#2563eb;

    cursor:pointer;

    font-size:22px;

    transition:.30s;

    flex-shrink:0;

}

.arrow:hover{

    transform:scale(1.15);

    background:#dbeafe;

}


/*====================================================
LINKS WRAPPER
====================================================*/

.links-wrapper{

    flex:1;

    overflow:hidden;

}


/*====================================================
NAVIGATION
====================================================*/

.links-container{

    display:flex;

    align-items:center;

    gap:18px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

}

.links-container::-webkit-scrollbar{

    display:none;

}


/*====================================================
LINKS
====================================================*/

.nav-link{

    position:relative;

    flex:0 0 auto;

    padding:12px 22px;

    background: cyan;

    text-decoration:none;

    color:#ff0;

    border-radius:12px;

    font-weight:bold;

    transition:.35s;

    white-space:nowrap;

}

.nav-link:hover{

    transform:translateY(-4px);

}


/* Animated Border */

.nav-link::before{

    content:"";

    position:absolute;

    inset:-3px;

    border-radius:14px;

    background:

    linear-gradient(
    90deg,
    red,
    blue,
    lime,
    red);

    background-size:400%;

    animation:rgbBorder 4s linear infinite;

    z-index:-1;

}

@keyframes rgbBorder{

    from{

        background-position:0%;

    }

    to{

        background-position:400%;

    }

}


/*====================================================
ACTIVE LINK
====================================================*/

.nav-link.active{

    background:#bfdbfe;

    transform:
    scale(1.18);

    box-shadow:

    0 0 18px

    rgba(37,99,235,.5);

}

.featured{

    transform:scale(1.06);

}


/*====================================================
MAIN CONTENT
====================================================*/

.content{

    margin-top:95px;

    padding:20px;

    text-align:center;

    animation:fadeUp 9.8s;

}

.content h1{

    font-size:34px;

    margin-bottom:15px;

    color:#0f172a;

    text-shadow:

    3px 3px 8px

    rgba(0,0,255,.35);

}

.author{

    font-weight:bold;

    color:#2563eb;

    margin-bottom:20px;

}


/*====================================================
OPEN BUTTON
====================================================*/

.open-btn{

    display:inline-block;

    text-decoration:none;

    color:white;

    background:#2563eb;

    padding:12px 28px;

    border-radius:12px;

    transition:.35s;

    font-weight:bold;

}

.open-btn:hover{

    background:#f0f;

    transform:scale(1.05);

}


/*====================================================
PROFILE IMAGE
====================================================*/

.profile{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border-top:4px solid red;

    border-bottom:4px solid blue;

    border-left:4px solid lime;

    border-right:4px solid gold;

    animation:

    rotateProfile 10s linear infinite;

    box-shadow:

    0 8px 25px

    rgba(0,0,0,.25);

}

@keyframes rotateProfile{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*====================================================
FADE ANIMATION
====================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

        translateY(250px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}
/*====================================================
PLAY GAME SECTION
====================================================*/

.play-game-section{

    padding:30px 15px;

    margin:30px auto;

    text-align:center;

    background:
    linear-gradient(
    135deg,
    #f5f7fa,
 
    #00ecff);

}

.play-game-section h2{

    font-size:28px;

    color:#1e3a8a;

    margin-bottom:20px;

}

.game-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.game-box{

    position:relative;

    width:220px;

    padding:18px;

    background:white;

    color:#111;

    text-decoration:none;

    font-weight:bold;

    border-radius:15px;

    overflow:hidden;

    transition:.35s;

    box-shadow:

    0 8px 20px rgba(0,0,0,.18);

}

.game-box:hover{

    transform:
    translateY(-8px)
    scale(1.03);

    box-shadow:

    0 12px 30px rgba(0,0,0,.25);

}

.game-box::before{

    content:"";

    position:absolute;

    inset:-3px;

    border-radius:18px;

    background:

    linear-gradient(
    90deg,
    red,
    blue,
    cyan,
    lime,
    red);

    background-size:400%;

    animation:rgbBorder 5s linear infinite;

    z-index:-1;

}

.highlight{

    background:

    linear-gradient(
    135deg,
    #ff4d6d,
    #6a5acd);

    color:white;

}


/*====================================================
FOOTER
====================================================*/

.random-footer{

    margin-top:40px;

    padding:25px 0;

    background:

    linear-gradient(
    135deg,
    #fdf2f8,
    #e0f2fe);

    overflow:hidden;

}

.footer-scroll-wrapper{

    overflow-x:auto;

    scrollbar-width:none;

    -webkit-mask-image:

    linear-gradient(
    to right,
    transparent,
    black 8%,
    black 92%,
    transparent);

}

.footer-scroll-wrapper::-webkit-scrollbar{

    display:none;

}

.footer-links{

    display:flex;

    gap:20px;

    padding:15px 30px;

    width:max-content;

}


/*====================================================
FOOTER LINKS
====================================================*/

.footer-link{

    position:relative;

    flex:0 0 auto;

    text-decoration:none;

    color:#111;

    background:white;

    padding:12px 22px;

    border-radius:12px;

    font-weight:bold;

    overflow:hidden;

    transition:.35s;

}

.footer-link:hover{

    transform:

    translateY(-5px);

}

.footer-link::before{

    content:"";

    position:absolute;

    inset:-3px;

    border-radius:15px;

    background:

    linear-gradient(
    90deg,
    red,
    blue,
    lime,
    magenta,
    red);

    background-size:400%;

    animation:rgbBorder 5s linear infinite;

    z-index:-1;

}


/*====================================================
CENTER FOOTER LINK
====================================================*/

.footer-link.center-active{

    transform:

    scale(1.18);

    animation:

    pulseShadow 2s infinite;

}

@keyframes pulseShadow{

    0%{

        box-shadow:

        0 0 5px red,
        0 0 10px blue;

    }

    50%{

        box-shadow:

        0 0 20px lime,
        0 0 35px magenta;

    }

    100%{

        box-shadow:

        0 0 5px red,
        0 0 10px blue;

    }

}


/*====================================================
CARDS
====================================================*/

.card{

    background:

    rgba(255,255,255,.65);

    backdrop-filter:blur(12px);

    border-radius:20px;

    padding:20px;

    margin:20px auto;

    max-width:900px;

    box-shadow:

    0 12px 25px

    rgba(0,0,0,.15);

}


/*====================================================
GLASS EFFECT
====================================================*/

.glass{

    background:

    rgba(255,255,255,.28);

    backdrop-filter:blur(14px);

    border:

    1px solid

    rgba(255,255,255,.35);

}


/*====================================================
SHADOW UTILITIES
====================================================*/

.shadow{

    box-shadow:

    0 10px 25px

    rgba(0,0,0,.18);

}

.round{

    border-radius:18px;

}


/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:900px){

    .site-title{

        font-size:18px;

    }

    .nav-link{

        padding:10px 18px;

        font-size:15px;

    }

    .game-box{

        width:180px;

    }

}

@media(max-width:700px){

    .header{

        height:70px;

        padding:8px;

        gap:8px;

    }

    .home-link{

        padding:10px 18px;

        font-size:18px;

    }
    
    .home-link:hover{
      
      transform: scale(.55);
    }

    .arrow{

        width:36px;

        height:36px;

        font-size:18px;

    }

    .content h1{

        font-size:28px;

    }

    .profile{

        width:100px;

        height:100px;

    }

    .game-links{

        flex-direction:column;

    }

    .game-box{

        width:95%;

    }

}

@media(max-width:450px){

    .site-title{

        display:none;

    }

    .content{

        padding:15px;

    }

    .content h1{

        font-size:24px;

    }

    .footer-link{

        padding:10px 18px;

        font-size:14px;

    }

}
/*====================================================
DRAGGABLE FLOATING BUTTON
====================================================*/

#draggableBtn{

    position:fixed;

    right:25px;

    bottom:25px;

    width:82px;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    text-decoration:none;

    color:#fff;

    font-size:16px;

    font-weight:bold;

    line-height:1.2;

    border-radius:50%;

    cursor:grab;

    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    touch-action:none;

    z-index:999999;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed,
        #06b6d4);

    background-size:300% 300%;

    animation:
        buttonGradient 6s linear infinite,
        floating 3s ease-in-out infinite;

    box-shadow:
        0 20px 10px rgba(0,0,0,.9);

    transition:
        box-shadow .25s,
        transform .25s;

}


/*====================================================
BUTTON RGB BORDER
====================================================*/

#draggableBtn::before{

    content:"";

    position:absolute;

    inset:-4px;

    border-radius:50%;

    background:
    linear-gradient(
        90deg,
        red,
        yellow,
        lime,
        cyan,
        blue,
        magenta,
        red);

    background-size:500%;

    animation:rgbCircle 5s linear infinite;

    z-index:-1;

}




/*====================================================
HOVER
====================================================*/

#draggableBtn:hover{

    transform:scale(1.08);

    box-shadow:

        0 18px 35px

        rgba(37,99,235,.45);

}


/*====================================================
WHILE DRAGGING
====================================================*/

#draggableBtn.dragging{

    cursor:grabbing;

    animation:none;

    transform:scale(1.10);

    opacity:.92;

}


/*====================================================
SNAP ANIMATION
====================================================*/

#draggableBtn.snap{

    animation:

        snapEffect .30s ease;

}

@keyframes snapEffect{

    0%{

        transform:scale(.8);

    }

    50%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}


/*====================================================
FLOATING
====================================================*/

@keyframes floating{

    0%{

        translate:0 0;

    }

    50%{

        translate:0 -8px;

    }

    100%{

        translate:0 0;

    }

}


/*====================================================
BUTTON BACKGROUND
====================================================*/

@keyframes buttonGradient{

    0%{

        background-position:0%;

    }

    100%{

        background-position:300%;

    }

}


/*====================================================
RGB BORDER
====================================================*/

@keyframes rgbCircle{

    0%{

        background-position:0%;

    }

    100%{

        background-position:500%;

    }

}

/*====================================================
LOADING BUTTON
====================================================*/

.circle-btn{

    width:80px;

    height:80px;

    border:none;

    border-radius:50%;

    overflow:hidden;

    position:relative;

    cursor:pointer;

    background:#d1d5db;

}


.circle-btn.loading::before{

    content:"";

    position:absolute;

    inset:0;

    left:-140%;

    width:45%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.95),

        transparent);

    animation:shimmer 1.1s linear infinite;

}


@keyframes shimmer{

    from{

        left:-150%;

    }

    to{

        left:180%;

    }

}


/*====================================================
NO SCROLL
====================================================*/

.no-scroll{

    overflow:hidden !important;

    height:100vh;

}


/*====================================================
HELPER CLASSES
====================================================*/

.hidden{

    display:none !important;

}

.flex{

    display:flex;

}

.center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.text-center{

    text-align:center;

}


/*====================================================
SMALL SCREEN
====================================================*/

@media(max-width:600px){

    #draggableBtn{

        width:74px;

        height:74px;

        font-size:15px;

        right:18px;

        bottom:18px;

    }

}

@media(max-width:380px){

    #draggableBtn{

        width:68px;

        height:68px;

        font-size:14px;

    }

}

/* GLOWING BORDER */

 .glow {
   
   background: rgba(250,0,255,0.3);
    border: 1px solid rgba(250,0,255,0.9); border-radius: 50px; padding: 18px; margin: 40px auto;  width: 200px;
 font-size: 20px;
 text-shadow: 3px 0 0  #000;
 animation: Glowing 3s infinite; color: #ff0;
  }
  
  @keyframes Glowing {
    0%{box-shadow: 0 0 0 0 black;} 
    50%{box-shadow: 0 0 0 20px transparent;}
    
  } 
  
  .glow:hover{
  transform:scale(1);
}




.clicked{
    transform:scale(1.08);
}


.active-page{
    box-shadow:
    0 0 20px cyan;
}