/* 
   fiblay
 */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body {

    font-family:"Press Start 2P", monospace;

    background:#020402;

    min-height:100vh;

    color:#d6e8c8;

    overflow-x:hidden;

}





/* 
        WIRE FRAME
 */


#wireframe {

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    z-index:0;

    pointer-events:none;

    opacity:.35;

}




.site {

    width:960px;

    margin:auto;

    padding-bottom:60px;

}

.site {

    position:relative;

    z-index:1;

}



/* 
        BOOT SCREEN
 */


#boot-screen {

    position:fixed;

    top:0;

    left:0;


    width:100vw;

    height:100vh;


    background:#020402;


    z-index:9999;


    display:flex;

    justify-content:center;

    align-items:center;

}



#boot-container {

    width:70%;

}



#boot-text {

    color:#7fbf45;

    font-size:14px;

    line-height:2;

    text-shadow:

        0 0 5px #355f22;

}



.boot-line {

    opacity:0;

    animation:

        bootAppear .3s forwards;

}



@keyframes bootAppear {

    from {

        opacity:0;

    }


    to {

        opacity:1;

    }

}



#cursor {

    animation:

        blink .7s infinite;

}



@keyframes blink {

    50% {

        opacity:0;

    }

}





/* 
        LOADING BAR
 */


#loading-bar {

    margin-top:30px;


    width:100%;


    height:25px;


    background:#050805;


    border:

        2px solid #355f22;


    padding:3px;

}



#loading-fill {


    width:0%;


    height:100%;


    background:

        linear-gradient(
            #8fcf55,
            #355f22
        );


    transition:

        width .3s;

}



#loading-percent {


    margin-top:10px;


    color:#7fbf45;


    font-size:12px;

}





/* 
        HEADER
 */


header {


    margin-top:25px;


    padding:18px 20px;


    display:flex;


    justify-content:space-between;


    align-items:center;



    background:

        linear-gradient(
            #101810,
            #050805
        );



    border:

        2px solid #355f22;



    border-radius:8px;



    box-shadow:

        inset 0 2px rgba(255,255,255,.08),

        0 8px 20px black;

}



.logo {


    color:#7fbf45;


    font-size:24px;


    letter-spacing:2px;



    text-shadow:

        2px 2px #000;

}






nav a {


    display:inline-block;


    margin-left:10px;


    padding:10px 14px;



    color:#071007;



    text-decoration:none;



    font-size:11px;



    background:

        linear-gradient(
            #8fcf55,
            #355f22
        );



    border:

        2px solid #7fbf45;



    border-radius:5px;



    box-shadow:

        inset 0 2px white,

        0 4px 8px black;

}





nav a:hover {


    background:

        linear-gradient(
            #b2e879,
            #477d2d
        );

}





/* \
        SECTIONS
 */


section {

    margin-top:60px;

    margin-bottom:60px;

}





/* 
        WINDOW PANELS
 */


.window {


    margin-top:35px;


    background:#080d08;



    border:

        2px solid #355f22;



    border-radius:6px;



    overflow:hidden;



    box-shadow:

        0 10px 25px black;

}



.window-bar {


    padding:12px;



    color:#071007;



    font-size:12px;



    background:

        linear-gradient(
            #8fcf55,
            #355f22
        );

}



.window-content {


    padding:30px;


    line-height:1.8;

}





/* 
        HERO
 */


.hero {


    text-align:center;


    padding:40px 0;

}



.hero h1 {


    font-size:38px;


    color:#7fbf45;



    text-shadow:

        3px 3px #000;

}



.hero p {


    margin:25px;


    color:#91a98b;


    font-size:12px;

}










/* 
        HEADINGS
 */


h2 {


    color:#7fbf45;


    font-size:22px;


    margin-bottom:25px;



    text-shadow:

        2px 2px #000;

}





/* 
        PROJECTS
 */


.projects {


    display:grid;


    grid-template-columns:

        repeat(3,1fr);



    gap:25px;

}



.project {


    background:#080d08;


    border:

        2px solid #263d1c;



    border-radius:6px;



    overflow:hidden;


    transition:.3s;

}



.project:hover {


    border-color:#7fbf45;


    transform:

        translateY(-5px);

}



.project img {


    width:100%;


    height:200px;


    object-fit:cover;

}



.project h3 {


    padding:15px;


    color:#7fbf45;


    font-size:13px;

}



.project p {


    padding:0 15px 15px;


    color:#91a98b;


    font-size:10px;

}



.project a {


    display:block;


    margin:15px;


    padding:12px;



    text-align:center;


    background:#7fbf45;



    color:#071007;



    text-decoration:none;


    font-size:11px;

}





/* 
        SKILLS
 */


.skills ul {


    display:flex;


    justify-content:center;


    gap:15px;


    flex-wrap:wrap;


    list-style:none;

}



.skills li {


    padding:12px 20px;


    color:#7fbf45;


    background:


        linear-gradient(
            #101810,
            #050805
        );



    border:

        2px solid #355f22;



    border-radius:5px;



    font-size:11px;



    box-shadow:

        inset 0 2px rgba(255,255,255,.08),

        0 4px 8px black;

}






/* 
        SOCIALS
 */


.socials {


    display:flex;


    gap:20px;


    flex-wrap:wrap;


    justify-content:center;

}



.social-button {


    display:flex;


    align-items:center;


    gap:12px;


    padding:15px 20px;



    color:#071007;


    text-decoration:none;


    font-size:11px;



    background:

        linear-gradient(
            #8fcf55,
            #355f22
        );



    border:

        2px solid #7fbf45;



    border-radius:5px;

}





/*
        VISITOR COUNTER
 */


.visitor-count {


    margin:25px auto 20px;


    display:block;


    width:max-content;



    padding:12px 20px;



    background:#050805;



    color:#7fbf45;



    border:

        2px solid #355f22;



    font-size:12px;


    letter-spacing:2px;



    box-shadow:

        inset 0 0 10px black;

}





/* 
        FOOTER
 */


footer {


    margin-top:50px;


    padding-bottom:40px;



    text-align:center;


    color:#556b50;


    font-size:10px;

}





/* 
        MOBILE OPTIMIZATION
        FINLAY.EXE
 */


@media screen and (max-width:600px){


    .site {

        width:92%;

        padding-bottom:50px;

    }




    /* HEADER */

    header {

        flex-direction:column;

        align-items:center;

        gap:18px;

        padding:15px;

    }



    .logo {

        font-size:20px;

        text-align:center;

    }





    /* NAVIGATION */

    header nav {

        width:100%;

        display:grid;

        grid-template-columns:

            repeat(3, 1fr);

        gap:8px;

    }



    header nav a {

        margin:0;

        width:100%;

        padding:10px 3px;


        font-size:9px;

        text-align:center;


        white-space:nowrap;

    }






    /* HERO */

    .hero {

        padding-top:20px;

        padding-bottom:40px;

    }



    .hero h1 {

        font-size:25px;

        line-height:1.5;

    }




    .hero p {

        font-size:10px;

        line-height:2;

    }







    /* WINDOWS / PANELS */

    .window-content {

        padding:20px;

    }




    h2 {

        font-size:16px;

    }







    /* PROJECTS */

    .projects {

        grid-template-columns:1fr;

        gap:20px;

    }



    .project img {

        height:180px;

    }








    /* SKILLS */

    .skills ul {

        display:grid !important;

        grid-template-columns:

            repeat(2,1fr) !important;


        gap:10px;

        width:100%;

    }



    .skills li {

        width:100%;

        padding:12px 5px;


        font-size:9px;


        text-align:center;


        white-space:nowrap;

    }







    /* SOCIAL BUTTONS */

    .socials {

        display:grid;

        grid-template-columns:

            repeat(2,1fr);

        gap:10px;

    }



    .social-button {

        min-width:0;

        padding:12px 5px;

        font-size:9px;

    }







    /* VISITOR COUNTER */

    .visitor-count {

        max-width:100%;

        text-align:center;

        font-size:9px;

    }





    footer {

        padding-bottom:40px;

    }


}

/*
        SMALL MOBILE NAV FIX*/
@media screen and (max-width:600px){

    header nav {

        display:flex;

        justify-content:center;

        flex-wrap:nowrap;

        gap:5px;

        width:100%;

    }


    header nav a {

        flex:1;

        min-width:0;

        padding:8px 2px;

        margin:0;
 
        font-size:7px;

        letter-spacing:-1px;

        text-align:center; 

        white-space:nowrap;

    }

}

.portfolio-button {

    text-align:center;

    margin-top:40px;

}


.portfolio-button .button {

    display:inline-block;


    padding:14px 35px;


    background:

        linear-gradient(
            #8fcf55,
            #355f22
        );


    color:#071006;


    border:

        2px solid #7fbf45;


    border-radius:8px;


    font-weight:bold;


    text-decoration:none;


    box-shadow:

        inset 0 3px white,

        0 5px 15px black;


    transition:.2s;


}



.portfolio-button .button:hover {

    transform:translateY(-3px);


    background:

        linear-gradient(
            #b5e878,
            #5d9635
        );

}




.portfolio-button .button:active {


    transform:

        translateY(2px);



    box-shadow:

        inset 0 4px rgba(0,0,0,.35);

}





/* MOBILE BUTTON */

@media screen and (max-width:600px){


    .portfolio-button .button {


        width:100%;


        min-width:0;


        padding:14px 10px;


        font-size:8px;


    }


}