body {

    padding: 0;
    margin: 0;
    background: linear-gradient(to right, #040404, #030303, #050505, #070707, #090909, #0a0a0a);
}

/* N A V B A R */

.navbar-container {
    background: linear-gradient(to right, #202020, #222222, #141414, #0f0f0f, #0a0a0a, #090909);
    width: 100%;
    display: block;
    overflow: hidden;
}

.navbar {

    background: #333;
    border: 2px solid #ccc;
    border-radius: 5px;

    transition: background 1s ease, border-color 1s ease;
}

/* P U L S A N T I */

.mode-navbar,
.logo-navbar {

    width: auto;
    height: 48px;
    border-radius: 5px;
    transition: background 1s ease;
}

.mode-navbar:hover,
.logo-navbar:hover {

    background: rgba(0, 128, 0, 0.5);
}

/* S E Z I O N I */

.nav-link {

    color: #ccc;
    cursor: pointer;
    transition: color 1s ease;
}

.nav-link:hover {

    color: rgba(0, 128, 0, 1);
}

/* H E A D E R */

.header {

    min-height: 100vh;
    background-image: url('./images/BackgroundBlack.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.overlay {

    position: absolute;
    min-height: 100%;
    min-width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
}

.description {

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
}

/* T I T O L O */

.description h1 {

    font-size: 36pt;
    color: #ccc;
    transition: color 1s ease, font-size 0.5s ease;
}

.description h1:hover {

    font-size: 48pt;
    color: rgba(0, 128, 0, 1);
}

/* D E S C R I Z I O N E */

.description p {

    line-height: 1.5;
    font-size: 12pt;
    color: #ccc;
    transition: color 1s ease, font-size 0.5s ease;
}

.description p:hover {

    font-size: 16pt;
    color: rgba(0, 128, 0, 1);
}

/* I M M A G I N E C O M P E T E N Z E*/

.ling {
    padding: 25px 0px;
}

.immagini {

    display: block;
    object-fit: contain;
    margin: 0 auto;
    max-width: 150px;
    height: 150px;

    border: 3px solid #ccc;
    background: rgba(128, 128, 128, 0.5);
    border-radius: 5px;
    transition: transform 1s ease, background 1s ease;
}

.immagini:hover {

    background: rgba(0, 128, 0, 0.5);
    transform: scale(1.05);
}

/* C O M P E T E N Z E */

.row {

    margin: 50px;
}

.container {

    margin: 50px auto;
    border: 2px solid #ccc;
    border-radius: 5px;
    background: #222;
}

.features h1:hover {

    font-size: 44pt;
    color: rgba(0, 128, 0, 1);
}

.features .titolo {

    padding-bottom: 30px;
    font-size: 32pt;
    color: #ccc;
    text-align: center;

    transition: color 1s ease, font-size 0.5s ease;
}

.features .titoletto {

    padding-bottom: 15px;
    font-size: 16pt;
    color: #ccc;
    text-align: center;
    transition: color 1s ease;
}

.features .titolettino {

    padding: 5px;
    margin-top: 10px;
    font-size: 16pt;
    color: #ccc;
    text-align: center;
    transition: color 1s ease;
}

.ling p {

    width: 300px;
    color: #ccc;
    margin: 0 auto;
    text-align: center;
    transition: color 1s ease;
}

.page-footer:hover .text-uppercase:hover,
.link-footer a:hover,
.titolettino:hover,
.titoletto:hover,
.titolo:hover,
.ling p:hover,
.tes p:hover {
    color: rgba(0, 128, 0, 1) !important;
}

/* F O O T E R */

.page-footer,
.text-uppercase,
.tes p {

    color: #ccc;
    transition: color 1s ease;
}

.link-footer a {

    color: #ccc !important;
    text-decoration: none;
    transition: color 1s ease;
}

.footer-copyright {

    color: #555;
}

/* M E D I A Q U E R Y */

@media (max-width: 768px) {

    .navbar-toggler {

        width: auto;
        height: 48px;
        margin-left: auto !important;
        border: 2px solid #ccc;
    }

    .navbar-toggler-icon {
        /* USATO PER MANTENERE LO STESSO TEMA DI COLORI IN TUTA LA PAGINA*/
        filter: invert(85%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
    }

    .navbar-collapse {

        text-align: center;

        border: 2px solid #ccc;
        border-radius: 5px;
    }

    .nav-link {

        margin-left: 10% !important;
        width: 80%;
        border-bottom: 2px solid #ccc;
    }

    .navbar-nav .nav-item:last-child .nav-link {

        border-bottom: none !important;
    }

    /*description*/
    .description {
        width: 90%;
    }

    .description h1 {
        font-size: 28pt;
    }

    .description h1:hover {
        font-size: 32pt;
    }

    .description p:hover {
        font-size: 14pt;
    }

    /*footer*/
    .footer-contacts {
        text-align: center !important;
    }

    .page-footer {
        padding: 40px 15px;
        text-align: center;
    }

    /*mode-light*/
    body.light-mode .navbar-toggler {
        border: 2px solid #000;
    }

    body.light-mode .navbar-collapse {
        border: 2px solid #000;
    }

    body.light-mode .nav-link {
        border-bottom: 2px solid #000;
    }

    /* F O R M */

    .login-card {
        width: 90%;
        padding: 20px;
    }

    .login-card .titolo {
        font-size: 24pt;
    }

    .login-card .titolo:hover {
        font-size: 28pt;
    }

    .login-input {
        padding: 8px !important;
    }

    .navbar-container .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }

    .nav-link {
        white-space: nowrap;
        font-size: 0.9rem;
        border-bottom: none !important;
        text-decoration: none !important;
        margin-right: 15px ;
    }
}

/* M O D A L I T A' L I G H T */


body.light-mode {

    background: linear-gradient(to right, #9c9c9c, #9f9f9f);
}


body.light-mode .navbar-container {

    background: linear-gradient(to right, #aaaaaa, #9e9e9e);

}

body.light-mode .overlay {

    background: rgba(192, 192, 192, 0.8);
}

body.light-mode .navbar,
body.light-mode .container {

    background: #ddd;
    border: 2px solid #333;
    transition: background 1s ease, border-color 1s ease;
}

body.light-mode .immagini {

    background: #bbb;
    border: 2px solid #333;
}

body.light-mode .description h1,
body.light-mode .description p,
body.light-mode .nav-link,
body.light-mode .footer-copyright,
body.light-mode .text-uppercase,
body.light-mode .titolettino,
body.light-mode .titoletto,
body.light-mode .titolo,
body.light-mode .ling p,
body.light-mode .page-footer,
body.light-mode .link-footer a,
body.light-mode .tes p {

    color: #333 !important;
    transition: color 1s ease, font-size 1s ease;
}

body.light-mode .description h1:hover,
body.light-mode .description p:hover,
body.light-mode .nav-link:hover,
body.light-mode .footer-copyright:hover,
body.light-mode .link-footer a:hover,
body.light-mode .immagini:hover,
body.light-mode .text-uppercase:hover,
body.light-mode .titolettino:hover,
body.light-mode .titoletto:hover,
body.light-mode .titolo:hover,
body.light-mode .ling p:hover,
body.light-mode .tes p:hover {

    color: rgba(0, 128, 0, 1) !important;
}

/* F O R M */

html {
    scroll-behavior: smooth;
}

.login-body-fix {
    background: linear-gradient(to right, #040404, #030303, #050505, #070707, #090909, #0a0a0a);
    min-height: 100vh;
}

.login-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
}


.login-card {

    width: 100%;
    max-width: 450px;
    padding: 40px;
    background: #333;
    border: 2px solid #ccc !important;
    border-radius: 5px;

    transition: border-color 1s ease;
}

.login-card .titolo {
    font-size: 32pt;
    color: #ccc;
    text-align: center;
    transition: color 1s ease, font-size 0.5s ease;
}

.login-card .titolo:hover {
    color: rgba(0, 128, 0, 1);
}

.login-card .titolettino {
    font-size: 14pt;
    color: #ccc;
    transition: color 1s ease;
}

.login-card .titolettino:hover {
    color: rgba(0, 128, 0, 1);
}

.login-input {
    padding: 12px;
    background: #555;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn-submit-style {
    background: none;
    padding: 12px;
    width: 100%;
    font-size: 14pt;
    border: 2px solid #ccc;
    color: #ccc;
    border-radius: 5px;
    transition: 0.5s;
    cursor: pointer;
}

.btn-submit-style:hover {
    background: rgba(0, 128, 0, 0.5);
    color: #fff;
}