/* Stili di base */


html {
    height: 100%;
}

body {
    display: table;
    width: 100%;
    min-height: 100%;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #8d8b94;
    background-color: #333;
}

.body-container {
    background-color: black;
    background-color: #8d8b94;
    color: #e4d7d7;
    min-height: 350px;
}

body .container {
    min-height: 200px;
}

body > footer {
    display: table-row;
}

/* Footer */
footer {
    background-color: #333;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    position: absolute;
    width: 100%;
}

/* Header */
header {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}



/* Navigazione */
nav {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

    nav a {
        color: #fff;
        text-decoration: none;
        padding: 0 10px;
        border-radius: 5px;
    }

        nav a:hover {
            text-decoration: none;
            border-radius: 10px;
        }

.container {
    width: 100%;
    margin: 5px;
    padding: 5px;
}


footer div ul li a {
    color: #e4d7d7;
    text-decoration: none;
}

footer div ul li a {
    color: #6d75ff;
    text-decoration: underline;
}



ul .artista-li {
    list-style-type: circle;
    margin-left:50px;
}


/* Stili per dispositivi più piccoli */
@media only screen and (max-width: 600px) {
    .container {
        width: 100%;
    }
}





/*SCROLLBAR*/


/* width */
::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b30000;
    }




/*SCROLLUP - SCROLLDOWN*/

#arrowUp {
    position: fixed;
    height: auto;
    width: auto;
    right: 20px;
    top: 400px;
    font-size: 58px;
    font-weight: bold;
}

    #arrowUp a {
        text-decoration: none;
        color: black;
        font-weight: bold;
        font-family: serif;
        opacity: 0.7;
    }



/*STICKY HEADER*/

/* Style the header */
.header-s {
    padding: 20px 30px;
    background: #555;
    color: #f1f1f1;
}

/* Page content */
.content-s {
    padding: 16px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky-s {
    position: fixed;
    top: 0;
    width: 100%
}

    /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
    .sticky-s + .content-s {
        padding-top: 102px;
    }




.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}