:root{
    --color1:#912b8b;
    --color2:#ad0d9a;
    --color3:#d47edc;
    --color4:#e2aad6;
    --font1: 'Streetscript';
    --font2: 'Crewniverse', sans-serif;
    --font3: "Poppins", sans-serif;
}

@media (max-width: 1245px) {
    #linkLogo{
        margin-right: 5%;
    }
    nav{
        width: 60%;
    }
    #title_hero{
        width: 50%;
    }
}

@media (max-width: 950px) {
    #linkLogo{
        margin-right: 5%;
    }
    nav{
        width: 70%;
    }
    #title_hero{
        width: 70%;
    }
}

@media (max-width: 790px) {
    header{
        position: relative;
        width: 100%;
        border: none;
        position: relative;
        backdrop-filter: blur(50px);
    }
    #linkLogo{
        margin-right: 60%;
    }
    #linkLogo img{
        width: 100px;
    }
    header{
        display: flex;
        justify-content: center;
        position: sticky;
        top: 0px;
    }
    nav{
        display: none;
        position: absolute;
        width: 100%;
        top: 121px;
        height: auto;
        background-color: #ad0d9a;
        border-bottom: 1px solid var(--color5);
    }
    .navLinks{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 0px;
        width: auto;
        padding: 0px;
        margin: 0px;
        text-align: end;
    }
    .navLinks a{
        margin: 0px;
        padding: 20px 20px 20px 0px;
        width: 100%;
        text-shadow: 0px 0px 5px #000;
        color: var(--color5);
        border-bottom: 1px solid var(--color5);
    }
    .navLinks a:hover{
        text-decoration: none;
        background-color: #ad0d9a4d;
    }
    .navLanguage{
        display: flex;
        justify-content: end;
        text-align: end;
        width: auto;
        border-radius: 0px;
        border: none;
        background-color: transparent;
    }
    .navLanguage select{
        color: var(--color5);
        font-size: 15px;
        width: auto;
        padding: 0px;
    }
    header label{
        display: block;
        color: var(--color1);
    }

    input[type = checkbox]:checked ~ nav{
        display: block;
    }

    /* hero */

    #title_hero{
        z-index: -1;
        width: 90%;
    }
    #title_hero h1{
        font-size: 30px;
    }
    .diamonds{
        display: none;
    }
}