body, html{
    background-color: black;
    color: white;
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}
p{
    margin: 0;
    padding: 0;
}

.button1{
    width: 205px;
    height: 98px;

    background-color: rgba(0, 0, 0, 0.6);
    /*// rounded corner*/

    border-radius: 2vmin;
}
.greybutton{
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 2vmin;
    margin: 0.9vw;
    padding: 1.1vw;
}
.greybutton img{
    width: 4vw;
    height: auto;
}

.cloud9-item img{
    width: calc(250/1920 * 100vw);
    height: auto;
}

.nome-personaggio{
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 2vmin;
    margin: 1vh 1vw;
    padding: 0.8vw;
    position: absolute;
    bottom: 1vh;
    width: calc(100% - 3.5vw);

    text-align: center;
    justify-content: center;
    font-family: MontserratExtraBold, Arial, sans-serif;
    font-size: 1.6vw;
}

/*cancel the decoration for anchors, with focus, hover, etc..*/
a, a:visited, a:hover, a:active, a:focus{
    text-decoration: none;
    color: white;
}

.startButton{
    /*width: 205px;*/
    /*height: 100px;*/
    padding: .5vh 3vw;
    /*// round corner*/
    border-radius: 2vmin;
    /*// black opacity 0.5*/
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 2vw;
    /*padding-top: 0.25rem;*/
    /*padding-bottom: 0.25rem;*/
    position: absolute;
    margin: 0 1.5vw;
    line-height: 2;
}
.rowButton{
    display: flex;
}
.arrowRow{
    width: 100%; /* Full width to enable proper centering */
    position: absolute;
    bottom: 10vh;
    text-align: center;
    justify-content: center;
}
.arrowRow svg{
    margin: 1.5vw;
    width: 2.5vw;
    height: auto;
    fill: white;
    cursor: pointer;
}
.splide__arrow--prev svg {
    transform: scaleX(-1);
}

span[lang=en], span[lang=it],
p[lang=en], p[lang=it]
{
    display: none
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 40px); /* Adjusting for the header and footer */
    flex-wrap: wrap;
}
.column {
    max-width: calc(331/1920 * 100vw); /*calc(100% / 5); /* Divide by 5 for 5 columns */
    position: relative;
    margin: 0.7vw;
}
.column img {
    width: calc(331 /1920 * 100vw);
    height: auto;
    vertical-align: bottom; /* Removes the little gap under images displayed as inline */
}
.column .info {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent blue background */
    color: white;
    text-align: center;
    padding: 0.6vw;
    border-radius: 2vmin; /* 26px !!!!! */
    font-size: 1.6vw;
    margin: 1vw;
    font-family: MontserratExtraBold, Arial, sans-serif;
    min-height: 20vh;
    min-width: calc(331 /1920 * 100vw - 3.2vw);
    /*max-width: calc(331 /1920 * 100vw - 3.4vw);*/
    /*width: calc(331 /1920 * 100vw - 3.4vw);*/
    display: flex; align-items: center;
    justify-content: center;
    /*max-width: calc((331/1920 * 100vw) - 2vw); !* Subtract 20px for padding *!*/

}
/* Header and footer styles */
.language{
    margin: 2vh 2vw;
    display: flex;
    align-items: center;

    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.8vw;
    z-index: 10;
    font-family: PPEditorial, MontserratExtraBold, sans-serif;
}
.language img{
    margin-top: 2px;
}
.footer {
    margin: 4vh 2vw;
    font-family: PPEditorial, MontserratExtraBold, sans-serif;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1.5vw;
}
/* Ensure that images are not draggable for better visual presentation */
img {
    -webkit-user-drag: none;
    user-drag: none;
}
.contenuto{
    position: absolute;
    margin: 7vh 5vw;
}
.contenuto2{
    position: absolute;
    z-index: 1;
    margin: 7vh 3vw 7vh 5vw;
}
.titolo{
    font-size: 3.5vw;
    font-family: PPEditorial, MontserratExtraBold, sans-serif;
}
.testo{
    max-width: 50vw;
    max-height: 10vh;
    font-size: 1.25vw;
    text-align: justify;
    text-justify: inter-word;
    min-height: 41vh;
    padding-right: 1vw;

}
.testo2{
    max-width: 38.5vw;
    font-size: 1.3vw;
    text-align: justify;
    text-justify: inter-word;
}
.testo3{
    max-width: 38.5vw;
    /*min-height: 55vh;*/
    font-size: 1.45vw;
    text-align: justify;
    text-justify: inter-word;
}
/*@media not all and (min-resolution:.001dpcm) {*/
/*    @media {*/
/*        .testo3{*/
/*            max-width: 110vw;*/
/*        }*/
/*}*/


/*_::-webkit-full-page-media, _:future, :root .testo3 {*/
/*    max-width: 110vw;*/
/*}*/
.tripleBR{
    display: unset;
}
/*don't display for mobile*/
@media (max-width: 900px) {
    .tripleBR{
        display: none;
    }
}


.content-carousel{
    position: absolute;
    /*max-height: 50vh;*/
    max-width: 100vw;
    right: 0;
    top: 00vh;
}
.content-carousel2{
    /*position: absolute;*/
    /*max-height: 50vh;*/
    max-width: 47vw;
    margin-left: 2vw;
    padding: 2vw
    /*right: 1vw;*/
    /*top: 18vh;*/
}
.splide__track{
    border-radius: 1.5vw;
}
.splide__slide img {
    width: 100%;
    height: auto;
}
.splide__pagination__page{
    width: 1.5vw !important;
    height: 1.5vw !important;
    margin-right: 0.35vw !important;
    margin-bottom: 4vh !important;
}

.div-cloud{
    position: absolute;
    /*top: 1vh;!*calc(1920/100vh);*!*/
    left: 0;
    width: 100%;
    height: 100%;
}

.indietro{
    padding: 0 1vw;
    width: 2.2vw;
    height: auto;
}
@font-face {
    font-family: Arial;
    src: url("/fonts/arial.ttf");
}
@font-face {
    font-family: ArialItalic;
    src: url("/fonts/ariali.ttf");
}
@font-face {
    font-family: MontserratBold;
    src: url("/fonts/Montserrat-Bold.ttf");
}
@font-face {
    font-family: MontserratExtraBold;
    src: url("/fonts/Montserrat-ExtraBold.ttf");
}
@font-face {
    font-family: PPEditorial;
    src: url("/fonts/PPEditorialNew-Ultrabold.otf");
}
.arial{
    font-family: Arial, sans-serif;
}
.arialItalic{
    font-family: ArialItalic, Arial, sans-serif;
}
.montserratBold{
    font-family: MontserratBold, Arial, sans-serif;
}
.montserratExtraBold{
    font-family: MontserratExtraBold, MontserratBold, Arial, sans-serif;
}
.ppEditorial{
    font-family: PPEditorial, Arial, sans-serif;
}
.glass{
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.fullscreen{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 84vw;
    height: 84vh;
    padding: 7.5vh 8vw;
}
.black-cornered{
    background-color: rgb(0, 0, 0);
    padding: 5vh 3vw;
    border-radius: 2vmin;
    /*height: 76vh;*/
    /*width: 76vw;*/
    /*max-height: 76vh;*/
    /*max-width: 76vw;*/
    min-height: 74vh;
    min-width: 78vw;
}
.popup-carousel{
    margin-left: 4.5vw;
    margin-right: 1.5vw;
    /*max-height: 70vh;*/
    max-width: 50vw;
}
.x-close{
    position: absolute;
    right: 13vw;
    top: 9vh;
    width: 1vw;
    height: 1vw;
}
/*.x-close img{*/
/*    width: 3vw;*/
/*    height: 3vw;*/
/*}*/
.x-close svg{
    width: 2.5vw;
    height: 2.5vw;
    fill:white;
}

.splide__pagination__page{
    background-color: rgba(204, 204, 204, 0.2) !important;
}
.splide__pagination__page.is-active{
    background-color: rgba(255, 255, 255, 0.7) !important;
}
.splide__arrow{
    background-color: transparent !important;
    width: 3vw !important;
    height: 3vw !important;
}
.splide__arrow svg{
    width: 2.5vw !important;
    height: 2.5vw !important;
    color: white;
}
.splide:not(.is-overflow) .splide__pagination{
    display: flex;
    bottom: -12vh;
}
.splide__arrow svg{
    filter: invert(100%) sepia(0%) saturate(7468%) hue-rotate(38deg) brightness(115%) contrast(103%);
}
.didascalia{
    font-size: 1vw;
    font-family: ArialItalic, Arial, sans-serif;
    text-align: center;
    margin: 1vh 0;
    padding-left: 3vw;
}