:root {
    --bg: #020203;
    --card: #08080B;
    --border: #17131D;

    --white: #FFFFFF;

    --purple: #4B3268;
    --purple-light: #5B3A82;
    --blue: #243653;
}


/* RESET */

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


html {
    scroll-behavior:smooth;
}


body {
    font-family:'Inter', sans-serif;
    background:var(--bg);
    color:white;
    line-height:1.6;
}


h1,
h2,
h3 {

    font-family:'Space Grotesk', sans-serif;

    color:white;

    letter-spacing:-0.03em;

}


h4 {

    font-family:'Inter', sans-serif;

    color:white;

}


p,
li {

    color:white;

}


a {

    color:white;

    text-decoration:none;

}





/* HEADER */

header {

    background:#020203;

    border-bottom:1px solid var(--border);

}


nav {

    max-width:1100px;

    margin:auto;

    padding:22px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.logo {

    font-family:'Space Grotesk', sans-serif;

    font-size:32px;

    font-weight:800;

    letter-spacing:-0.08em;

    line-height:1;

    padding:6px;


    background:

    linear-gradient(
        135deg,
        var(--purple-light),
        var(--blue)
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}





/* NAV */

nav div:last-child {

    display:flex;

    align-items:center;

    gap:12px;

}


nav a {

    color:white;

    padding:8px 14px;

    border-radius:8px;

    font-size:15px;

    font-weight:600;

    white-space:nowrap;

    transition:.25s ease;

}


nav a:hover {

    background:#0D0914;

    color:#A98AD0;

}





/* MAIN */

main {

    max-width:1100px;

    margin:auto;

    padding:0 30px;

}


section {

    margin:60px 0;

}


section h2 {

    margin-bottom:30px;

}





/* HERO */

.hero {

    padding-top:70px;

}


.hero h1 {

    font-size:64px;

}


.hero h2 {

    font-size:22px;

    font-weight:500;

}


.hero p {

    max-width:650px;

    margin-top:20px;

    display:block;

}



/* Remove hover animation from hero text */

.hero p::after {

    display:none;

}





/* BUTTONS */

.buttons {

    display:flex;

    gap:15px;

    margin-top:30px;

}


.buttons a {

    background:

    linear-gradient(
        135deg,
        var(--purple),
        var(--blue)
    );


    color:white;

    padding:10px 22px;

    border-radius:8px;

    font-weight:600;

    transition:.25s ease;

}


.buttons a:hover {

    transform:translateY(-2px);

}





/* STATS */

.stats {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}


.stats div {

    background:var(--card);

    border:1px solid var(--border);

    border-radius:14px;

    padding:25px;

    position:relative;

    overflow:hidden;

}


.stats strong {

    display:block;

    font-family:'Space Grotesk';

    font-size:38px;

}


.stats span {

    display:block;

    color:white;

}





/* TEXT HOVER EFFECT */

.card p,
.card li,
.game-card p,
.skills span,
.stats span {


    position:relative;

    overflow:hidden;

}



.card p::after,
.card li::after,
.game-card p::after,
.skills span::after,
.stats span::after {


    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );


    transition:left .75s ease;

}



.card p:hover::after,
.card li:hover::after,
.game-card p:hover::after,
.skills span:hover::after,
.stats span:hover::after {

    left:130%;

}





/* EXPERIENCE */

.card {

    background:var(--card);

    border:1px solid var(--border);

    border-radius:14px;

    padding:30px;

    margin-bottom:25px;

}


.card h3 {

    font-size:26px;

    margin-bottom:6px;

    line-height:1.2;

}


.card h4 {

    font-size:18px;

    font-weight:600;

    margin-bottom:8px;

    line-height:1.4;

}


.card p {

    display:block;

    width:100%;

    text-align:left;

}


.card ul {

    width:100%;

    padding-left:22px;

    margin-top:15px;

}


.card li {

    display:list-item;

    margin-bottom:12px;

    line-height:1.6;

}





/* GAME CARDS */

.game-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}


.game-card {

    background:var(--card);

    border:1px solid var(--border);

    border-radius:14px;

    overflow:hidden;

}


.game-card img {

    width:100%;

    height:180px;

    object-fit:cover;

}


.game-card div {

    padding:20px;

}


.game-card p {

    display:block;

    width:100%;

}





/* SKILLS */

.skills {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.skills span {

    background:#09070D;

    border:1px solid #241833;

    border-radius:20px;

    padding:8px 15px;

}





/* CONTACT */

#contact {

    text-align:center;

}


#contact p {

    text-align:center;

    margin-bottom:15px;

}


#contact a {

    display:inline-block;

    text-align:center;

    font-weight:600;

}





/* MOBILE */

@media(max-width:800px){


    nav {

        flex-direction:column;

        gap:15px;

    }


    .hero h1 {

        font-size:42px;

    }


    .stats,
    .game-grid {

        grid-template-columns:1fr;

    }

}