(Created page with "body, html { margin: 0; padding: 0; color: #222222; font-family: "lato-regular"; } .introContainer { height: 100vh; width: 100%; background-color: #121212; po...") |
|||
(23 intermediate revisions by 2 users not shown) | |||
Line 24: | Line 24: | ||
height: 70vh; | height: 70vh; | ||
width: auto; | width: auto; | ||
+ | max-width: 80vw; | ||
+ | will-change: transform; | ||
} | } | ||
.introContainer #dtp-cycle svg { | .introContainer #dtp-cycle svg { | ||
height: 80vh; | height: 80vh; | ||
width: auto; | width: auto; | ||
+ | will-change: transform; | ||
} | } | ||
− | .introContainer #dtp-cycle svg ellipse | + | .introContainer #dtp-cycle svg ellipse { |
− | + | ||
cursor: pointer; | cursor: pointer; | ||
+ | } | ||
+ | .introContainer #dtp-cycle svg tspan { | ||
+ | pointer-events: none; | ||
} | } | ||
.introContainer svg .A { | .introContainer svg .A { | ||
Line 81: | Line 86: | ||
position: absolute; | position: absolute; | ||
top: 100vh; | top: 100vh; | ||
− | width: | + | width: 100%; |
z-index: 1; | z-index: 1; | ||
} | } | ||
Line 90: | Line 95: | ||
position: absolute; | position: absolute; | ||
top: 200vh; | top: 200vh; | ||
− | width: | + | width: 100%; |
z-index: 3; | z-index: 3; | ||
− | font-family: " | + | font-family: "lato-light", sans-serif !important; |
− | + | } | |
+ | main p b { | ||
+ | font-family: "lato-regular", sans-serif; | ||
+ | color: #000; | ||
+ | } | ||
+ | main p a:not(.citation) { | ||
+ | text-decoration: none; | ||
+ | font-variant-position: normal; | ||
+ | color: #121212; | ||
+ | box-shadow: inset 0 -0.5em 0 -1px #fcbd1b; | ||
+ | transition: 0.3s ease-out; | ||
+ | } | ||
+ | main p a:not(.citation):hover { | ||
+ | box-shadow: inset 0 -1.2em 0 -1px #fcbd1b; | ||
} | } | ||
main section { | main section { | ||
Line 100: | Line 118: | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
− | width: | + | width: calc(100% - 280px); |
− | margin: 0 auto; | + | margin: 0 90px 0 190px; |
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section { | ||
+ | width: 100vw; | ||
+ | margin: 0 auto; | ||
+ | } | ||
} | } | ||
main section h1 { | main section h1 { | ||
+ | font-family: "montserrat-light", sans-serif; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
− | font-size: | + | font-size: 2.5em; |
} | } | ||
main section .section-title h1 { | main section .section-title h1 { | ||
margin-block-end: 0em; | margin-block-end: 0em; | ||
+ | font-size: 3.5em; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .section-title h1 { | ||
+ | font-size: 2em; | ||
+ | } | ||
} | } | ||
main section .section-title svg { | main section .section-title svg { | ||
Line 115: | Line 146: | ||
main section .section-title .right { | main section .section-title .right { | ||
display: block !important; | display: block !important; | ||
+ | padding: 100px 0 0 !important; | ||
} | } | ||
main section .iteration-title { | main section .iteration-title { | ||
− | font-family: "montserrat-black", sans-serif; | + | font-family: "montserrat-black", sans-serif !important; |
+ | display: grid; | ||
+ | margin-block-start: 0em; | ||
+ | margin-block-end: 0em; | ||
+ | font-size: 2.3em; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .iteration-title { | ||
+ | font-size: 1.9em; | ||
+ | padding-top: 30px; | ||
+ | } | ||
} | } | ||
main section .row { | main section .row { | ||
Line 126: | Line 168: | ||
main section .row .right { | main section .row .right { | ||
display: flex; | display: flex; | ||
− | |||
align-items: center; | align-items: center; | ||
padding: 20px 0px; | padding: 20px 0px; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
main section .row .line-divider { | main section .row .line-divider { | ||
Line 139: | Line 176: | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .line-divider { | ||
+ | width: 15%; | ||
+ | justify-content: initial; | ||
+ | } | ||
} | } | ||
main section .row .line-divider.nonCenter { | main section .row .line-divider.nonCenter { | ||
align-items: initial; | align-items: initial; | ||
+ | z-index: 2; | ||
} | } | ||
main section .row .line-divider .line { | main section .row .line-divider .line { | ||
Line 147: | Line 191: | ||
background-color: #6281ef; | background-color: #6281ef; | ||
height: 100%; | height: 100%; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .line-divider .line.mobile-curve { | ||
+ | width: 0; | ||
+ | } | ||
} | } | ||
main section .row .line-divider .circle { | main section .row .line-divider .circle { | ||
Line 157: | Line 206: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
− | font-family: "montserrat-black", sans-serif; | + | font-family: "montserrat-black", sans-serif !important; |
+ | opacity: 0; | ||
} | } | ||
main section .row .line-divider .circle.top { | main section .row .line-divider .circle.top { | ||
Line 163: | Line 213: | ||
width: 20px; | width: 20px; | ||
height: 20px; | height: 20px; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .line-divider .circle.top { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .line-divider .circle { | ||
+ | width: 8vw; | ||
+ | height: 8vw; | ||
+ | transform: translateX(55%); | ||
+ | font-family: "montserrat-light", sans-serif !important; | ||
+ | } | ||
} | } | ||
main section .row .left { | main section .row .left { | ||
+ | width: 20%; | ||
justify-content: flex-end; | justify-content: flex-end; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .left { | ||
+ | background-color: #121212; | ||
+ | color: #FAFAFC; | ||
+ | width: 15%; | ||
+ | justify-content: center; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | } | ||
+ | main section .row .left h1 { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .left h1 { | ||
+ | text-orientation: sideways; | ||
+ | } | ||
+ | } | ||
+ | main section .row .left .iteration-nr { | ||
+ | margin-block-end: 0em; | ||
+ | margin-block-start: 0em; | ||
+ | font-size: 2.1vw; | ||
+ | text-align: right; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .left .iteration-nr { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | main section .row .left svg { | ||
+ | position: absolute; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | main section .row .left svg#click-info-desktop { | ||
+ | width: 100px; | ||
+ | transform: translate(-170px, -44px); | ||
+ | text-transform: initial; | ||
+ | } | ||
+ | main section .row .left svg.visible { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .left.mobile-curve { | ||
+ | border-top: solid 7px #6281ef; | ||
+ | } | ||
+ | } | ||
+ | main section .row .right { | ||
+ | width: 60%; | ||
+ | display: block; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .right { | ||
+ | width: 70%; | ||
+ | padding: 0; | ||
+ | } | ||
+ | } | ||
+ | main section .row .right .iteration-nr { | ||
+ | display: none; | ||
+ | } | ||
+ | main section .row .right .iteration-nr.mobile { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .right .iteration-nr.mobile { | ||
+ | font-size: 1.3em; | ||
+ | display: block; | ||
+ | margin-top: 0.83em; | ||
+ | margin-bottom: 0.83em !important; | ||
+ | } | ||
+ | } | ||
+ | main section .row .right svg#click-info-mobile { | ||
+ | width: 70px; | ||
+ | transform: translate(140px, -50px); | ||
+ | position: absolute; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | main section .row .right svg.visible { | ||
+ | opacity: 1 !important; | ||
+ | } | ||
+ | main section .row .right img { | ||
+ | width: 100%; | ||
+ | box-shadow: 1px 1px 10px #00000029; | ||
+ | } | ||
+ | main section .row .iteration-part { | ||
+ | text-align: right; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .iteration-part { | ||
+ | transform: rotate(-90deg); | ||
+ | margin-block-end: 0em; | ||
+ | margin-block-start: 0em; | ||
+ | z-index: 9; | ||
+ | margin-left: 80%; | ||
+ | color: #fafafc; | ||
+ | } | ||
+ | } | ||
+ | main section .row .iteration-desc b { | ||
+ | font-family: "lato-regular", sans-serif !important; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .iteration-desc { | ||
+ | padding: 10px 20px 10px 0; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .box-mobile { | ||
+ | width: calc(7.5vw - 3.5px); | ||
+ | position: relative; | ||
+ | display: flex; | ||
+ | background-color: #121212; | ||
+ | width: 50%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .box-mobile.mobile-curve { | ||
+ | border-top: solid 7px #6281ef; | ||
+ | border-top-right-radius: 37px; | ||
+ | border-right: solid 7px #6281ef; | ||
+ | } | ||
+ | } | ||
+ | main section .section-iteration .left { | ||
+ | padding: 10px 0; | ||
+ | } | ||
+ | main section .section-iteration .right { | ||
+ | display: block; | ||
+ | } | ||
+ | main section .accordion { | ||
+ | overflow: hidden; | ||
+ | max-height: 0; | ||
+ | transition: max-height 0.2s ease-out; | ||
+ | } | ||
+ | main section .accordion.visible { | ||
+ | max-height: initial; | ||
+ | } | ||
+ | main section .accordion.visible .circle { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | main section #separator { | ||
+ | transition-duration: 0.2s; | ||
+ | transition-timing-function: ease-out; | ||
+ | height: fit-content; | ||
+ | } | ||
+ | |||
+ | section .section-part { | ||
+ | width: 100%; | ||
+ | } | ||
+ | section .section-part .full-iteration { | ||
+ | width: 100%; | ||
+ | } | ||
+ | section .section-part .full-iteration:first-child .left, | ||
+ | section .section-part .full-iteration:first-child .right { | ||
+ | padding-top: 30px; | ||
+ | } | ||
+ | section .section-part .full-iteration:last-child .left, | ||
+ | section .section-part .full-iteration:last-child .right { | ||
+ | padding-bottom: 30px; | ||
+ | } | ||
+ | section#overview { | ||
+ | max-width: calc(100% - 330px); | ||
+ | margin: 0px auto 60px auto; | ||
+ | width: 60vw; | ||
+ | } | ||
+ | section#overview .overview-wrapper { | ||
+ | padding: 20px 40px; | ||
+ | box-shadow: 0 0 5px #00000029; | ||
+ | box-sizing: border-box; | ||
+ | padding: 40px 60px; | ||
+ | } | ||
+ | section#overview .overview-wrapper h2 { | ||
+ | text-transform: uppercase; | ||
+ | font-family: "montserrat-bold", sans-serif; | ||
+ | padding: 30px 0; | ||
+ | font-size: 2.5em; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | section#overview .overview-wrapper { | ||
+ | padding: 15px 30px; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | } | ||
+ | section#overview .overview-wrapper p { | ||
+ | font-family: "lato-light", sans-serif; | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | section#overview .overview-wrapper p b { | ||
+ | font-family: "lato-regular", sans-serif; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | section#overview { | ||
+ | width: 80vw; | ||
+ | } | ||
+ | } | ||
+ | section#overview button { | ||
+ | padding: 40px; | ||
+ | font-size: 3vh; | ||
+ | font-family: "montserrat-bold", sans-serif; | ||
+ | text-transform: uppercase; | ||
+ | background-color: #6281ef; | ||
+ | border-radius: 80px; | ||
+ | border: none; | ||
+ | color: #fafafc; | ||
+ | margin: 20px; | ||
+ | cursor: pointer; | ||
+ | box-shadow: 0 16px 32px -12px #3658cf; | ||
+ | transition: 0.3s ease-out; | ||
+ | position: relative; | ||
+ | top: 0; | ||
+ | } | ||
+ | section#overview button:hover { | ||
+ | top: -5px; | ||
+ | box-shadow: 0 16px 32px -16px #3658cf; | ||
} | } | ||
Line 174: | Line 451: | ||
.milkWave svg path { | .milkWave svg path { | ||
fill: #fafafc; | fill: #fafafc; | ||
+ | } | ||
+ | |||
+ | a.citation { | ||
+ | color: #2e64ec; | ||
+ | text-decoration: none; | ||
+ | text-align: center; | ||
+ | cursor: pointer; | ||
+ | font-size: 0.6em; | ||
+ | vertical-align: super; | ||
+ | } | ||
+ | |||
+ | .iteration-nr { | ||
+ | box-shadow: inset 0 0em 0 -1px #fcbd1b; | ||
+ | transition: 0.3s ease-out; | ||
+ | } | ||
+ | .iteration-nr:hover { | ||
+ | box-shadow: inset 0 -0.5em 0 -1px #fcbd1b; | ||
+ | } | ||
+ | |||
+ | .references { | ||
+ | font-size: 1.9rem; | ||
+ | } | ||
+ | .references svg { | ||
+ | max-width: 100px; | ||
+ | } | ||
+ | .references h3 { | ||
+ | margin-block-start: 0em; | ||
+ | font-size: 0.8em; | ||
+ | font-family: "montserrat-bold", sans-serif; | ||
+ | } | ||
+ | .references ol { | ||
+ | margin: initial; | ||
+ | padding-inline-start: 10px; | ||
+ | } | ||
+ | .references ol li { | ||
+ | font-size: 0.4em; | ||
+ | font-family: "lato-light", sans-serif; | ||
+ | } | ||
+ | .references ol li::marker { | ||
+ | color: initial; | ||
+ | font-family: "lato-light", sans-serif; | ||
+ | font-size: 1em; | ||
} | } |
Latest revision as of 03:10, 28 October 2020
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
height: 100vh; width: 100%; background-color: #121212; position: fixed; z-index: 2;
} .introContainer .intro-section {
display: flex; justify-content: center; align-items: center;
} .introContainer #engineering-cycle {
height: 100%;
} .introContainer #engineering-cycle svg {
height: 70vh; width: auto; max-width: 80vw; will-change: transform;
} .introContainer #dtp-cycle svg {
height: 80vh; width: auto; will-change: transform;
} .introContainer #dtp-cycle svg ellipse {
cursor: pointer;
} .introContainer #dtp-cycle svg tspan {
pointer-events: none;
} .introContainer svg .A {
stroke: #6281ef;
} .introContainer svg .B {
fill: #121212;
} .introContainer svg .C {
font-family: "montserrat-light", sans-serif;
} .introContainer svg .D {
font-family: "montserrat-bold", sans-serif;
} .introContainer svg .E {
fill: #fafafc;
} .introContainer svg .F {
stroke-width: 5;
} .introContainer svg .G {
font-size: 31px;
} .introContainer svg .H {
font-weight: 300;
} .introContainer svg .I {
stroke-linejoin: round;
} .introContainer svg .J {
stroke-width: 9;
} .introContainer svg .K {
fill: none;
} .introContainer svg .L {
stroke: #fafafc;
} .introContainer svg .M {
stroke-width: 3;
} .introContainer svg .N {
font-size: 38px;
}
.spacer {
height: 100vh; background-color: #121212; position: absolute; top: 100vh; width: 100%; z-index: 1;
}
main {
height: fit-content; background-color: #fafafc; position: absolute; top: 200vh; width: 100%; z-index: 3; font-family: "lato-light", sans-serif !important;
} main p b {
font-family: "lato-regular", sans-serif; color: #000;
} main p a:not(.citation) {
text-decoration: none; font-variant-position: normal; color: #121212; box-shadow: inset 0 -0.5em 0 -1px #fcbd1b; transition: 0.3s ease-out;
} main p a:not(.citation):hover {
box-shadow: inset 0 -1.2em 0 -1px #fcbd1b;
} main section {
display: flex; justify-content: center; flex-direction: column; align-items: center; width: calc(100% - 280px); margin: 0 90px 0 190px;
} @media screen and (max-width: 767px) {
main section { width: 100vw; margin: 0 auto; }
} main section h1 {
font-family: "montserrat-light", sans-serif; text-transform: uppercase; font-size: 2.5em;
} main section .section-title h1 {
margin-block-end: 0em; font-size: 3.5em;
} @media screen and (max-width: 767px) {
main section .section-title h1 { font-size: 2em; }
} main section .section-title svg {
width: 100px;
} main section .section-title .right {
display: block !important; padding: 100px 0 0 !important;
} main section .iteration-title {
font-family: "montserrat-black", sans-serif !important; display: grid; margin-block-start: 0em; margin-block-end: 0em; font-size: 2.3em;
} @media screen and (max-width: 767px) {
main section .iteration-title { font-size: 1.9em; padding-top: 30px; }
} main section .row {
display: flex; width: 100%;
} main section .row .left, main section .row .right {
display: flex; align-items: center; padding: 20px 0px;
} main section .row .line-divider {
display: flex; width: 20%; justify-content: center; align-items: center;
} @media screen and (max-width: 767px) {
main section .row .line-divider { width: 15%; justify-content: initial; }
} main section .row .line-divider.nonCenter {
align-items: initial; z-index: 2;
} main section .row .line-divider .line {
width: 7px; background-color: #6281ef; height: 100%;
} @media screen and (max-width: 767px) {
main section .row .line-divider .line.mobile-curve { width: 0; }
} main section .row .line-divider .circle {
width: 35px; height: 35px; border-radius: 40px; background-color: #FFD762; position: absolute; display: flex; align-items: center; justify-content: center; font-family: "montserrat-black", sans-serif !important; opacity: 0;
} main section .row .line-divider .circle.top {
margin-top: -15px; width: 20px; height: 20px; opacity: 1;
} @media screen and (max-width: 767px) {
main section .row .line-divider .circle.top { visibility: hidden; }
} @media screen and (max-width: 767px) {
main section .row .line-divider .circle { width: 8vw; height: 8vw; transform: translateX(55%); font-family: "montserrat-light", sans-serif !important; }
} main section .row .left {
width: 20%; justify-content: flex-end; text-transform: uppercase;
} @media screen and (max-width: 767px) {
main section .row .left { background-color: #121212; color: #FAFAFC; width: 15%; justify-content: center; z-index: 2; }
} main section .row .left h1 {
cursor: pointer;
} @media screen and (max-width: 767px) {
main section .row .left h1 { text-orientation: sideways; }
} main section .row .left .iteration-nr {
margin-block-end: 0em; margin-block-start: 0em; font-size: 2.1vw; text-align: right;
} @media screen and (max-width: 767px) {
main section .row .left .iteration-nr { display: none; }
} main section .row .left svg {
position: absolute; opacity: 0;
} main section .row .left svg#click-info-desktop {
width: 100px; transform: translate(-170px, -44px); text-transform: initial;
} main section .row .left svg.visible {
opacity: 1;
} @media screen and (max-width: 767px) {
main section .row .left.mobile-curve { border-top: solid 7px #6281ef; }
} main section .row .right {
width: 60%; display: block;
} @media screen and (max-width: 767px) {
main section .row .right { width: 70%; padding: 0; }
} main section .row .right .iteration-nr {
display: none;
} main section .row .right .iteration-nr.mobile {
cursor: pointer;
} @media screen and (max-width: 767px) {
main section .row .right .iteration-nr.mobile { font-size: 1.3em; display: block; margin-top: 0.83em; margin-bottom: 0.83em !important; }
} main section .row .right svg#click-info-mobile {
width: 70px; transform: translate(140px, -50px); position: absolute; opacity: 0;
} main section .row .right svg.visible {
opacity: 1 !important;
} main section .row .right img {
width: 100%; box-shadow: 1px 1px 10px #00000029;
} main section .row .iteration-part {
text-align: right;
} @media screen and (max-width: 767px) {
main section .row .iteration-part { transform: rotate(-90deg); margin-block-end: 0em; margin-block-start: 0em; z-index: 9; margin-left: 80%; color: #fafafc; }
} main section .row .iteration-desc b {
font-family: "lato-regular", sans-serif !important;
} @media screen and (max-width: 767px) {
main section .row .iteration-desc { padding: 10px 20px 10px 0; }
} @media screen and (max-width: 767px) {
main section .row .box-mobile { width: calc(7.5vw - 3.5px); position: relative; display: flex; background-color: #121212; width: 50%; height: 100%; }
} @media screen and (max-width: 767px) {
main section .row .box-mobile.mobile-curve { border-top: solid 7px #6281ef; border-top-right-radius: 37px; border-right: solid 7px #6281ef; }
} main section .section-iteration .left {
padding: 10px 0;
} main section .section-iteration .right {
display: block;
} main section .accordion {
overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out;
} main section .accordion.visible {
max-height: initial;
} main section .accordion.visible .circle {
opacity: 1;
} main section #separator {
transition-duration: 0.2s; transition-timing-function: ease-out; height: fit-content;
}
section .section-part {
width: 100%;
} section .section-part .full-iteration {
width: 100%;
} section .section-part .full-iteration:first-child .left, section .section-part .full-iteration:first-child .right {
padding-top: 30px;
} section .section-part .full-iteration:last-child .left, section .section-part .full-iteration:last-child .right {
padding-bottom: 30px;
} section#overview { max-width: calc(100% - 330px); margin: 0px auto 60px auto; width: 60vw; } section#overview .overview-wrapper {
padding: 20px 40px; box-shadow: 0 0 5px #00000029; box-sizing: border-box;
padding: 40px 60px; } section#overview .overview-wrapper h2 {
text-transform: uppercase; font-family: "montserrat-bold", sans-serif;
padding: 30px 0; font-size: 2.5em; } @media screen and (max-width: 767px) {
section#overview .overview-wrapper { padding: 15px 30px; box-shadow: none; }
} section#overview .overview-wrapper p {
font-family: "lato-light", sans-serif;
font-size: 1.5em; } section#overview .overview-wrapper p b {
font-family: "lato-regular", sans-serif;
} @media screen and (max-width: 767px) {
section#overview { width: 80vw; }
} section#overview button {
padding: 40px; font-size: 3vh; font-family: "montserrat-bold", sans-serif; text-transform: uppercase; background-color: #6281ef; border-radius: 80px; border: none; color: #fafafc; margin: 20px; cursor: pointer; box-shadow: 0 16px 32px -12px #3658cf; transition: 0.3s ease-out; position: relative; top: 0;
} section#overview button:hover {
top: -5px; box-shadow: 0 16px 32px -16px #3658cf;
}
.milkWave svg {
margin-top: -60px;
} .milkWave svg path {
fill: #fafafc;
}
a.citation {
color: #2e64ec; text-decoration: none; text-align: center; cursor: pointer; font-size: 0.6em; vertical-align: super;
}
.iteration-nr {
box-shadow: inset 0 0em 0 -1px #fcbd1b; transition: 0.3s ease-out;
} .iteration-nr:hover {
box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;
}
.references {
font-size: 1.9rem;
} .references svg {
max-width: 100px;
} .references h3 {
margin-block-start: 0em; font-size: 0.8em; font-family: "montserrat-bold", sans-serif;
} .references ol {
margin: initial; padding-inline-start: 10px;
} .references ol li {
font-size: 0.4em; font-family: "lato-light", sans-serif;
} .references ol li::marker {
color: initial; font-family: "lato-light", sans-serif; font-size: 1em;
}