@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

main {
    display: flex;
    flex-direction: column;
}

:root {
    --verdino: #a6c9b5;
    --giallino: #e5e1ad;
    --violetto: #943689;
    --viola: #2a0636;
    --off-black: #060b0f;
    --violino: #aea7d0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* navbar */

nav>a>h2 {
    font-size: 2rem !important;
}

.nav-link {
    font-family: 'Futura Extra Bold', sans-serif;
    color: white;
    letter-spacing: 2px;
}


/* cover section */

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.subtitle {
    font-family: 'Futura Extra Bold', sans-serif !important;
    margin: 0 !important;
}

.title-container {
    position: absolute;
    top: 50vh;
    left: 35vw;
    text-align: right;
}

.title {
    color: var(--verdino);
    font-size: 6vw;
}

.subtitle {
    color: white;
    font-size: 3vw;
    text-decoration: underline var(--violetto);
}

section:not(.comparison-section, .texts-introduction-section, .spatial, .network, .time) {
    padding: 3rem 4rem;
}

.comparison-section {
    padding: 3rem 4rem;
}

.sectitle>h3 {
    text-decoration: underline var(--violetto);
    font-size: 2rem;
    color: #060b0f;
    margin-bottom: 20px !important;
}


/* content section */

p {
    font-family: 'Playfair Display', serif;
    font-size: 1em;
    line-height: 2em;
    letter-spacing: 0.1em;
    text-align: justify;
}

.project-introduction-section {
    background-color: var(--verdino);
    color: black;
}

.project-introduction {
    padding: 0 5rem;
}

.w3-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    overflow: hidden;
    position: relative;
}

.w3-button.w3-black {
    cursor: pointer;
    color: #fff !important;
    background-color: #000 !important;
    user-select: none;
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: button;
    text-transform: none;
    font: inherit;
    margin: 0;
    border-radius: 0;
}

.w3-display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
}

.w3-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
}

.film-introduction-section {
    background-color: var(--giallino);
}

.film-introduction {
    padding: 0 3rem;
}

.film-introduction>img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-height: 25rem;
    float: left;
    margin: 2rem;
}

.film-introduction>p {
    margin: 2rem;
    color: #060b0f;
}

.film-introduction>p:not(first-child) {
    margin-top: 0rem;
    color: #060b0f;
}

.subsectitle {
    color: black;
    text-decoration: underline var(--violetto);
    margin-bottom: 10px;
}

/* carousel */

.carousel-control-next,
.carousel-control-prev {
    filter: invert(100%);
    width: 3%;
}


/* cards section */

.texts-introduction-section {
    min-height: 80vh;
}


.texts-introduction-section>.sectitle>h3 {
    color: white;
    text-shadow: 2px 2px 20px black;
    font-size: 2.3rem;
    transition: color 0.3s ease;
}

.cards-container {
    margin: 3vh 10vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4vw;
    padding-bottom: 7vh;
}

.texts-introduction-section>.sectitle {
    position: relative;
    margin-top: 3rem;
    margin-left: 5rem;
}

.bg-image {
    width: 100%;
    height: 100%;
}

.bg-image>img {
    position: absolute;
    width: 100%;
    height: 110%;
    /* transitions */
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;

}

.card {
    width: 30vw;
    height: 65vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-color: #ede0c7;
    color: black;
    text-align: center;
    border-radius: 3px !important;
    padding: 20px;
}

.card:hover {
    transform: scale(1.05);
}

.card>img {
    width: 8vw;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.download-xml-button {
    background-color: var(--viola);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border: none;
    color: white;
    padding: 1rem 1.5rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    border-radius: 3px !important;
}

.download-xml-button>a {
    text-decoration: none;
    color: white;

}

/* comparison section */

.comparison-section {
    background-color: var(--viola);
    z-index: 2;
    
}

.comparison-section>.sectitle>h3 {
    color: white;
}



.comparison-container {
    margin-top: 4rem;
    gap: 2vw;
}

.comparison-item-title {
    font-family: 'Playfair Display', serif !important;
    text-align: center;
    color: white;
}

.comparison-item-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.comparison-item {
    /* border-top: 1.2rem solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 2vw solid transparent;
    border-right: 2vw solid transparent;
    border-image-source: url('../img/ews-border2.png');
    border-image-slice: 230 115 225 120 fill;
    border-image-width: 12vh 3vw;
    border-image-outset: 12vh 3vw;
    border-image-repeat: stretch stretch; */
    padding: 2rem;
    -ms-overflow-style: none;
    /* scrollbar-width: none; */
    width: 23vw;
    height: 80vh;
    overflow: auto;
    background-color: white;
    color: black;
    z-index: 1;
}

.comparison-item::-webkit-scrollbar {
    /* display: none; */
}

.comparison-item-central {
    /* border-bottom: 6px solid transparent;
    border-left: 2vw solid transparent;
    border-right: 2vw solid transparent;
    border-image-source: url('../img/ews-border.png');
    border-image-slice: 450 200 250 215 fill;
    border-image-width: 20vh 6vw 13vh 6vw;
    border-image-outset: 20vh 6vw 13vh 6vw;
    border-image-repeat: stretch stretch; */
}

div pre, .scene-selector-container {
    font-family: Courier, 'Courier New', monospace;
    font-size: 0.8rem;
}

#left-text {
    text-align: justify;
    hyphens: auto;
    text-indent: 2rem;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    margin: 10rem 2rem 2rem 2rem;
}

.image-container>img {
    width: 20vw;
    transition: transform 0.3s ease;
}

.image-container>img:hover {
    transform: scale(1.02);
    cursor: pointer;
}

.scene-selector-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scene-selector-container label {
    color: white;
    margin-bottom: 10px;
}

.scene-selector-container select,
.scene-selector-container button {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background-color: var(--giallino);
    color: black;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.scene-selector-container select:hover,
.scene-selector-container button:hover {
    background-color: var(--verdino)
}


footer {
    
    background-color: var(--off-black);
    color: rgb(230, 230, 230);
    display: flex !important;
}

div[class^="grid-item"] {
    padding: 2rem;
}

div[class^="grid-item"] p {
    line-height: 1rem;
    padding-bottom: 1rem;
}

p[class^="text"] a {
    margin-left: 0px;
}

/* analysis page */

.spatial {
    background-color: var(--verdino);
    padding: 4%;
    color: black;
}


.tables-containers {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 2rem;
}

.table-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    width: 45vw;
}

.table-container>iframe {
    width: 35vw;
    min-height: 60vh;
    border: none;

}

.text {
    max-width: 60vw;
}

.text1 {
    max-width: 60vw;
    font-size: smaller;
}


.network {
    background-color: var(--giallino);
    padding: 4%;
    color: black;
    height: 150vh;

}

.t {
    display: flex;
    justify-content: space-evenly;
    margin: 2rem 0;
}  

.containe {
    display: flex;
    flex-direction: column;
    max-width: 35vw !important;
    align-items: center;
    height: 150vh;
}

.containe>iframe {
    height: 120vh;
    max-width: inherit;

}

.time {
    background-color: var(--viola);
    padding: 4%;
    color: white;
}

.time>h3 {
    text-decoration: underline var(--violetto);
    font-size: 2rem;
    margin-bottom: 1rem !important;
}

.pie-chart-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.slice {
    cursor: pointer;
}

.analysis_title {
    margin-bottom: 2%;
}

.pie-chart-image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    margin: 2rem 2rem 2rem 2rem;
}

.pie-chart-image-container>img {
    width: 10vw;
    transition: transform 0.3s ease;
}

.pie-chart-image-container>img:hover {
    transform: scale(1.02);
    cursor: pointer;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Two columns with equal width */
    grid-gap: 6%; /* Adjust the gap between the columns */
}

.spatial>h3,
.network>h3 {
    text-decoration: underline var(--violetto);
    font-size: 2rem;
    color: #060b0f;
    margin-bottom: 1rem !important;
}

#contact-button {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.person-name {
    margin-right: auto; /* Pushes the icons to the right */
}

.icon-link {
    margin-left: 10px; /* Add space between the name and icons */
    color: #007bff; /* Initial icon color */
    text-decoration: none;
    transition: color 0.3s; /* Smooth color transition on hover */
}

.icon-link:hover {
    color: #ffbe33; /* Change color on hover */
}

  

@media screen and (max-width: 768px) {
    .parallax {
        display: none;
    }

    section:not(.texts-introduction-section) {
        padding: 40px !important;
    }

    .project-introduction-section {
        padding: 0 !important;
    }

    .texts-introduction-section>.sectitle {
        padding: 40px !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    .mySlides:nth-child(1),
    .w3-button {
        display: none !important;
    }

    .film-introduction,
    .project-introduction {
        padding: 0 !important;
    }

    .film-introduction>img {
        width: 35vw !important;
    }

    .carousel-track {
        flex-direction: column;
        transform: none !important;
    }

    .texts-introduction-section>.cards-container {
        flex-direction: column;
    }

    .cards-container {
        margin: 0 !important;
    }

    .card {
        width: 80vw;
        height: 40vh;
    }

    .bg-image {
        overflow: hidden;
    }

    .bg-image>img {
        object-fit: cover;
        height: 160%;
    }

    .card>img {
        width: 20vw;
        margin-top: 1rem;
    }

    .comparison-container {
        flex-direction: column;
        gap: 30vh;
    }

    footer > .container-fluid > .grid-container {
        display: flex;
        flex-direction: column;
    }

    div[class^="grid-item"] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .comparison-item {
        width: 80vw;
        height: 45vh;
        border-image-width: 9vh 7vw;
        border-image-outset: 9vh 3vw;
    }
    

}



::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 4px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #646464;
    transition: all 0.3s linear;
}