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



:root {



    /* color */

    --color-dark-bg: #1A1A2E;

    --color-blue: #0babcf;

    --color-fuchsia: #FF00DE;

    --color-red: #FF3366;

    --color-green: #39FF14;



    /* Shadows */

    --shadow-blue: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--color-blue), 0 0 30px var(--color-blue);

    --shadow-fuchsia: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--color-fuchsia), 0 0 30px var(--color-fuchsia);

    --shadow-red: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--color-red), 0 0 30px var(--color-red);

    --shadow-green: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--color-green), 0 0 30px var(--color-green);

    --shadow-red: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--color-red), 0 0 30px var(--color-red);

}



img {

    -webkit-user-drag: none;

}



/*scrool bar \/ */



::-webkit-scrollbar{

    width: 15px;

}



::-webkit-scrollbar-track{

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

}



::-webkit-scrollbar-thumb {

    background: var(--color-blue);

    border-radius: 10px;

}



/*scroll bar /\   */



* {

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

}



body {

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

    color: #fff;

}



.neon-text {

    text-shadow: 0 0 5px #fff, 0 0 10px #fff;

}



.neon-text.blue, .neon-blue { 

    color: var(--color-blue); 

    text-shadow: var(--shadow-blue); 

}



.neon-text.fuchsia { 

    color: var(--color-fuchsia); 

    text-shadow: var(--shadow-fuchsia); 

}



.neon-text.green { 

    color: var(--color-green); 

    text-shadow: var(--shadow-green); 

}



.neon-text.red, .neon-red { 

    color: var(--color-red); 

    text-shadow: var(--shadow-red); 

}



.nav-link {

    transition: all 0.3s ease;

    &:hover {

        color: var(--color-green);

        text-shadow: var(--shadow-green);

    }

}



#score {

    border: 2px dotted var(--color-fuchsia);

    padding: 5px 10px;

}



.line {

    border: 2px solid var(--color-fuchsia);

}



.line-blue {

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

    box-shadow: 0 0 15px rgba(0, 207, 255, 0.5);

}



.line-red {

    border: 2px solid var(--color-red);

}



.hero {

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8));

    background-size: cover;

}



.neon-btn {

    background: none;

    border: 2px solid var(--color-fuchsia);

    color: var(--color-fuchsia);

    padding: 15px 30px;

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

    cursor: pointer;

    box-shadow: var(--shadow-fuchsia);

    transition: all 0.3s ease;

    text-decoration: none;

    border-radius: 8px;

    &:hover {

        background-color: rgba(255, 0, 222, 0.2);

        box-shadow: 0 0 10px #fff, 0 0 40px var(--color-fuchsia), 0 0 80px var(--color-fuchsia);

    }

}



.features {

    background-color: #000;

}



.hoverIMG {

    transition-duration: 0.5s;

    &:hover {

        cursor: pointer;

        transform: translateY(-0.5rem);

        box-shadow: #2c2c2c 0px 10px 30px 15px;

    }

}



.imgRounded {

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

}



.box-giochi {

    border: 2px solid var(--color-blue);

    box-shadow: 0 0 15px rgba(0, 207, 255, 0.5);

    border-radius: 15px;

    transition-duration: 0.3s;

    &:hover {

        cursor: pointer;

        transform: translateY(-0.5rem);

        border: 2px solid var(--color-fuchsia);

        box-shadow: 0 0 15px rgba(255, 0, 222, 0.8);



        .h5 {

            color: var(--color-fuchsia);

            text-shadow: var(--shadow-fuchsia);

        }



    }

}



.box {

    margin-top: 5%;

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

    border-radius: 15px;

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

    height: 30rem;

    transition-duration: 0.5s;

    &:hover {

        cursor: pointer;

        box-shadow: var(--color-dark-bg) 0px 0px 20px 0px;

        

        h2 {

            color: var(--color-fuchsia);

        }

    }

}



.box img { 

    width: 85%; 

    height: 60%;

    border: 2px solid var(--color-fuchsia);

}