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

body{

    min-height:100vh;

    overflow-x:hidden;

    background:
        radial-gradient(circle at top,#2d1155 0%,#141424 35%,#09090d 100%);

    font-family:"Manrope",sans-serif;
    display:flex;

    flex-direction:column;
}

main{

    flex:1;

}

.hero{

    width:100%;

    padding-top:80px;

    padding-bottom:40px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.hero-title{

    font-size:96px;

    font-weight:900;

    letter-spacing:8px;

    text-transform:uppercase;

    background:linear-gradient(
        90deg,
        #ffffff,
        #d5b4ff,
        #9b5cff,
        #ffffff
    );

    background-size:300% 300%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    opacity:0;

    animation:
        heroIntro 1s ease .45s forwards,
        gradientMove 12s linear infinite 1.4s,
        glow 5s ease-in-out infinite 1.4s;

}

@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

@keyframes glow{

    0%{

        filter:drop-shadow(0 0 5px rgba(180,120,255,.20));

        transform:scale(1);

    }

    50%{

        filter:
            drop-shadow(0 0 10px rgba(180,120,255,.45))
            drop-shadow(0 0 20px rgba(120,60,255,.25));

        transform:scale(1.008);

    }

    100%{

        filter:drop-shadow(0 0 5px rgba(180,120,255,.20));

        transform:scale(1);

    }

}
@keyframes heroGlow{

    0%{

        transform:translateX(-50%) scale(1);

        opacity:.65;

    }

    50%{

        transform:translateX(-50%) scale(1.15);

        opacity:1;

    }

    100%{

        transform:translateX(-50%) scale(1);

        opacity:.65;

    }

}

.hero-subtitle{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    color:#b889ff;

    font-size:22px;

    letter-spacing:8px;

    margin-bottom:18px;

    opacity:.9;

    opacity:0;

    animation:fadeIn .8s ease forwards;

}

.hero-subtitle img{

    width:24px;

    height:24px;

    filter:drop-shadow(0 0 8px rgba(180,120,255,.35));

}

.hero-subtitle,
.hero-title{

    position:relative;

    z-index:1;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(-12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroIntro{

    from{

        opacity:0;

        transform:translateY(24px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

.twitch-button{

    margin:36px auto 0;

    width:260px;
    height:58px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    text-decoration:none;

    color:#ffffff;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(180,120,255,.25);

    border-radius:16px;

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 0 20px rgba(120,60,255,.08);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
    
    opacity:0;
    animation:buttonIntro .8s ease 1.2s forwards;

}

@keyframes buttonIntro{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.twitch-button img{

    width:22px;

    height:22px;

}

.twitch-button span{

    font-size:16px;

    font-weight:600;

}

.twitch-button .arrow{

    transition:transform .25s ease;

}

.twitch-button:hover{

    transform:translateY(-3px);

    background:rgba(180,120,255,.10);

    border-color:rgba(180,120,255,.65);

    box-shadow:
        0 0 28px rgba(160,90,255,.30);

}

.twitch-button:hover .arrow{

    transform:translateX(5px);

}

footer{

    margin-top:auto;

    padding-bottom:35px;

    text-align:center;

}

.footer-line{

    width:180px;

    height:1px;

    margin:0 auto 22px;

    background:rgba(255,255,255,.12);

}

footer p{

    color:rgba(255,255,255,.45);

    font-size:13px;

    letter-spacing:2px;

}

footer strong{

    color:#b889ff;

    font-weight:600;

}

.projects{

    width:min(900px,90%);

    margin:90px auto 0;

}

.projects h2{

    text-align:center;

    color:#caa8ff;

    font-size:34px;

    letter-spacing:4px;

    margin-bottom:35px;

}

.project-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:26px 32px;

    text-decoration:none;

    color:white;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(180,120,255,.20);

    border-radius:20px;

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

.project-card:hover{

    transform:translateY(-4px);

    background:rgba(180,120,255,.08);

    border-color:rgba(180,120,255,.55);

    box-shadow:0 0 28px rgba(160,90,255,.22);

}

.project-card h3{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:28px;

    margin-bottom:8px;

}

.project-card h3 img{

    width:30px;

    height:30px;

}

.project-card p{

    color:rgba(255,255,255,.70);

    font-size:15px;

}

.project-card span:last-child{

    font-size:34px;

    transition:transform .25s ease;

}

.project-card:hover span:last-child{

    transform:translateX(8px);

}

.coming-soon{

    margin-top:50px;

    text-align:center;

    color:rgba(255,255,255,.45);

}

.coming-soon h3{

    margin-bottom:8px;

    font-size:18px;

}