@font-face {
    font-family: 'Philosopher';
    font-weight: 400;
    src: url("fonts/Philosopher-Regular.ttf") format("truetype");
}

@font-face {
    font-family: 'Philosopher';
    font-style: italic;
    src: url("fonts/Philosopher-Italic.ttf") format("truetype");
}

@font-face {
    font-family: 'PhilosopherBold';
    font-weight: 700;
    src: url("fonts/Philosopher-Bold.ttf") format("truetype");
}


@font-face {
    font-family: 'Philosopher';
    font-weight: 700;
    font-style: italic;
    src: url("fonts/Philosopher-BoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: 'Helvetica';
    font-weight: 400;
    src: url("fonts/Helvetica.ttf") format("truetype");
}

@font-face {
    font-family: 'Helvetica';
    font-weight: 300;
    src: url("fonts/helvetica-Light.ttf") format("truetype");
}

@font-face {
    font-family: 'Helvetica';
    font-weight: 700;
    src: url("fonts/Helvetica-Bold.ttf") format("truetype");
}

@font-face {
    font-family: 'Helvetica';
    font-style: italic;
    src: url("fonts/Helvetica-Oblique.ttf") format("truetype");
}

@font-face {
    font-family: 'Helvetica';
    font-weight: 700;
    font-style: italic;
    src: url("fonts/Helvetica-Bold-Oblique.ttf") format("truetype");
}

body {

    /* 280px */
    font-family: Philosopher;
    margin: 0;
    /* background-image: url('assets/background.svg');
    background-repeat: no-repeat;
    background-size: cover; */
}

.medusa {
    position: center;
    display: flex;
    justify-content: center;
}

/* 
████████╗██╗████████╗ ██████╗ ██╗     ██╗
╚══██╔══╝██║╚══██╔══╝██╔═══██╗██║     ██║
   ██║   ██║   ██║   ██║   ██║██║     ██║
   ██║   ██║   ██║   ██║   ██║██║     ██║
   ██║   ██║   ██║   ╚██████╔╝███████╗██║
   ╚═╝   ╚═╝   ╚═╝    ╚═════╝ ╚══════╝╚═╝
*/



header {
    margin-left: 30px;
}

.title {
    padding-top: 20vh;
    color: #CCF3FF;
    text-shadow: 0px 4px 41px rgba(0, 0, 0, 0.34);
    font-size: 23vh;
    font-style: normal;
    font-weight: light;
    line-height: 99.973%;
    text-align: center;
    /* 217.94px */
}

.subtitle {
    color: #CCF3FF;
    text-align: center;
    text-shadow: 0px 4px 41px rgba(0, 0, 0, 0.34);
    font-family: Helvetica;
    font-size: 26px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;

    padding-bottom: 100px;
}

.frecce {
    display: flex;
    justify-content: center;
    padding-bottom: 12vw;
    padding-top: 5vw;
    position: relative;
    fill: none;
    /* stroke: #CCF3FF; */

    animation-name: moving;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition-timing-function: linear;
    transition-timing-function: cubic-bezier(0, 0, 1, 1);

    transition-timing-function: ease;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

    transition-timing-function: ease-in-out;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

    transition-timing-function: ease-in;
    transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

    transition-timing-function: ease-out;
    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

}


@keyframes moving {
    0% {
        top: 0px;
    }

    50% {
        top: 15px;
    }

    100% {
        top: 0px;
    }
}


#arrows {
    stroke: #CCF3FF;
    transition: 50ms;
}

#arrows:hover {
    stroke: #729ba8;
    /* stroke: red; */
    transition-duration: 50ms;
    transition-delay: 20ms;
}




#background {
    background: linear-gradient(135deg, #34417f, #010618, #010618, #34417f, #010618, #010618, #34417f, #010618);
    background-size: 1600% 1600%;

    -webkit-animation: AnimationName 8s ease infinite;
    -moz-animation: AnimationName 8s ease infinite;
    animation: AnimationName 8s ease infinite;


    position: relative;
    z-index: 2;
    padding-bottom: 1vh;
}

@-webkit-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}






/*
██╗███╗   ██╗████████╗██████╗  ██████╗ 
██║████╗  ██║╚══██╔══╝██╔══██╗██╔═══██╗
██║██╔██╗ ██║   ██║   ██████╔╝██║   ██║
██║██║╚██╗██║   ██║   ██╔══██╗██║   ██║
██║██║ ╚████║   ██║   ██║  ██║╚██████╔╝
╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝ 
*/

.intro {
    text-align: center;
    justify-content: center;
}

.intro div {
    color: #CCF3FF;
    text-shadow: 0px 4px 41px rgba(0, 0, 0, 0.34);
    font-style: normal;
    font-weight: 300;
    text-align: center;
    font-family: Philosopher;
    justify-content: center;

    font-size: 3vw;
}

.intro h5 {
    text-align: center;
    width: 838px;
    display: inline-block;
    color: #CCF3FF;
    font-family: Helvetica;
    font-weight: 300;
    line-height: 1.8vw;
    font-size: 1vw;
    padding-bottom: 30vw;
}


.story h1 {
    text-align: center;
    justify-content: center;

    color: #CCF3FF;
    text-shadow: 0px 4px 41px rgba(0, 0, 0, 0.34);
    font-style: normal;
    font-weight: 400;
    text-align: center;
    font-family: Philosopher;
    padding-top: 150px;
    justify-content: center;

    font-size: 4vw;
}

.legenda {
    opacity: 0.7;
    display: flex;
    justify-content: center;

    color: #CCF3FF;
    text-shadow: 0px 4px 41px rgba(0, 0, 0, 0.34);
    font-style: normal;
    font-weight: 100;
    text-align: center;
    font-family: Philosopher;
    justify-content: center;
    font-size: 1vw;

    padding-bottom: 15vw;
}


#emotions {
    padding: 0 30px;
}

#names {
    padding: 5px 0;
}

#explanation {
    text-align: center;

    display: flex;
    justify-content: center;
    color: #CCF3FF;
    font-family: Helvetica;
    font-weight: 300;
    line-height: 1.8vw;
    font-size: 1vw;

    padding-bottom: 1vw;
}


#medusa-wrapper svg {
    max-width: 100%;
    width: 100%;
    display: block;
}

svg g,
svg text {
    display: block;
}


#medusa-wrapper {
    position: relative;
}

.badge-personaggio {
    display: inline-block;
    position: absolute;
    font-size: 0.95vw;
    padding: .3em 1em;
    border-radius: 9999px;
    transform: translate3d(-50%, 0, 0);
    opacity: .1;

    pointer-events: none;

}



#popup1,
#popup2,
#popup3,
#popup4,
#popup5,
#popup6 {
    position: relative;
    z-index: 10;
    pointer-events: none;
}

#medusa-wrapper {
    z-index: 2;
}

.badge-personaggio.active {
    opacity: 1;
}


#EZRA,
#TIM,
#HOLLY,
#GEORGE,
#CONNIE,
#DEN,
#EMILY,
#BEN {
    position: absolute;
    z-index: 1;
}

/* OPACITY: 0 */

#tentacolobianco,
#true-holly,
#true-ezra,
#true-connie,
#true-george,
#true-den,
#true-emily,
#true-ben,
#aboutit,
#plot,
#story,
.legenda,
#explanation,
#time01,
#time02,
#time03,
#time04,
#time05,
#time06,
#time07,
#time08,
#time09,
#time10,
#time11,
#time12,
#time13,
#time14,
#time15,
#time16,
#time17,
#time18,
#time19,
#time20,
#time21,
#time22,
#time23,
#time24,
#time25,
#time26,
#time27,
#time28,
#time29,
#time30,
#time31,
#time32,
#time33,
#time34,
#time35,
#popup1,
#popup2,
#popup3,
#popup4,
#popup5,
#popup6,
#neutro,
#serenita,
#gioia,
#amore,
#tristezza,
#morte,
.creators,
#restart {
    opacity: 0
}

.line-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
}

svg {
    display: inline-block;
    height: 100%;

}


/* 
███████╗ ██████╗  ██████╗ ████████╗███████╗██████╗ 
██╔════╝██╔═══██╗██╔═══██╗╚══██╔══╝██╔════╝██╔══██╗
█████╗  ██║   ██║██║   ██║   ██║   █████╗  ██████╔╝
██╔══╝  ██║   ██║██║   ██║   ██║   ██╔══╝  ██╔══██╗
██║     ╚██████╔╝╚██████╔╝   ██║   ███████╗██║  ██║
╚═╝      ╚═════╝  ╚═════╝    ╚═╝   ╚══════╝╚═╝  ╚═╝                                  
*/


.creators {
    display: flex;
    justify-content: center;
}

.creators p {
    color: #CCF3FF;
    padding: 0px 16px;
    text-align: center;

}



/*
 █████╗ ███╗   ██╗██╗███╗   ███╗ █████╗ ███████╗██╗ ██████╗ ███╗   ██╗██╗
██╔══██╗████╗  ██║██║████╗ ████║██╔══██╗╚══███╔╝██║██╔═══██╗████╗  ██║██║
███████║██╔██╗ ██║██║██╔████╔██║███████║  ███╔╝ ██║██║   ██║██╔██╗ ██║██║
██╔══██║██║╚██╗██║██║██║╚██╔╝██║██╔══██║ ███╔╝  ██║██║   ██║██║╚██╗██║██║
██║  ██║██║ ╚████║██║██║ ╚═╝ ██║██║  ██║███████╗██║╚██████╔╝██║ ╚████║██║
╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝╚═╝     ╚═╝╚═╝  ╚═╝╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝╚═╝
*/




@keyframes scale {
    100% {
        transform: scale(1);
    }
}

@keyframes fade-in {
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/* 
████████╗██╗████████╗ ██████╗ ██╗      ██████╗ 
╚══██╔══╝██║╚══██╔══╝██╔═══██╗██║     ██╔═══██╗
   ██║   ██║   ██║   ██║   ██║██║     ██║   ██║
   ██║   ██║   ██║   ██║   ██║██║     ██║   ██║
   ██║   ██║   ██║   ╚██████╔╝███████╗╚██████╔╝
   ╚═╝   ╚═╝   ╚═╝    ╚═════╝ ╚══════╝ ╚═════╝ 
*/

.title {
    opacity: 0;
    filter: blur(4px);
    animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

.subtitle {
    animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

.title:nth-child(1) {
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(2) {
    animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(3) {
    animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(4) {
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(5) {
    animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(6) {
    animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(7) {
    animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(8) {
    animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(9) {
    animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(10) {
    animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(11) {
    animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(12) {
    animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(13) {
    animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(14) {
    animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(15) {
    animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(16) {
    animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(17) {
    animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.title:nth-child(18) {
    animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

/*
███████╗ ██████╗ ████████╗████████╗ ██████╗ ████████╗██╗████████╗ ██████╗ ██╗      ██████╗ 
██╔════╝██╔═══██╗╚══██╔══╝╚══██╔══╝██╔═══██╗╚══██╔══╝██║╚══██╔══╝██╔═══██╗██║     ██╔═══██╗
███████╗██║   ██║   ██║      ██║   ██║   ██║   ██║   ██║   ██║   ██║   ██║██║     ██║   ██║
╚════██║██║   ██║   ██║      ██║   ██║   ██║   ██║   ██║   ██║   ██║   ██║██║     ██║   ██║
███████║╚██████╔╝   ██║      ██║   ╚██████╔╝   ██║   ██║   ██║   ╚██████╔╝███████╗╚██████╔╝
╚══════╝ ╚═════╝    ╚═╝      ╚═╝    ╚═════╝    ╚═╝   ╚═╝   ╚═╝    ╚═════╝ ╚══════╝ ╚═════╝ 
*/

.subtitle {
    opacity: 0;
    filter: blur(4px);
    animation: scale 1000s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

.subtitle:nth-child(1) {
    animation: fade-in 0.9s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(2) {
    animation: fade-in 0.9s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(7) {
    animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(8) {
    animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(9) {
    animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(10) {
    animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(11) {
    animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(12) {
    animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(13) {
    animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(14) {
    animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(15) {
    animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(16) {
    animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(17) {
    animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.subtitle:nth-child(18) {
    animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}



#arrows {
    opacity: 0;
    filter: blur(4px);
    animation: scale 1000s forwards cubic-bezier(0.5, 1, 0.89, 1);
    /* cursor: none; */
}

#arrows:nth-child(1) {
    animation: fade-in 1.3s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(2) {
    animation: fade-in 1.3s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(7) {
    animation: fade-in 1.3s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(8) {
    animation: fade-in 1.3s 2.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(9) {
    animation: fade-in 1.3s 2.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(10) {
    animation: fade-in 1.3s 2.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(11) {
    animation: fade-in 1.3s 2.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(12) {
    animation: fade-in 1.3s 2.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(13) {
    animation: fade-in 1.3s 2.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(14) {
    animation: fade-in 1.3s 3.0s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(15) {
    animation: fade-in 1.3s 3.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(16) {
    animation: fade-in 1.3s 3.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(17) {
    animation: fade-in 1.3s 3.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#arrows:nth-child(18) {
    animation: fade-in 1.3s 3.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

/*
███████╗██████╗ ███████╗ ██████╗ ██████╗███████╗
██╔════╝██╔══██╗██╔════╝██╔════╝██╔════╝██╔════╝
█████╗  ██████╔╝█████╗  ██║     ██║     █████╗  
██╔══╝  ██╔══██╗██╔══╝  ██║     ██║     ██╔══╝  
██║     ██║  ██║███████╗╚██████╗╚██████╗███████╗
╚═╝     ╚═╝  ╚═╝╚══════╝ ╚═════╝ ╚═════╝╚══════╝
*/




footer {
    z-index: 0;
    bottom: 0;
    font-family: Philosopher;
    margin: 0;
}


.restart-label {
    display: flex;
    justify-content: center;
    padding-top: 5vw;
}

#restart {
    display: flex;
    justify-content: center;
    position: absolute;
    padding: 0.6em 1em;

    font-size: 1.2vw;
    text-decoration: none;


    border-radius: 9999px;
    border-color: white;
    border-width: 0.07vw;
    border-style: solid;
    color: #fff;

    transition: 10ms;
}

#restart:hover {
    display: flex;
    justify-content: center;
    position: absolute;
    padding: 0.6em 1em;

    font-size: 1.2vw;

    background-color: white;
    border-radius: 9999px;
    border-width: 0.07vw;
    border-style: solid;
    color: black;

    transition-duration: 500ms;
    transition-delay: 5ms;
}


#labname {
    color: #CCF3FF;
    text-shadow: 0px 4px 41px rgba(0, 0, 0, 0.34);
    font-style: normal;
    font-weight: 400;
    text-align: center;
    font-family: Philosopher;
    justify-content: center;
    padding-top: 9vw;
    font-size: 5vw;
}

#category {
    color: #CCF3FF;
    text-shadow: 0px 4px 41px rgba(0, 0, 0, 0.34);
    font-style: normal;
    font-weight: 700;
    text-align: center;
    font-family: Philosopher;
    justify-content: center;
    font-size: 1.2vw;
    padding-bottom: 0.3vw;
    padding-top: 2vw;
}

#people {
    color: #CCF3FF;
    text-align: center;
    text-shadow: 0px 4px 41px rgba(0, 0, 0, 0.34);
    font-family: Helvetica;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5;
}



.sponsor {
    display: flex;
    justify-content: right;
    padding-top: 3vw;
    padding-left: 3vw;
    padding-right: 3vw;


}

#svgs {
    padding: 0 1vw;
}

.polimi a img {
    display: flex;
    height: 6vw;
    transition: 1s;
    padding-bottom: 3vw;
}

.density a img {
    display: flex;
    height: 6vw;
    transition: 1s;
    padding-bottom: 3vw;
}

.necst a img {
    display: flex;
    height: 6vw;
    transition: 1s;
    padding-bottom: 3vw;
}

.polimi a img:hover {
    display: flex;
    height: 6.5vw;
    transition: 1s;
    padding-bottom: 3vw;
}

.density a img:hover {
    display: flex;
    height: 6.5vw;
    transition: 1s;
    padding-bottom: 3vw;
}

.necst a img:hover {
    display: flex;
    height: 6.5vw;
    transition: 1s;
    padding-bottom: 3vw;
}






#down {
    opacity: 0;
    padding-bottom: 5vw;
}



/* 
██████╗██╗   ██╗██████╗ ███████╗ ██████╗ ██████╗ 
██╔════╝██║   ██║██╔══██╗██╔════╝██╔═══██╗██╔══██╗
██║     ██║   ██║██████╔╝███████╗██║   ██║██████╔╝
██║     ██║   ██║██╔══██╗╚════██║██║   ██║██╔══██╗
╚██████╗╚██████╔╝██║  ██║███████║╚██████╔╝██║  ██║
 ╚═════╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝ ╚═════╝ ╚═╝  ╚═╝
*/


.cursorwhite {
    cursor: url(assets/cursor/cursorwhite.svg), pointer;
}

#background {
    cursor: url(assets/cursor/cursorwhite.svg), pointer;
}


#tristezza {
    cursor: url(assets/cursor/tristezzaword.svg), pointer;
}

#gioia {
    cursor: url(assets/cursor/gioiaword.svg), pointer;
}

#serenita {
    cursor: url(assets/cursor/serenitaword.svg), pointer;
}

#amore {
    cursor: url(assets/cursor/amoreword.svg), pointer;
}

#morte {
    cursor: url(assets/cursor/morteword.svg), pointer;
}

#neutro {
    cursor: url(assets/cursor/cursorwhite.svg), pointer;

}

#restart {
    cursor: url(assets/cursor/medusinamini.svg), pointer;
}

#emotions {
    cursor: url(assets/cursor/cursorwhitemini.svg), pointer;
}