:root {

    /* colors */

    --color-dark-bg: #0F1626;

    --color-mid-bg: #1B263B;

    --color-green-eco: #28A745;

    --color-green-accent: #39FF14;

    --color-contrast: #FF6600;

    --color-text: #F8F9FA;

    --color-text-muted: #AAAAAA;



    /* shadows */

    --shadow-tech-glow: 0 0 10px rgba(57, 255, 20, 0.6), 0 0 20px rgba(57, 255, 20, 0.3);

}



/*scrool bar \/ */



::-webkit-scrollbar{

    width: 15px;

}



::-webkit-scrollbar-track{

    background: var(--color-mid-bg);

}



::-webkit-scrollbar-thumb {

    background: var(--color-green-eco);

    border-radius: 10px;

}



/*scroll bar /\   */





img {

    -webkit-user-drag: none;

}



* {

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

}



.subtitle { font-family: 'Poppins', sans-serif;}



body {

    background-color: var(--color-dark-bg);

    color: #fff;

}



.neon-green {

    color: var(--color-green-accent);

}



.line {

    border: 2px solid var(--color-green-eco);

}



.btnEWWR {

    background-color: var(--color-green-eco);

    padding: 2% 4%;

    border-radius: 8px;

    transition-duration: 0.5s;

    color: #000;

    &:hover {

        color: #fff;

        background-color: #2bd60c;

    }

}



.neon-btn {

    color: var(--color-green-accent);

    text-decoration: none;

    border: 2px solid var(--color-green-accent);

    background: var(--color-mid-bg);

    padding: 1% 1.5%;

    box-shadow: var(--color-green-accent) 0px 0px 10px 0px;

    transition-duration: 0.5s;

    &:hover {

        background-color: rgba(57, 255, 20, 0.1);

        box-shadow: var(--color-green-accent) 0 0 15px;

    }

}



.hero {

    background: linear-gradient(135deg, rgba(15, 22, 38, 0.9) 0%, rgba(40, 167, 69, 0.2) 100%), 

                repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 5px);

    background-size: cover;

}



.navBG {

    background-color: rgba(0, 0, 0, 0.5);

}



.hoverIMG {

    transition-duration: 0.5s;

    &:hover {

        cursor: pointer;

        transform: translateY(-0.5rem);

    }

}



.imgRounded {

    border-radius: 13px 13px 0px 0px;

}



.box {

    margin-top: 5%;

    border: 1px solid var(--color-green-eco);

    border-radius: 15px;

    background-color: var(--color-mid-bg);

    height: 30rem;

    transition-duration: 0.5s;

    &:hover {

        cursor: pointer;

        box-shadow: var(--color-green-accent) 0px 0px 20px 0px;

        

        h2 {

            color: var(--color-green-accent);

        }

    }

}



.box img { 

    width: 85%; 

    height: 60%;

    border: 2px solid var(--color-green-eco);

}



.box h2 {

    color: var(--color-green-eco);

}



.box p a {

    text-decoration: none;

    color: var(--color-green-accent);

    font-weight: bold;

}



.footer {

    border-top: 2px solid var(--color-green-eco);

    background-color: var(--color-mid-bg);

}