/* ===========================================
   GOOGLE FONT
=========================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Poppins:wght@300;400;600&display=swap');


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

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

html{
    scroll-behavior:smooth;
}

body{

    background:#1c1612;
    color:#f7e0b4;
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;

}

/* ===========================================
   SCROLL BAR
=========================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#2b2017;
}

::-webkit-scrollbar-thumb{
    background:#b86d39;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#ff974f;
}

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

header{

    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px 60px;
    background:#2a2017;
    border-bottom:5px solid #8f6138;
    position:sticky;
    top:0;
    z-index:1000;

}

.player-box{

    text-align:left;

}

.player-box h3{

    font-family:'Press Start 2P',cursive;
    font-size:12px;
    color:#ffe8b8;

}

.hearts{

    margin-top:12px;
    color:#ff5555;
    font-size:20px;

}

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

nav ul{

    list-style:none;
    display:flex;
    gap:35px;

}

nav a{

    color:#f7ddb3;
    text-decoration:none;
    font-family:'Press Start 2P',cursive;
    font-size:10px;
    transition:.3s;

}

nav a:hover{

    color:#ffb35a;
    text-shadow:0 0 10px orange;

}

.score-box{

    text-align:right;

}

.score-box h3{

    font-family:'Press Start 2P',cursive;
    font-size:12px;

}

.score-box p{

    margin-top:10px;
    font-size:15px;
    color:#ffcc7d;

}

/* ===========================================
   HERO SECTION
=========================================== */

.hero{

    display:flex;
    justify-content:space-around;
    align-items:center;
    flex-wrap:wrap;
    min-height:90vh;
    padding:60px;
    gap:50px;

}

/* ==================== TEXT ==================== */

.hero-text{

    max-width:500px;

}

.hero-text h2{

    font-size:28px;
    color:#d8c2a2;

}

.hero-text h1{

    font-family:'Press Start 2P',cursive;
    font-size:65px;
    color:#ffe4a1;
    line-height:1.4;
    margin:20px 0;

}

.hero-text h3{

    color:#f29b59;
    margin-bottom:40px;
    letter-spacing:3px;

}

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

#startBtn{

    background:#d8733d;
    color:white;
    border:none;
    padding:18px 35px;
    font-family:'Press Start 2P',cursive;
    cursor:pointer;
    transition:.3s;
    border-radius:8px;

}

#startBtn:hover{

    background:#ff9955;
    transform:translateY(-5px);
    box-shadow:0 0 20px orange;

}

/* ===========================================
   CRT MONITOR
=========================================== */

.monitor{

    width:500px;
    background:#574235;
    padding:25px;
    border-radius:20px;
    border:10px solid #8c6544;
    box-shadow:
    0 0 40px rgba(0,0,0,.5),
    inset 0 0 20px rgba(255,255,255,.1);

}

.screen{

    background:#111;
    border-radius:10px;
    padding:20px;
    position:relative;
    overflow:hidden;
    border:8px solid #444;

}

/* CRT Scanlines */

.screen::before{

    content:"";
    position:absolute;
    inset:0;

    background:
    repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03) 0px,
    rgba(255,255,255,.03) 2px,
    transparent 2px,
    transparent 4px);

    pointer-events:none;

}

.screen::after{

    content:"";
    position:absolute;
    inset:0;

    background:rgba(0,255,0,.03);
    mix-blend-mode:screen;

}

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

.screen img{

    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:8px;
    border:4px solid #777;

}

/* ==================== GAME MENU ==================== */

.menu{

    margin-top:20px;
    text-align:left;

}

.menu p{

    font-family:'Press Start 2P',cursive;
    font-size:12px;
    color:#84ff84;
    margin:18px 0;
    transition:.3s;
    cursor:pointer;

}

.menu p:hover{

    color:white;
    transform:translateX(10px);

}

/* ===========================================
   COMMON SECTION
=========================================== */

.section{

    padding:80px 10%;
    scroll-margin-top: 120px;
}


.section h2{

    text-align:center;
    margin-bottom:60px;
    font-family:'Press Start 2P',cursive;
    color:#ffcf8c;
    font-size:26px;

}

/* ===========================================
   ABOUT SECTION
=========================================== */

.about-container{

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

}

.about-container img{

    width:280px;
    height:280px;
    object-fit:cover;
    border-radius:15px;
    border:6px solid #8c6544;
    box-shadow:0 0 20px rgba(0,0,0,.5);

}

.about-container div{

    max-width:650px;

}

.about-container p{

    font-size:18px;
    line-height:1.9;
    color:#f6e2bf;
    margin-bottom:20px;

}

/* ===========================================
   PROJECTS
=========================================== */

.hobbies-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:35px;

}

.hobbies-card{

    background:#2d2218;
    border:4px solid #8b613d;
    border-radius:15px;
    overflow:hidden;
    transition:.35s;
    cursor:pointer;

}

.hobbies-card:hover{

    transform:translateY(-10px) scale(1.03);
    box-shadow:0 0 25px rgba(255,170,80,.5);

}

.hobbies-card img{

    width:100%;
    height:220px;
    object-fit:cover;

}

.hobbies-card h3{

    padding:18px;
    font-family:'Press Start 2P',cursive;
    font-size:13px;
    color:#ffd690;

}

.hobbies-card p{

    padding:0 18px 20px;
    color:#ecd4b2;
    font-size:15px;
    line-height:1.7;

}

/* ===========================================
   SKILLS
=========================================== */

.skills-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:25px;

}

.skill{

    background:#3b2b1f;
    border:3px solid #8c6544;
    padding:25px;
    text-align:center;
    border-radius:10px;
    font-family:'Press Start 2P',cursive;
    font-size:12px;
    transition:.3s;

}

.skill:hover{

    background:#d97a3f;
    color:#fff;
    transform:scale(1.08);
    box-shadow:0 0 15px orange;

}

/* ===========================================
   nature
=========================================== */

.nature-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;

}

.nature-grid img{

    width:100%;
    height:230px;
    object-fit:cover;
    border-radius:12px;
    border:4px solid #8b613d;
    transition:.35s;

}

.nature-grid img:hover{

    transform:scale(1.05);
    box-shadow:0 0 25px rgba(255,170,80,.6);

}

/* ===========================================
   ACHIEVEMENTS
=========================================== */

.achievement-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;

}

.achievement{

    background:#2c2117;
    border:4px solid #8b613d;
    border-radius:15px;
    overflow:hidden;
    text-align:center;
    transition:.3s;

}

.achievement:hover{

    transform:translateY(-8px);

}

.achievement img{

    width:100%;
    height:230px;
    object-fit:cover;

}

.achievement h3{

    padding:20px;
    font-family:'Press Start 2P',cursive;
    font-size:12px;
    color:#ffd79a;

}

/* ===========================================
   CONTACT
=========================================== */

form{

    max-width:700px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:20px;

}

input,
textarea{

    padding:18px;
    border:none;
    outline:none;
    background:#302318;
    color:white;
    border:3px solid #8b613d;
    border-radius:8px;
    font-size:16px;

}

textarea{

    resize:none;

}

input::placeholder,
textarea::placeholder{

    color:#ccb693;

}

form button{

    padding:18px;
    border:none;
    background:#d97b42;
    color:white;
    font-family:'Press Start 2P',cursive;
    cursor:pointer;
    transition:.3s;
    border-radius:8px;

}

form button:hover{

    background:#ff9955;
    transform:translateY(-3px);
    box-shadow:0 0 18px orange;

}

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

footer{

    background:#2b2017;
    padding:35px;
    text-align:center;
    border-top:5px solid #8b613d;
    margin-top:80px;

}

footer p{

    font-family:'Press Start 2P',cursive;
    font-size:11px;
    color:#f0d7ab;
}

/* ===========================================
   ANIMATIONS
=========================================== */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes glow{

    0%{
        box-shadow:0 0 10px rgba(255,170,80,.3);
    }

    50%{
        box-shadow:0 0 30px rgba(255,170,80,.9);
    }

    100%{
        box-shadow:0 0 10px rgba(255,170,80,.3);
    }

}

@keyframes flicker{

    0%{opacity:1;}
    5%{opacity:.95;}
    10%{opacity:1;}
    15%{opacity:.97;}
    20%{opacity:1;}
    50%{opacity:.98;}
    70%{opacity:1;}
    100%{opacity:1;}

}

@keyframes scan{

    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(100%);
    }

}

@keyframes heartbeat{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.2);
    }

    100%{
        transform:scale(1);
    }

}

/* ===========================================
   APPLY ANIMATIONS
=========================================== */

.hero{

    animation:fadeUp 1s ease;

}

.hero-text{

    animation:fadeUp 1.2s ease;

}

.monitor{

    animation:float 4s ease-in-out infinite;

}

.hobbies-card{

    animation:fadeUp .8s ease;

}

.achievement{

    animation:fadeUp 1s ease;

}

.skill{

    animation:fadeUp .8s ease;

}

.nature-grid img{

    animation:fadeUp .9s ease;

}

.player-box .hearts{

    animation:heartbeat 1s infinite;

}

#startBtn{

    animation:glow 2s infinite;

}

/* ===========================================
   CRT EFFECT
=========================================== */

.screen{

    animation:flicker .15s infinite;

}

.screen::before{

    animation:scan 6s linear infinite;

}

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

.nature-grid img,
.hobbies-card img,
.achievement img,
.about-container img{

    transition:.4s;

}

.nature-grid img:hover,
.hobbies-card:hover img,
.achievement:hover img,
.about-container img:hover{

    transform:scale(1.05);

}

/* ===========================================
   SELECTION
=========================================== */

::selection{

    background:#ff8f47;
    color:white;

}

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

a{

    transition:.3s;

}

/* ===========================================
   TABLET
=========================================== */

@media(max-width:992px){

header{

    flex-direction:column;
    gap:25px;
    text-align:center;

}

nav ul{

    flex-wrap:wrap;
    justify-content:center;
    gap:18px;

}

.hero{

    flex-direction:column;
    text-align:center;

}

.hero-text h1{

    font-size:48px;

}

.monitor{

    width:90%;

}

.about-container{

    flex-direction:column;
    text-align:center;

}

}

/* ===========================================
   MOBILE
=========================================== */

@media(max-width:768px){

header{

    padding:20px;

}

nav ul{

    flex-direction:column;
    gap:15px;

}

.hero{

    padding:30px;

}

.hero-text h1{

    font-size:34px;

}

.hero-text h2{

    font-size:22px;

}

.hero-text h3{

    font-size:16px;

}

.monitor{

    width:100%;
    padding:15px;

}

.screen img{

    height:220px;

}

.about-container img{

    width:220px;
    height:220px;

}

.nature-grid,
.hobbies-grid,
.skills-grid,
.achievement-grid{

    grid-template-columns:1fr;

}

.section{

    padding:60px 25px;

}

form{

    width:100%;

}

}

/* ===========================================
   SMALL PHONES
=========================================== */

@media(max-width:480px){

.hero-text h1{

    font-size:26px;

}

.hero-text h2{

    font-size:18px;

}

.hero-text h3{

    font-size:14px;

}

.player-box h3,
.score-box h3{

    font-size:9px;

}

nav a{

    font-size:8px;

}

.section h2{

    font-size:18px;

}

footer p{

    font-size:8px;

}

}

/* ===========================================
   OPTIONAL BACKGROUND STARS
=========================================== */

body::before{

    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;

    background-image:
    radial-gradient(#ffffff55 1px, transparent 1px),
    radial-gradient(#ffffff33 1px, transparent 1px);

    background-size:60px 60px,120px 120px;

    opacity:.25;

    z-index:-1;

}