html, body {overflow-x: hidden;}

body { 
    position: relative;
    margin:0;
    padding:0;
    width: 100vw;
    display: grid;
    font-family: "Outfit", sans-serif; 
    background-color: var(--_bg);
    color: var(--_tx);
    scroll-behavior: smooth;
}

a {text-decoration: none;}

body::-webkit-scrollbar {display:none;}

h1, h2, h3, h4, h5{
    text-transform: uppercase; 
}

h1 {
    font-size: clamp(30px, calc(15.455px + 4.545vw), 70px);
    font-weight: 900;  
}

h2 {
    font-size: clamp(25px, calc(2.143px + 2.976vw), 45px);
    font-weight: bold;
}

h3 {
    font-size: clamp(20px, calc(1.972px + 2.294vw), 35px);
    font-weight: 600;
   }

strong {font-weight: bold;}

:root {
    --_bg: #f8f5ef;
    --_tx: #1b1b1b;
    --_ve: #9ad301;
    --_ve2:#739e01;
    --_ar: #ff9800;
    --_ar2:#FFC107;
    --_bl: #5771f6;
    --_ro: #ff1100;
    --_pe: #ffdab9;

}

.immagine-logo {
    width: 130px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 30px;
    z-index:1;
       
}

.back {
    position: fixed;
    right: 25px;
    top: 25px;
    display: grid;
    place-items: center;
    width: 70px;
    aspect-ratio: 1;
    color: white;
    background: var(--_ar);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgb(0 0 0 / .3);
    transition: .3s;
    z-index: 1000;
}

.back:hover {
    transform: translateY(-4px);
    background: var(--_ve);
}

.back svg {
    width: 35px;
    aspect-ratio: 1;
}

.hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: white;
    background: #000000;
    background: linear-gradient(0deg, rgb(0 0 0 / 70%) 50%, var(--_bl) 100%), url(disco.png) no-repeat center center;
    background-size: cover;
    width: 100%; 
    height:100vh;
    padding: 100px;
    justify-content: center;
    align-items: center;
    text-align: center;
    position:relative;
    
}

.hero h1 {
    text-shadow: 
    -4px 4px #ef3550,
    -8px 8px #f48fb1,
    -12px 12px #7e57c2,
    -16px 16px #2196f3,
    -20px 20px #26c6da,
    -24px 24px #43a047,
    -28px 28px #eeff41,
    -32px 32px #f9a825,
    -36px 36px #ff5722;
    margin-bottom: 30px;
}

.ingresso{
    --r: 20px;
    display: flex;
    background-color: var(--_bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%23c18000' fill-opacity='0.16' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");
    height: 110px;
    width: 250px;
    padding: 10px 25px;
    align-items: center;
    justify-content: center;
    transform: scale(.9) rotate(-5deg) translateY(50px);
    mask: radial-gradient(var(--r) at var(--r),#0000 calc(100% - 1px),#000) calc(-1*var(--r));

}

.ingresso h4 {
    text-align: center;
    align-content: center;
    color: var(--_tx);
    font-weight: 900;
    font-size: 25px;
    border: 3px solid #bdbab5;
    border-radius: 10px;    
}

.eventi {
    padding: 45px 30px;
    z-index: 0;
}

.eventi-cont {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sab1, .dom2, .lun3, .mar4, .mer5, .gio6, .ven7, .sab8 {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    column-gap: 0px;
    padding: 40px;
    background: white;
    border-radius: 24px;
    border: 1px solid #ddd;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    position:relative;
    overflow:hidden;

}

.sab1::before, .dom2::before, .lun3::before, .mar4::before, .mer5::before, .gio6::before, .ven7::before, .sab8::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:10px;
    height:100%;
    background:linear-gradient( var(--_ve), var(--_ve2));

}

.eventi-cont h3 {
    grid-column: 2;
    grid-row: 1;
    background: radial-gradient(circle,rgba(119,179,29,1) 0%,rgba(154,211,66,1) 100%);
    color: white;
    border-radius: 40px 0px;
    margin-left: 50px;
    padding: 10px 50px;
    text-align: center;
    width: fit-content;
}

.orari {
    grid-column: 2;
    grid-row: 2;
    margin-left: 50px;
    display: grid;
    grid-template-columns: max-content;
}

.orari h6 {
    grid-column: 1;
    padding: 10px;
    font-weight: bold;
    color: var(--_ve2);
    border-bottom: 1px solid var(--_ve2);
}

.orari p {
    grid-column: 2;
    padding: 10px;
    border-bottom: 1px solid var(--_ve2);

}

.orari p span {
    font-style: italic;
    font-weight: 600; 
}

.locandina{
    grid-column:1;
    grid-row:1 / span 2;
    width:210px;
    aspect-ratio: 5/7;
    border-radius:18px;
    overflow:hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);

}

.sab1 > .locandina {
    background: url(sab1.png) no-repeat center center;
    background-size: cover;

}

.dom2 > .locandina {
    background: url(dom2.png) no-repeat center center;
    background-size: cover;

}

.lun3 > .locandina {
    background: url(lun3.png) no-repeat center center;
    background-size: cover;

}

.mar4 > .locandina {
    background: url(mar4.png) no-repeat center center;
    background-size: cover;

}

.mer5 > .locandina {
    background: url(mer5.png) no-repeat center center;
    background-size: cover;

}

.gio6 > .locandina {
    background: url(gio6.png) no-repeat center center;
    background-size: cover;

}

.ven7 > .locandina {
    background: url(ven7.png) no-repeat center center;
    background-size: cover;

}

.sab8 > .locandina {
    background: url(sab8.png) no-repeat center center;
    background-size: cover;

}

.popup{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    inset:0;
    background:rgba(0,0,0,.65);
    opacity: 0;
    padding: 50px 100px;
    visibility:hidden;
    transition:.3s;
    z-index: 999;
}

.close{
    position:absolute;
    top: -50px;
    left:50%;
    transform:translateX(-50%);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: whitesmoke;
    font-size: 30px;
    cursor: pointer;
    transition: .2s;
    z-index: 999;
}

.close:hover{
    background: var(--_ro);
    color: white;
}

#popup {
    display: none;
}

.dom2 p:nth-child(2), .dom2 h6:first-child{
    line-height: 2;
}

.bottone {
    padding: 5px 15px;
    color: var(--_tx);
    border: 3px outset var(--_bg);
    text-align: center;
    background: var(--_bg);
}

.bottone:hover {
    border-style: inset;
}

.dom2:has(#popup:checked) .popup {
    opacity: 1;
    visibility: visible;
}

html:has(#popup:checked),
body:has(#popup:checked){
    overflow: hidden;
}

body:has(#popup:checked) .back {
    display: none;
}

.prog1{
    position:relative;
    width:min(900px,100%);
    max-height:90vh;
}

.cont {
    position: relative;
    width: 100%;
    align-items: center;
    padding: 30px;
    background-color: whitesmoke;
    overflow: visible;    
    z-index: 10;
}


.cale {
    display: flex;
    text-align: center; 
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 20px;
    background: var(--_bl);
}

.cale > .do, .due, .mese {
    color: white; 
    text-transform: uppercase;
    font-weight: bold;
}

.cale > .do {
    font-size: 50px;

}

.cale > .due {

    font-size: 50px;
}

.mese {
    display: none;
}

.prog {
    padding: 20px 0px;
    font-size: 30px;
    font-weight: bold;
    color: var(--_bl);
    border-bottom: 2px solid var(--_bl);
    
}

.ora {
    display: grid;   
}

.ora h6 {
    grid-column: 1;
    padding: 10px;
    color: var(--_bl);
    font-weight: bold;
    border-bottom: 1px solid var(--_bl);
    height: 100%;
}

.ora:nth-child(8), .ora:nth-child(7) {border-bottom: 1px solid var(--_bl);}

.ora p {
    grid-column: 2;
    border-bottom: 1px solid var(--_bl);
    height: 100%;
    padding: 10px;
    line-height: 1.5;

}

.ora p:nth-child(1) {border-top: none;}

.ora i {
    color: #1b1b1b90;
    font-style: italic;
}

.ref {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.ref h4 {
    font-weight: bold;
    color: var(--_bl);
}

.ref p:nth-child(2) {font-weight: bold;}

@media (max-width: 768px) {
    
.eventi-cont h3 {
     margin-left: 0;
}

.orari {
     margin-left: 0;
}
    
}

@media (max-width: 755px) {

.hero {
    width: 100vw;
    padding:clamp(20px,5vw,100px);
}

.hero h1 {
    text-shadow: 
    0 4px #ef3550,
    0 8px #f48fb1,
    0 12px #7e57c2,
    0 16px #2196f3,
    0 20px #26c6da,
    0 24px #43a047,
    0 28px #eeff41,
    0 32px #f9a825,
    0 36px #ff5722;
    margin-bottom: 30px;
}

.ingresso {
    transform: scale(.7) rotate(-5deg);
}

.back {
    top: 20px;
    right: 30px;

}

.eventi{
    padding: 60px clamp(10px, calc(-12.069px + 6.897vw), 40px);
}

.sab1, .dom2, .lun3, .mar4, .mer5, .gio6, .ven7, .sab8{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.locandina{
    width:100%;
    max-width:250px;
    margin:auto;
    order: 2;
}

.eventi-cont h3{
    margin:0;
    width:100%;
    font-size:20px;
    text-align:center;
    order: 1;
}

.orari{
    order:3;
    display:block;
    margin:0;
    width:100%;
}

.orari h6, .orari p{
     padding:10px 0;
}

.bottone{
    padding: clamp(0px, calc(-3.678px + 1.149vw), 5px) clamp(4px, calc(-4.092px + 2.529vw), 15px);
    font-size: 15px;
}

.popup{
    padding: 60px 20px;
}

.prog1{
    height: 100%;
    overflow: auto;
}

.cale > .do, .cale > .due {
     font-size: 30px;
}
    
.mese {
    display: none;
}

.prog1::-webkit-scrollbar {display:none;}
    
.cont {
    max-height: 80vh;
    transform: translateY(50px) ;
    overflow-y: auto;
    -webkit-overflow-scrolling:touch;
}

.close {
    top: 0px;
}
   
    
}



.copyright {
    text-align: center;
    font-size: large;
    text-transform: uppercase;
    font-weight: 200;
    background: var(--_tx);
    color: whitesmoke;
    padding: 20px;
    
}









*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}