:root {
    --sfondo_principale: #3498db;
    --carattere_logo: normal normal 400 calc(3em + 0.5vw) "Rubik Dirt", sans-serif;
    --carattere_menu: normal normal 300 calc(1em + 0.1vw) "Exo 2", sans-serif;
    --carattere: normal normal 300 calc(0.9em + 0.1vw) "Exo 2", sans-serif;           /* font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; */
    --carattere_titolo: normal normal 200 calc(1.5em + 0.1vw) "Ranchers", sans-serif;
    --carattere_titolo_disco: normal normal 600 calc(1.4em + 0.1vw) "Exo 2", sans-serif;
    --carattere_form: normal normal 300 calc(0.7em + 0.1vw) "Exo 2", sans-serif;
    --carattere_suggest: normal normal 300 calc(0.7em + 0.1vw) "Exo 2", sans-serif;
  }

body {margin:0; padding:0}

.cb {clear:both;}

/* HEADER */
.headercont {
    box-sizing:border-box;
    margin:0 auto 0 auto;
    padding:1em 1em;
    background-color:lightgray;
    overflow:auto; 
    display:flex; 
    justify-content:center;
}

.header {
    max-width:800px; 
    margin:0 auto; 
    display:flex; 
    align-items:center;}

.logo {
    padding: 0 0 0 0;
    text-align:center;
    color:black; 
    font:var(--carattere_logo);
    line-height:100%;
    letter-spacing: calc(0.05em + 0.05vw);
}
.logo a, .logo a:hover {
    color:black; 
    text-decoration:none;
}

.menu {
    padding:calc(1em + 0.1vw) 0 0 0;
    color:black; 
    text-align:center;
    font: var(--carattere_menu);
    font-optical-sizing: auto;
}
.menu a {
    color:red; 
    text-decoration:none; 
    
}
.menu a:hover {
    color:white; 
    background-color:red; 
    text-decoration:none; 
}
.menu .selected {
    color:white; 
    background-color:red; 
}


.content {
    box-sizing:border-box;
    max-width:800px; 
    margin:calc(1em + 0.1vw) auto 0 auto;
    padding:0 1em;
    text-align:left;
    font: var(--carattere);
    font-optical-sizing: auto;
}

.content b {
    font-weight:600;
}
/* LABEL */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: calc(0.8em + 0.1vw);
    
}
.gallery_vcenter {align-items: center; /* Centra tutti i figli verticalmente nelle loro celle */}

.thumbnail {
    border:1px dotted black;
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
    border-radius: 0.5em;
}

.thumbnail:hover {
    transform: scale(1.1);
}



.releases .titdisco {
    border-radius: 0.5em;
    border:1px solid transparent;
    text-align:center;
}
.releases .titdisco a {
    color:black;
    text-decoration:none;
}
.releases .titdisco:hover a, .releases .titdisco a:hover, .releases .titdisco:hover h2, .releases .titdisco:hover h3 {
    background-color:red;
    color:white;
}

.releases .titdisco h2 {
    margin: calc(0em + 0.01vw) 0 0 0;   
    padding-top:0.1em;
    font:var(--carattere_titolo);
    font-optical-sizing: auto;
    font-size:calc(1em + 0.1vw);
    color:black; 
    text-align:center;
}

.releases .titdisco h3 {
    margin: 0 0 calc(0.1em + 0.01vw) 0; 
    padding-bottom:0.1em;  
    font:var(--carattere);
    font-optical-sizing: auto;
    font-size:calc(0.9em + 0.1vw);
    color:black; 
    text-align:center;
}

.releases .soldout {
    margin: calc(0.3em + 0.01vw) 0 0 0;   
    font:var(--carattere);
    font-size:calc(0.6em + 0.1vw);
    font-optical-sizing: auto;
    font-weight: 50;
    color:red; 
    text-align:center;
}

.smid {
    margin: calc(0.1em + 0.01vw) 0 0;   
    font:var(--carattere);
    font-size:calc(0.8em + 0.1vw);
    font-optical-sizing: auto;
    font-weight: 50;
    color:gray; 
    text-align:center;
}

/* SINGLE RELEASE */
.release {font:var(--carattere); font-optical-sizing: auto; font-size:calc(1em + 0.1vw);}
.release h1 {margin: calc(1em + 0.1vw) 0 calc(1em + 0.1vw) 0; font:var(--carattere_titolo); font-optical-sizing: auto; color:black; text-align:left; letter-spacing: calc(0.05em + 0.01vw);}
.release h2 {margin: calc(1em + 0.1vw) 0 calc(1em + 0.1vw) 0; font:var(--carattere_titolo); font-optical-sizing: auto; color:black; text-align:left; letter-spacing: calc(0.05em + 0.01vw); font-size:calc(1em + 0.1vw);}
.release .cover {margin:0 0 1em 1em; width:30%; float:right;}
.release .desc {width:100%;}
.release .desceng {color:#777777; width:95%; margin:1em 0 1em 0;}
.release .prod {color:#777777; margin:20px 0 20px 0;}
.release .recensione {font-size:calc(0.7em + 0.1vw); color:#666666; margin:5px 0 5px 5px;}

/* SINGLE BAND */
.band h2 {clear:both; margin-top:calc(2em + 0.1vw);}
.band h3 {font-size: calc(0.8em + 0.1vw)}
.band p {font-size: calc(0.8em + 0.1vw)}
.band .record {clear:both;}
.band .cover {margin:0 1em 1em 0; width:125px; float:left; border:1px solid black; border-radius: 0.3em;}
.band .det {font-size: calc(0.75em + 0.1vw)}
.band a {color:black;}
.band a:hover {color:white; background-color:red;}
.band audio controls {width:100%; height:2em;}
.band .vid {width:50%; float:left; text-align:center;}
.band .vid iframe {width: 98%; border-radius: 0.5em; margin-bottom:0.3em;}

/* GOOGLE FONTS */
.rubik-dirt-regular {
    font-family: "Rubik Dirt", system-ui;
    font-weight: 400;
    font-style: normal;
  }

  .ranchers-regular {
    font-family: "Ranchers", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

/* Stile Dialog (Lightbox) */
dialog {
    border: none;
    border-radius: 0.5em;
    padding: 1.2em;
    max-width: 90%;
    max-height: 90%;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8); /* Sfondo oscurato */
}

#dialogImage {
    max-width: 100%;
    max-height: 80vh;
}

/* Bottone Chiudi */
#closeDialog {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    background: white;
    border: none;
    font-size:calc(1em + 0.1vw);
    cursor: pointer;
}