Difference between revisions of "Template:Vilnius-Lithuania/CSS/Engineering"

 
(18 intermediate revisions by 2 users not shown)
Line 32: Line 32:
 
   will-change: transform;
 
   will-change: transform;
 
}
 
}
−
.introContainer #dtp-cycle svg ellipse,
+
.introContainer #dtp-cycle svg ellipse {
−
.introContainer #dtp-cycle svg tspan {
+
 
   cursor: pointer;
 
   cursor: pointer;
 +
}
 +
.introContainer #dtp-cycle svg tspan {
 +
  pointer-events: none;
 
}
 
}
 
.introContainer svg .A {
 
.introContainer svg .A {
Line 84: Line 86:
 
   position: absolute;
 
   position: absolute;
 
   top: 100vh;
 
   top: 100vh;
−
   width: 100vw;
+
   width: 100%;
 
   z-index: 1;
 
   z-index: 1;
 
}
 
}
Line 93: Line 95:
 
   position: absolute;
 
   position: absolute;
 
   top: 200vh;
 
   top: 200vh;
−
   width: 100vw;
+
   width: 100%;
 
   z-index: 3;
 
   z-index: 3;
−
   font-family: "montserrat-light", sans-serif;
+
   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 102: Line 118:
 
   flex-direction: column;
 
   flex-direction: column;
 
   align-items: center;
 
   align-items: center;
−
   width: 80vw;
+
   width: calc(100% - 280px);
−
   margin: 0 auto;
+
   margin: 0 90px 0 190px;
−
  padding-bottom: 30vh;
+
 
}
 
}
 
@media screen and (max-width: 767px) {
 
@media screen and (max-width: 767px) {
 
   main section {
 
   main section {
 
     width: 100vw;
 
     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: 2em;
+
   font-size: 2.5em;
−
}
+
−
@media screen and (max-width: 767px) {
+
−
  main section h1 {
+
−
    font-size: 1.2em;
+
−
  }
+
 
}
 
}
 
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 128: 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;
 
   display: grid;
 +
  margin-block-start: 0em;
 +
  margin-block-end: 0em;
 +
  font-size: 2.3em;
 
}
 
}
 
@media screen and (max-width: 767px) {
 
@media screen and (max-width: 767px) {
−
   main section .iteration-title::after {
+
   main section .iteration-title {
−
    content: "1 iteration";
+
     font-size: 1.9em;
−
     font-family: "montserrat-light", sans-serif;
+
     padding-top: 30px;
−
     font-size: 0.8em;
+
 
   }
 
   }
 
}
 
}
Line 147: Line 168:
 
main section .row .right {
 
main section .row .right {
 
   display: flex;
 
   display: flex;
−
  width: 40%;
 
 
   align-items: center;
 
   align-items: center;
 
   padding: 20px 0px;
 
   padding: 20px 0px;
−
}
 
−
main section .row p {
 
−
  margin-block-end: 0em;
 
−
  margin-block-start: 0em;
 
 
}
 
}
 
main section .row .line-divider {
 
main section .row .line-divider {
Line 169: Line 185:
 
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 174: 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 184: 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 190: Line 213:
 
   width: 20px;
 
   width: 20px;
 
   height: 20px;
 
   height: 20px;
 +
  opacity: 1;
 
}
 
}
 
@media screen and (max-width: 767px) {
 
@media screen and (max-width: 767px) {
Line 201: Line 225:
 
     height: 8vw;
 
     height: 8vw;
 
     transform: translateX(55%);
 
     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;
Line 215: Line 241:
 
     z-index: 2;
 
     z-index: 2;
 
   }
 
   }
 +
}
 +
main section .row .left h1 {
 +
  cursor: pointer;
 
}
 
}
 
@media screen and (max-width: 767px) {
 
@media screen and (max-width: 767px) {
Line 220: Line 249:
 
     text-orientation: sideways;
 
     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) {
 
@media screen and (max-width: 767px) {
 
   main section .row .left .iteration-nr {
 
   main section .row .left .iteration-nr {
−
     visibility: hidden;
+
     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) {
 
@media screen and (max-width: 767px) {
 
   main section .row .right {
 
   main section .row .right {
 
     width: 70%;
 
     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) {
 
@media screen and (max-width: 767px) {
Line 238: Line 325:
 
     z-index: 9;
 
     z-index: 9;
 
     margin-left: 80%;
 
     margin-left: 80%;
 +
    color: #fafafc;
 
   }
 
   }
 +
}
 +
main section .row .iteration-desc b {
 +
  font-family: "lato-regular", sans-serif !important;
 
}
 
}
 
@media screen and (max-width: 767px) {
 
@media screen and (max-width: 767px) {
 
   main section .row .iteration-desc {
 
   main section .row .iteration-desc {
−
     padding-right: 10px;
+
     padding: 10px 20px 10px 0;
 
   }
 
   }
 
}
 
}
Line 256: Line 347:
 
}
 
}
 
@media screen and (max-width: 767px) {
 
@media screen and (max-width: 767px) {
−
   main section .row .mobile-divider {
+
   main section .row .box-mobile.mobile-curve {
−
     background-color: #121212;
+
     border-top: solid 7px #6281ef;
−
     height: 90px;
+
     border-top-right-radius: 37px;
−
    width: calc(22.5% + 53px);
+
     border-right: solid 7px #6281ef;
−
    position: absolute;
+
−
    left: -46px;
+
−
    top: 63px;
+
−
    border-radius: 33px;
+
−
     box-sizing: border-box;
+
−
    border: 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 274: 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;

}