@-webkit-keyframes rainbow { 0% { color: orange; } 10% { color: purple; } 20% { color: red; } 40% { color: yellow; } 60% { color: green; } 100% { color: blue; } 100% { color: orange; } } @-webkit-keyframes banner-opacity { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } body { font-family: monospace; width: 100%; background-color: #000001; color: #37ffad; padding: 0; margin: 0; } body .rainbow { animation-name: rainbow; animation-duration: 18s; animation-iteration-count: infinite; } body a { color: #ff33cc; } body a:visited { color: #cc0099; } body .stellina { color: blue; } body .bocca, body .onecchie { color: burlywood; } body .occhietti { color: white; } body .vello { color: brown; } body .setola { color: lightcoral; } body .pedibus { color: chocolate; } body main { width: 100%; height: 98vh; background: #000001; display: flex; overflow: scroll; } @media screen and (max-width: 900px) { body main { flex-wrap: wrap; } } body main #scrollable-column { display: flex; width: 100%; margin: auto; } @media screen and (max-width: 900px) { body main #scrollable-column { flex-wrap: wrap; padding-top: 2em; } } @media screen and (min-width: 900px) { body main #scrollable-column #raggiungerci { position: absolute; bottom: 7em; padding-top: 0.1em; } } body main #scrollable-column #right-column { width: 100%; background-color: #000001; z-index: 33; display: flex; justify-content: center; } @media screen and (max-width: 900px) { body main #scrollable-column #right-column { display: flex; justify-content: center; } } body main #scrollable-column #right-column #calendario { height: 100%; max-width: 40em; } @media screen and (min-width: 900px) { body main #scrollable-column #right-column #calendario { position: fixed; } } @media screen and (min-width: 1200px) { body main #scrollable-column #right-column #calendario { width: 40%; } } body main #scrollable-column #right-column #calendario ul { overflow-y: scroll; list-style-type: none; background: transparent; padding: 1em; display: flex; flex-wrap: wrap; max-height: 80%; } body main #scrollable-column #right-column #calendario ul #overflow-scroll { overflow-y: hidden; } body main #scrollable-column #right-column #calendario ul li { flex-wrap: wrap; margin-bottom: 1em; } body main #scrollable-column #right-column #calendario ul li .filler { display: flex; flex: 1 1 100%; } body main #scrollable-column #right-column #calendario ul li .filler + div { border: solid 1pt white; margin: 1.3em 0 -0.4em 0; } body main #scrollable-column #right-column #calendario ul li .title-wrapper { display: flex; border-top: 1pt solid white; border-right: 1pt solid white; border-left: 1pt solid white; border-bottom: 1pt solid white; padding: 0.1em; margin-bottom: -5px; z-index: 32; } body main #scrollable-column #right-column #calendario ul li .title-wrapper .titolo { overflow-x: hidden; } @media screen and (max-width: 900px) { body main #scrollable-column #right-column #calendario ul li .title-wrapper { width: 80%; } } body main #scrollable-column #right-column #calendario ul li .title-wrapper .orario { color: #37ffad; height: 1.2em; width: 4em; display: flex; justify-content: center; } body main #scrollable-column #right-column #calendario ul li .title-wrapper h4 { height: 1.2em; margin: 0 1em; } body main #scrollable-column #right-column #calendario ul li .title-wrapper h4 a { text-decoration: none; } body main #scrollable-column #right-column #calendario ul .descrizione-talk { display: none; flex: 1 1 100%; overflow-y: hidden; /*@media screen and (min-width: $breakpoint-normal-screen) { max-width: 75%; }*/ hyphens: auto; } body main #scrollable-column #right-column #calendario ul .descrizione-talk div { max-height: 30em; overflow-y: scroll; padding: 1em 3em; } body main #scrollable-column #right-column #raggiungerci { background-color: #000001; z-index: 100; margin-top: 1em; width: 100%; } @media screen and (max-width: 900px) { body main #scrollable-column #left-column { margin: auto; } } body main #scrollable-column #left-column #illustrazione { margin-top: 1em; display: flex; flex-wrap: wrap; justify-content: center; } body main #scrollable-column #left-column #illustrazione pre { margin: 0; position: fixed; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-1 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 0.1s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-2 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 0.2s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-3 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 0.3s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-4 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 0.4s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-5 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 0.5s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-6 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 0.6s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-7 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 0.7s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-8 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 0.8s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-9 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 0.9s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-10 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 1s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-11 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 1.1s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-12 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 1.2s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-13 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 1.3s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-14 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 1.4s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-15 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 1.5s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-16 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 1.6s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-17 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 1.7s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-18 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 1.8s; } body main #scrollable-column #left-column #illustrazione pre .rainbow .retard-19 { animation-name: rainbow; animation-duration: 1s; animation-iteration-count: infinite; animation-delay: 1.9s; } @media screen and (max-width: 600px) { body main #scrollable-column #left-column #illustrazione pre { font-size: 0.6em; font-weight: bold; } } @media screen and (min-width: 600px) and (max-width: 1200px) { body main #scrollable-column #left-column #illustrazione pre { font-size: 0.8em; } } @media screen and (min-width: 1200px) { body main #scrollable-column #left-column #illustrazione pre { font-size: 0.9em; } } body main #scrollable-column #left-column #illustrazione .text-wrapper { position: relative; } body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset { display: flex; flex-wrap: wrap; background-color: transparent; } @media screen and (max-width: 600px) { body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset { height: 33em; } } @media screen and (min-width: 600px) and (max-width: 1200px) { body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset { height: 43em; } } @media screen and (min-width: 1200px) { body main #scrollable-column #left-column #illustrazione .text-wrapper .text-offset { height: 50em; } } body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina { margin-top: 0; } @media screen and (max-width: 900px) { body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina { left: 46.25em; } } @media screen and (min-width: 900px) and (max-width: 1200px) { body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina { left: 46.3em; } } @media screen and (min-width: 1200px) { body main #scrollable-column #left-column #illustrazione .text-wrapper .fake-freccina { left: 52.35em; } } body main #scrollable-column #left-column #illustrazione .text-wrapper #call { margin: 0; padding: 1em 10% 2em 10%; } body footer { display: flex; justify-content: center; align-items: center; text-align: center; bottom: 0em; width: 100%; background-color: black; position: fixed; left: 0; padding-top: 1em; } body footer p { animation-name: banner-opacity; animation-duration: 4s; animation-fill-mode: forwards; animation-iteration-count: 1; } /*# sourceMappingURL=style.css.map */