body {

    background-color: rgb(20, 166, 166);

    background-image: url('../assets/img/background.jpg');

    background-size: 100%;

    background-repeat: no-repeat;

    background-attachment: scroll;

    justify-content: center;

}



:any-link{

    text-decoration: none;

    color: inherit;

}



.navbar{

    background: rgba(62, 192, 192, 0.35);

    border-radius: 50px;

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    padding: 3px 1px;

    border-radius: 50px;

    display: flex;

    width: 245px;

    flex-direction: row;

    align-items: center;

    justify-content: left;

}



.navbarElement{

    background-image: url(./img/water.jpg);

    background-repeat: no-repeat;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    background-position: 40%;

    background-size: 300%;

    border-radius: 50px;

    padding: 15px 10px;

    text-align: center;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    font-size: 120%;

    width: 100%;

}



.navbarMusica{

    background: rgba(62, 192, 192, 0.35);

    border-radius: 50px;

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    padding: 3px 1px;

    border-radius: 50px;

    display: flex;

    width: 215px;

    flex-direction: row;

    align-items: center;

    justify-content: left;

}







.logo{

    background-image: url('../assets/img/sigil.png');

    background-size: 600px;

    padding-left: 13vw;

    padding-right: 13vw;

    padding-top: 23vh;

    padding-bottom: 23vh;

    background-repeat: no-repeat;

    background-position: center;

    align-items: center;

    justify-content: center;

}



.ltext{

    text-align: center;

    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    font-style: italic;

    font-weight: 600;

    font-size: 350%;

    color: rgb(97, 78, 5);

    text-shadow: 1px 1px 4px#9a9a9a ;

}





.content{

    background: rgba(62, 192, 192, 0.35);

    border-radius: 50px;

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    margin-top: 10vh;

    margin-left: 16vw;

    margin-right: 16vw;

    margin-bottom: 5vh;

    border-radius: 50px;

    padding: 2vh 3vw 2vh;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    font-size: 130%;

}



#galleryContent{

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

    margin-top: 2vh;

    margin-left: 8vw;

    margin-right: 8vw;

    margin-bottom: 2vh;

    padding: 2vh 3vw 2vh;

}



.element{

    background-image: url(./img/water.jpg);

    background-repeat: no-repeat;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    background-position: 40%;

    background-size: 100%;

    border-radius: 50px;

    padding: 3% 4%;

    margin-bottom: 2vh;

}



.smallElement{

    background-image: url(./img/water.jpg);

    background-repeat: no-repeat;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    background-position: 40%;

    background-size: 100%;

    border-radius: 50px;

    padding: 2% 4%;

    padding-bottom: 3%;

    margin-bottom: 2vh;

}



.smallElement2{

    background: rgba(228, 228, 228, 0.4);

    border-radius: 50px;

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    padding: 2% 4%;

    padding-bottom: 3%;

    margin-top: 1vh;

    width: 350px

}



#Carneficina{

    background-image: url(./img/playlist/deaf.jpg);

    background-position: 0 0;

    background-size: 100%;

}



#Giudecca{

    background-image: url(./img/playlist/giudecca.png);

    background-position: 0 0;

    background-size: 100%;

}



#I8{

    background-image: url(./img/playlist/18.jpg);

    background-position: 0 0;

    background-size: 100%;

}

#Sette{

    background-image: url(./img/playlist/Senzanome.png);

    background-position: 0 0;

    background-size: 100%;

}



#Salvia{

    background-image: url(./img/playlist/salvia.jpg);

    background-position: 0 0;

    background-size: 100%;

}

#H20{

    background-image: url(./img/playlist/H20.jpg);

    background-position: 0 0;

    background-size: 100%;

}



#HYP{

    background-image: url(./img/playlist/noniden.png);

    background-position: 0 0;

    background-size: 100%;

}



#DNB{

    background-image: url(./img/playlist/2000.jpg);

    background-position: 0 0;

    background-size: 100%;

}





.footer{

    font-size: small;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    font-style: italic;

    color: #d7d7d7;

    margin-bottom: 2vh;

    justify-content: center;

    text-align: center;

}



h1{

    font-size: 105%;

    font-weight: 700;

}



h2{

    font-size: 100%;

    font-weight: 600;

    margin-bottom: 0.3em;

    margin-top: 0.5em;

}



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

    body{

        background-size: 250%;

    }



    .logo{

        background-size: 450px;

        padding-left: 13vw;

        padding-right: 13vw;

        padding-top: 15vh;

        padding-bottom: 15vh;

    }



    .ltext{

        font-size: 250%;

    }



    .content{

        margin-top: 8vh;

        margin-left: 5vw;

        margin-right: 5vw;

        margin-bottom: 5vh;

    }

    

    .element{

        padding: 5% 10%;

    }



    .smallElement{

        padding: 5% 8%;

    }



    .smallElement2{

        padding: 8% 8%;

        width: 200px;

    }



    h1{

        font-size: 125%;

    }



    h2{

        font-size: 120%;

        margin-bottom: 0.5em;

        margin-top: 0.5em;

    }



    p{

        font-size: 120%;

    }

}