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

m
m
 
(24 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
main .buttonContainer > * {
+
main .buttonContainer > *, .overviewIndex > div .title {
 
   cursor: pointer;
 
   cursor: pointer;
 
   transition: transform 0.3s;
 
   transition: transform 0.3s;
 
}
 
}
−
main .buttonContainer > :hover {
+
main .buttonContainer > :hover, .overviewIndex > div .title:hover {
 
   transform: translateY(-2px);
 
   transform: translateY(-2px);
 
}
 
}
−
main .buttonContainer > :active {
+
main .buttonContainer > :active, .overviewIndex > div .title:active {
 
   transform: translateY(2px);
 
   transform: translateY(2px);
 
}
 
}
Line 19: Line 19:
 
body, #bodyContent {
 
body, #bodyContent {
 
   background-image: url(https://static.igem.org/mediawiki/2020/8/82/T--Vilnius-Lithuania--backgroundWavesWhite.png);
 
   background-image: url(https://static.igem.org/mediawiki/2020/8/82/T--Vilnius-Lithuania--backgroundWavesWhite.png);
 +
}
 +
 +
.introContainer {
 +
  overflow: hidden;
 +
}
 +
 +
.grandHeading {
 +
  text-align: center;
 +
  font-size: 2.5rem;
 +
  font-family: "montserrat-bold";
 +
  margin-bottom: 0.8em;
 
}
 
}
  
Line 26: Line 37:
 
   align-items: center;
 
   align-items: center;
 
   background-color: unset;
 
   background-color: unset;
 +
  padding-bottom: 70px;
 +
  margin-top: unset;
 +
}
 +
main .references ol li::marker, main .references ol li::before {
 +
  font-family: "lato-light";
 +
}
 +
main .notvisible {
 +
  margin: 0;
 +
  padding: 0;
 +
  height: 0;
 +
  max-height: 0;
 +
  color: transparent;
 +
  background-color: transparent;
 +
  border: none;
 +
  outline: none;
 
}
 
}
 
main .h3 {
 
main .h3 {
 +
  text-align: left;
 
   font-size: 1.5rem;
 
   font-size: 1.5rem;
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  main .h3 {
 +
    font-size: 1.2rem;
 +
  }
 +
}
 +
main b.semi {
 +
  font-family: "lato-semibold";
 +
}
 +
main b.colored {
 +
  color: #2E64EC;
 
}
 
}
 
main .scrollBlock {
 
main .scrollBlock {
 +
  pointer-events: none;
 
   height: 80vh;
 
   height: 80vh;
 
   width: 90vw;
 
   width: 90vw;
−
   display: flex;
+
   display: grid;
−
   flex-direction: row;
+
   grid-template-columns: 45vw auto 16px;
−
   justify-content: center;
+
   grid-template-rows: 1fr;
−
   align-items: center;
+
   column-gap: 10px;
 
   position: -webkit-sticky;
 
   position: -webkit-sticky;
 
   position: sticky;
 
   position: sticky;
 
   top: 10vh;
 
   top: 10vh;
 
}
 
}
−
main .scrollBlock.smaller {
+
main .scrollBlock.contentLarger {
−
   top: 20vh;
+
   grid-template-columns: 0 auto 16px;
−
   height: 60vh;
+
   grid-template-rows: 1fr;
−
}
+
−
main .scrollBlock.small {
+
−
  height: unset;
+
 
}
 
}
 
main .scrollBlock .scrollItem {
 
main .scrollBlock .scrollItem {
−
   width: 42vw;
+
   grid-column-start: 1;
 +
  grid-column-end: 2;
 +
  grid-row-start: 1;
 +
  grid-row-end: 2;
 +
  align-self: center;
 
   height: 440px;
 
   height: 440px;
−
  margin-right: 10px;
 
 
   display: flex;
 
   display: flex;
 
   align-items: center;
 
   align-items: center;
 
   justify-content: center;
 
   justify-content: center;
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  main .scrollBlock .scrollItem {
 +
    grid-column-start: 1;
 +
    grid-column-end: 2;
 +
    grid-row-start: 1;
 +
    grid-row-end: 2;
 +
    box-shadow: 0 0 10px lightgrey;
 +
    background-color: #FAFAFC;
 +
    border-radius: 5px;
 +
    padding: 30px;
 +
    box-sizing: border-box;
 +
  }
 
}
 
}
 
main .scrollBlock .scrollItem > div {
 
main .scrollBlock .scrollItem > div {
Line 62: Line 114:
 
main .scrollBlock .scrollItem.contentLarger {
 
main .scrollBlock .scrollItem.contentLarger {
 
   width: 0vw;
 
   width: 0vw;
 +
}
 +
main .scrollBlock .scrollItem > img {
 +
  width: 100%;
 +
  height: 100%;
 
}
 
}
 
main .scrollBlock .content {
 
main .scrollBlock .content {
Line 67: Line 123:
 
   flex-direction: column;
 
   flex-direction: column;
 
   align-items: stretch;
 
   align-items: stretch;
−
   width: 38vw;
+
   grid-column-start: 2;
 +
  grid-column-end: 3;
 +
  grid-row-start: 1;
 +
  grid-row-end: 2;
 +
  align-self: center;
 +
  justify-self: stretch;
 
   padding: 40px;
 
   padding: 40px;
 
   margin-top: 0;
 
   margin-top: 0;
Line 74: Line 135:
 
}
 
}
 
main .scrollBlock .content.contentLarger {
 
main .scrollBlock .content.contentLarger {
−
   width: 80vw;
+
   width: 70vw;
 
   height: 50vh;
 
   height: 50vh;
 +
  justify-self: center;
 
}
 
}
−
main .scrollBlock .content.smaller {
+
main .scrollBlock .content .h2 {
−
   height: 40vh;
+
   font-size: 2.4rem;
 +
  margin: 0 0 16px;
 
}
 
}
−
main .scrollBlock .content.small {
+
main .scrollBlock .content .h2:empty {
−
   height: unset;
+
   margin: 0;
 
}
 
}
−
main .scrollBlock .content.fadeOutDown, main .scrollBlock .content.fadeOutUp, main .scrollBlock .content.fadedInvisibleDown, main .scrollBlock .content.fadedInvisibleUp {
+
main .scrollBlock .content .h3 {
−
   opacity: 0;
+
   font-size: 1.5rem;
 +
  margin: 0 0 8px;
 
}
 
}
−
main .scrollBlock .content.fadeOutDown, main .scrollBlock .content.fadedInvisibleUp {
+
main .scrollBlock .content .h3:empty {
−
   transform: translateY(-50px);
+
   margin: 0;
 
}
 
}
−
main .scrollBlock .content.fadeOutUp, main .scrollBlock .content.fadedInvisibleDown {
+
main .scrollBlock .content p {
−
   transform: translateY(50px);
+
   margin-bottom: 0;
 
}
 
}
−
main .scrollBlock .content.fadedInvisibleDown, main .scrollBlock .content.fadedInvisibleUp {
+
main .scrollBlock .content ol.biglist li {
−
   transition: 0s;
+
   padding-left: 1.5em;
−
}
+
−
main .scrollBlock .content .h2 {
+
 
   margin: 0;
 
   margin: 0;
 +
  font-family: "lato-light";
 +
  font-size: 1.2rem;
 +
  line-height: 1.5;
 +
  text-align: justify;
 +
  padding-left: 0.5em;
 
}
 
}
−
main .scrollBlock .content .h3 {
+
@media (max-width: 480px) {
−
  margin: 0 0 6px;
+
  main .scrollBlock .content ol.biglist li {
 +
    font-size: 1rem;
 +
  }
 
}
 
}
−
main .scrollBlock .content p {
+
main .scrollBlock .content sup, main .scrollBlock .content sub {
−
   flex-grow: 1;
+
   font-size: 0.7rem;
 +
}
 +
@media (max-width: 480px) {
 +
  main .scrollBlock .content sup, main .scrollBlock .content sub {
 +
    font-size: 0.6rem;
 +
  }
 +
}
 +
@media (max-width: 800px) {
 +
  main .scrollBlock .content {
 +
    margin: 0;
 +
    box-shadow: 0 0 10px lightgrey;
 +
  }
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  main .scrollBlock .content {
 +
    grid-column-start: 1;
 +
    grid-column-end: 2;
 +
    grid-row-start: 2;
 +
    grid-row-end: 3;
 +
  }
 +
}
 +
main .scrollBlock .bubbleIndex {
 +
  pointer-events: all;
 +
  margin-left: 12px;
 
   display: flex;
 
   display: flex;
−
   justify-content: stretch;
+
  flex-direction: column;
 +
   justify-content: center;
 
   align-items: center;
 
   align-items: center;
 +
  grid-column-start: 3;
 +
  grid-column-end: 4;
 +
  grid-row-start: 1;
 +
  grid-row-end: 2;
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  main .scrollBlock .bubbleIndex {
 +
    margin-left: 4px;
 +
    grid-column-start: 2;
 +
    grid-column-end: 3;
 +
    grid-row-start: 1;
 +
    grid-row-end: 3;
 +
    height: 96vh;
 +
  }
 +
}
 +
main .scrollBlock .bubbleIndex > div {
 +
  width: 8px;
 +
  height: 8px;
 +
  margin: 2px 0;
 +
  border-radius: 1000px;
 +
  border: 2px solid #6281EF;
 +
  cursor: pointer;
 +
  transition: background-color 0.3s, transform 0.3s;
 +
}
 +
main .scrollBlock .bubbleIndex > div:hover {
 +
  transform: scale(1.3);
 +
}
 +
main .scrollBlock .bubbleIndex > div.active {
 +
  background-color: #6281EF;
 +
}
 +
main .scrollBlock.noanim {
 +
  pointer-events: all;
 +
  width: 90vw;
 +
  height: unset;
 +
  grid-template-columns: 0 1fr 0;
 +
  grid-template-rows: 1fr;
 +
}
 +
main .scrollBlock.noanim .content {
 +
  width: 70vw;
 +
  max-width: 700px;
 +
  justify-self: center;
 +
  grid-column-start: 2;
 +
  grid-column-end: 3;
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  main .scrollBlock {
 +
    grid-template-columns: 80vw 16px;
 +
    grid-template-rows: 40vh 5vh;
 +
    margin-left: 16px;
 +
    height: 45vh;
 +
    top: 1vh;
 +
  }
 +
  main .scrollBlock.contentLarger {
 +
    grid-template-columns: 80vw 16px;
 +
    grid-template-rows: 0 90vh;
 +
  }
 +
  main .scrollBlock.noanim {
 +
    width: 90vw;
 +
    justify-content: center;
 +
    padding: 40px 0;
 +
  }
 +
  main .scrollBlock .scrollItem {
 +
    width: 70vw;
 +
    height: 35vh;
 +
    justify-self: center;
 +
  }
 +
  main .scrollBlock .scrollItem.contentLarger {
 +
    height: 0vh;
 +
  }
 +
  main .scrollBlock .content {
 +
    width: 70vw;
 +
    justify-self: center;
 +
    box-shadow: 0 0 10px lightgrey;
 +
    padding: 20px;
 +
  }
 
}
 
}
 
main .buttonHeading {
 
main .buttonHeading {
Line 111: Line 279:
 
   font-size: 1.5rem;
 
   font-size: 1.5rem;
 
   margin-bottom: 64px;
 
   margin-bottom: 64px;
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  main .buttonHeading {
 +
    margin-bottom: 16px;
 +
  }
 
}
 
}
 
main .buttonContainer {
 
main .buttonContainer {
 
   display: flex;
 
   display: flex;
 
   justify-content: center;
 
   justify-content: center;
−
   align-items: center;
+
   align-items: stretch;
 
}
 
}
 
main .buttonContainer > * {
 
main .buttonContainer > * {
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 
   font-family: "montserrat-bold";
 
   font-family: "montserrat-bold";
 
   color: #FAFAFC;
 
   color: #FAFAFC;
Line 126: Line 302:
 
   border-radius: 1000px;
 
   border-radius: 1000px;
 
   margin: 0 32px;
 
   margin: 0 32px;
 +
  transition: transform 0.3s, box-shadow 0.3s;
 
}
 
}
 
main .buttonContainer > *:first-child {
 
main .buttonContainer > *:first-child {
Line 140: Line 317:
 
main .buttonContainer > *:last-child:hover {
 
main .buttonContainer > *:last-child:hover {
 
   box-shadow: 0 18px 40px -14px #3658cf;
 
   box-shadow: 0 18px 40px -14px #3658cf;
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  main .buttonContainer > * {
 +
    padding: 16px 24px;
 +
    font-size: 1rem;
 +
    margin: 8px 0;
 +
    width: 80vw;
 +
  }
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  main .buttonContainer {
 +
    flex-direction: column;
 +
  }
 
}
 
}
  
−
#section-text .content .content-paragraph {
+
.content li b {
−
   margin-bottom: 0;
+
   font-family: "lato-regular", sans-serif;
 +
}
 +
 
 +
b.bluer {
 +
  color: #6281EF;
 +
}
 +
 
 +
b.yellower {
 +
  color: #f48fb1;
 
}
 
}
  
 
.scrollAnim {
 
.scrollAnim {
−
   width: 100%;
+
   width: 90vw;
−
   height: 50vh;
+
  display: grid;
 +
  grid-template-columns: 45vw auto 16px;
 +
  grid-template-rows: 1fr;
 +
  column-gap: 10px;
 +
}
 +
.scrollAnim.lastPad {
 +
   height: 35vh;
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  .scrollAnim.lastPad {
 +
    display: none;
 +
  }
 +
}
 +
.scrollAnim .content {
 +
  display: flex;
 +
  flex-direction: column;
 +
  align-items: stretch;
 +
  grid-column-start: 2;
 +
  grid-column-end: 3;
 +
  grid-row-start: 1;
 +
  grid-row-end: 2;
 +
  align-self: center;
 +
  justify-self: stretch;
 +
  padding: 40px;
 +
  margin-top: 0;
 +
  background-color: #FAFAFC;
 +
  margin-bottom: 64px;
 +
}
 +
.scrollAnim .content .h2 {
 +
  font-size: 2.4rem;
 +
  margin: 0 0 16px;
 +
}
 +
.scrollAnim .content .h2:empty {
 +
  margin: 0;
 +
}
 +
.scrollAnim .content .h3 {
 +
  font-size: 1.5rem;
 +
  margin: 0 0 8px;
 +
}
 +
.scrollAnim .content .h3:empty {
 +
  margin: 0;
 +
}
 +
.scrollAnim .content p {
 +
  margin-bottom: 0;
 +
}
 +
.scrollAnim .content ol.biglist {
 +
  padding-left: 1.5em;
 +
}
 +
.scrollAnim .content ol.biglist li {
 +
  margin: 0;
 +
  font-family: "lato-light";
 +
  font-size: 1.2rem;
 +
  line-height: 1.5;
 +
  text-align: justify;
 +
  padding-left: 0.5em;
 +
}
 +
@media (max-width: 480px) {
 +
  .scrollAnim .content ol.biglist li {
 +
    font-size: 1rem;
 +
  }
 +
}
 +
.scrollAnim .content sup, .scrollAnim .content sub {
 +
  font-size: 0.7rem;
 +
}
 +
@media (max-width: 480px) {
 +
  .scrollAnim .content sup, .scrollAnim .content sub {
 +
    font-size: 0.6rem;
 +
  }
 +
}
 +
@media (max-width: 800px) {
 +
  .scrollAnim .content {
 +
    box-shadow: 0 0 10px lightgrey;
 +
  }
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  .scrollAnim .content {
 +
    grid-column-start: 1;
 +
    grid-column-end: 2;
 +
  }
 +
}
 +
@media (max-aspect-ratio: 1/1) {
 +
  .scrollAnim {
 +
    grid-template-columns: 80vw 16px;
 +
    grid-template-rows: auto;
 +
    margin-left: 16px;
 +
  }
 +
  .scrollAnim .content {
 +
    width: 70vw;
 +
    box-shadow: 0 0 10px lightgrey;
 +
    padding: 20px;
 +
  }
 
}
 
}
  
−
p.content-paragraph, #HQ_page p.content-paragraph {
+
p, #HQ_page p, main .content > p {
−
   font-family: "lato-regular";
+
   font-family: "lato-light";
 
   margin: 0;
 
   margin: 0;
 
   font-size: 1.2rem;
 
   font-size: 1.2rem;
 
   line-height: 1.5;
 
   line-height: 1.5;
−
   margin-top: 20px;
+
}
−
   margin-bottom: 40px;
+
p + p, #HQ_page p + p, main .content > p + p {
 +
   margin-top: 16px;
 +
}
 +
p:empty, #HQ_page p:empty, main .content > p:empty {
 +
   margin: 0;
 
}
 
}
 
@media (max-width: 480px) {
 
@media (max-width: 480px) {
−
   p.content-paragraph, #HQ_page p.content-paragraph {
+
   p, #HQ_page p, main .content > p {
 
     font-size: 1rem;
 
     font-size: 1rem;
 
   }
 
   }
 +
}
 +
 +
.overviewIndex {
 +
  margin: 0 auto;
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: space-between;
 +
  align-items: start;
 +
  width: calc(70vw + 80px);
 +
}
 +
.overviewIndex > div {
 +
  background-color: #FAFAFC;
 +
  border-radius: 48px;
 +
  box-shadow: 0 0 10px lightgrey;
 +
  width: 22vw;
 +
  padding-bottom: 20px;
 +
}
 +
.overviewIndex > div .title {
 +
  text-decoration: none;
 +
  color: #121212;
 +
  display: block;
 +
  padding: 35px 10px;
 +
  color: #FAFAFC;
 +
  background-color: #2E64EC;
 +
  text-transform: uppercase;
 +
  border-radius: 48px;
 +
  text-align: center;
 +
  font-family: "montserrat-bold";
 +
  font-size: 1.4rem;
 +
  box-shadow: 0 0 10px lightgrey;
 +
  margin-bottom: 16px;
 +
}
 +
.overviewIndex > div .item {
 +
  text-decoration: none;
 +
  color: #121212;
 +
  display: flex;
 +
  align-items: baseline;
 +
  padding: 10px 20px;
 +
  cursor: pointer;
 +
  font-size: 1.1rem;
 +
  font-family: "lato-light";
 +
}
 +
.overviewIndex > div .item > span {
 +
  transition: color 0.3s;
 +
}
 +
.overviewIndex > div .item > span:hover {
 +
  color: #6281EF;
 +
}
 +
.overviewIndex > div .item > div {
 +
  display: inline;
 +
  min-width: 12px;
 +
  height: 12px;
 +
  margin-right: 14px;
 +
  border-radius: 1000px;
 +
  background-color: #6281EF;
 +
}
 +
.overviewIndex > div .title {
 +
  background-color: #3356CE;
 +
}
 +
.overviewIndex > div .item > div {
 +
  background-color: #3356CE;
 +
}
 +
.overviewIndex > div:first-child .title {
 +
  background-color: #6D8CF1;
 +
}
 +
.overviewIndex > div:first-child .item > div {
 +
  background-color: #6D8CF1;
 +
}
 +
.overviewIndex > div:last-child .title {
 +
  background-color: #11348F;
 +
}
 +
.overviewIndex > div:last-child .item > div {
 +
  background-color: #11348F;
 +
}
 +
@media (max-width: 800px) {
 +
  .overviewIndex {
 +
    flex-direction: column;
 +
    width: calc(70vw + 40px);
 +
  }
 +
  .overviewIndex > div {
 +
    width: 100%;
 +
    margin-bottom: 32px;
 +
  }
 +
}
 +
 +
#mw-content-text > p {
 +
  margin: 0;
 +
}
 +
#mw-content-text > p + p {
 +
  margin: 0;
 
}
 
}

Latest revision as of 21:27, 27 October 2020

main .buttonContainer > *, .overviewIndex > div .title { 

 cursor: pointer;
 transition: transform 0.3s;

} main .buttonContainer > :hover, .overviewIndex > div .title:hover { 

 transform: translateY(-2px);

} main .buttonContainer > :active, .overviewIndex > div .title:active { 

 transform: translateY(2px);

}

body, html { 

 margin: 0;
 padding: 0;
 color: #222222;
 font-family: "lato-regular";

}

body, #bodyContent { 

 background-image: url(T--Vilnius-Lithuania--backgroundWavesWhite.png);

}

.introContainer { 

 overflow: hidden;

}

.grandHeading { 

 text-align: center;
 font-size: 2.5rem;
 font-family: "montserrat-bold";
 margin-bottom: 0.8em;

}

main { 

 flex-direction: column;
 justify-content: center;
 align-items: center;
 background-color: unset;
 padding-bottom: 70px;
 margin-top: unset;

} main .references ol li::marker, main .references ol li::before { 

 font-family: "lato-light";

} main .notvisible { 

 margin: 0;
 padding: 0;
 height: 0;
 max-height: 0;
 color: transparent;
 background-color: transparent;
 border: none;
 outline: none;

} main .h3 { 

 text-align: left;
 font-size: 1.5rem;

} @media (max-aspect-ratio: 1/1) { 

 main .h3 {
   font-size: 1.2rem;
 }

} main b.semi { 

 font-family: "lato-semibold";

} main b.colored { 

 color: #2E64EC;

} main .scrollBlock { 

 pointer-events: none;
 height: 80vh;
 width: 90vw;
 display: grid;
 grid-template-columns: 45vw auto 16px;
 grid-template-rows: 1fr;
 column-gap: 10px;
 position: -webkit-sticky;
 position: sticky;
 top: 10vh;

} main .scrollBlock.contentLarger { 

 grid-template-columns: 0 auto 16px;
 grid-template-rows: 1fr;

} main .scrollBlock .scrollItem { 

 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;
 align-self: center;
 height: 440px;
 display: flex;
 align-items: center;
 justify-content: center;

} @media (max-aspect-ratio: 1/1) { 

 main .scrollBlock .scrollItem {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 2;
   box-shadow: 0 0 10px lightgrey;
   background-color: #FAFAFC;
   border-radius: 5px;
   padding: 30px;
   box-sizing: border-box;
 }

} main .scrollBlock .scrollItem > div { 

 width: 100%;
 height: 100%;

} main .scrollBlock .scrollItem.contentLarger { 

 width: 0vw;

} main .scrollBlock .scrollItem > img { 

 width: 100%;
 height: 100%;

} main .scrollBlock .content { 

 display: flex;
 flex-direction: column;
 align-items: stretch;
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 2;
 align-self: center;
 justify-self: stretch;
 padding: 40px;
 margin-top: 0;
 background-color: #FAFAFC;
 transition: opacity 0.2s, transform 0.2s;

} main .scrollBlock .content.contentLarger { 

 width: 70vw;
 height: 50vh;
 justify-self: center;

} main .scrollBlock .content .h2 { 

 font-size: 2.4rem;
 margin: 0 0 16px;

} main .scrollBlock .content .h2:empty { 

 margin: 0;

} main .scrollBlock .content .h3 { 

 font-size: 1.5rem;
 margin: 0 0 8px;

} main .scrollBlock .content .h3:empty { 

 margin: 0;

} main .scrollBlock .content p { 

 margin-bottom: 0;

} main .scrollBlock .content ol.biglist li { 

 padding-left: 1.5em;
 margin: 0;
 font-family: "lato-light";
 font-size: 1.2rem;
 line-height: 1.5;
 text-align: justify;
 padding-left: 0.5em;

} @media (max-width: 480px) { 

 main .scrollBlock .content ol.biglist li {
   font-size: 1rem;
 }

} main .scrollBlock .content sup, main .scrollBlock .content sub { 

 font-size: 0.7rem;

} @media (max-width: 480px) { 

 main .scrollBlock .content sup, main .scrollBlock .content sub {
   font-size: 0.6rem;
 }

} @media (max-width: 800px) { 

 main .scrollBlock .content {
   margin: 0;
   box-shadow: 0 0 10px lightgrey;
 }

} @media (max-aspect-ratio: 1/1) { 

 main .scrollBlock .content {
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 2;
   grid-row-end: 3;
 }

} main .scrollBlock .bubbleIndex { 

 pointer-events: all;
 margin-left: 12px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 grid-column-start: 3;
 grid-column-end: 4;
 grid-row-start: 1;
 grid-row-end: 2;

} @media (max-aspect-ratio: 1/1) { 

 main .scrollBlock .bubbleIndex {
   margin-left: 4px;
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 3;
   height: 96vh;
 }

} main .scrollBlock .bubbleIndex > div { 

 width: 8px;
 height: 8px;
 margin: 2px 0;
 border-radius: 1000px;
 border: 2px solid #6281EF;
 cursor: pointer;
 transition: background-color 0.3s, transform 0.3s;

} main .scrollBlock .bubbleIndex > div:hover { 

 transform: scale(1.3);

} main .scrollBlock .bubbleIndex > div.active { 

 background-color: #6281EF;

} main .scrollBlock.noanim { 

 pointer-events: all;
 width: 90vw;
 height: unset;
 grid-template-columns: 0 1fr 0;
 grid-template-rows: 1fr;

} main .scrollBlock.noanim .content { 

 width: 70vw;
 max-width: 700px;
 justify-self: center;
 grid-column-start: 2;
 grid-column-end: 3;

} @media (max-aspect-ratio: 1/1) { 

 main .scrollBlock {
   grid-template-columns: 80vw 16px;
   grid-template-rows: 40vh 5vh;
   margin-left: 16px;
   height: 45vh;
   top: 1vh;
 }
 main .scrollBlock.contentLarger {
   grid-template-columns: 80vw 16px;
   grid-template-rows: 0 90vh;
 }
 main .scrollBlock.noanim {
   width: 90vw;
   justify-content: center;
   padding: 40px 0;
 }
 main .scrollBlock .scrollItem {
   width: 70vw;
   height: 35vh;
   justify-self: center;
 }
 main .scrollBlock .scrollItem.contentLarger {
   height: 0vh;
 }
 main .scrollBlock .content {
   width: 70vw;
   justify-self: center;
   box-shadow: 0 0 10px lightgrey;
   padding: 20px;
 }

} main .buttonHeading { 

 font-family: "montserrat-bold";
 font-size: 1.5rem;
 margin-bottom: 64px;

} @media (max-aspect-ratio: 1/1) { 

 main .buttonHeading {
   margin-bottom: 16px;
 }

} main .buttonContainer { 

 display: flex;
 justify-content: center;
 align-items: stretch;

} main .buttonContainer > * { 

 display: flex;
 align-items: center;
 justify-content: center;
 font-family: "montserrat-bold";
 color: #FAFAFC;
 padding: 32px 56px;
 font-size: 1.2rem;
 max-width: 200px;
 text-align: center;
 border-radius: 1000px;
 margin: 0 32px;
 transition: transform 0.3s, box-shadow 0.3s;

} main .buttonContainer > *:first-child { 

 background-color: #6D8CF1;
 box-shadow: 0 16px 32px -12px #708ff1;

} main .buttonContainer > *:first-child:hover { 

 box-shadow: 0 18px 40px -14px #708ff1;

} main .buttonContainer > *:last-child { 

 background-color: #3356CE;
 box-shadow: 0 16px 32px -12px #3658cf;

} main .buttonContainer > *:last-child:hover { 

 box-shadow: 0 18px 40px -14px #3658cf;

} @media (max-aspect-ratio: 1/1) { 

 main .buttonContainer > * {
   padding: 16px 24px;
   font-size: 1rem;
   margin: 8px 0;
   width: 80vw;
 }

} @media (max-aspect-ratio: 1/1) { 

 main .buttonContainer {
   flex-direction: column;
 }

}

.content li b { 

 font-family: "lato-regular", sans-serif;

}

b.bluer { 

 color: #6281EF;

}

b.yellower { 

 color: #f48fb1;

}

.scrollAnim { 

 width: 90vw;
 display: grid;
 grid-template-columns: 45vw auto 16px;
 grid-template-rows: 1fr;
 column-gap: 10px;

} .scrollAnim.lastPad { 

 height: 35vh;

} @media (max-aspect-ratio: 1/1) { 

 .scrollAnim.lastPad {
   display: none;
 }

} .scrollAnim .content { 

 display: flex;
 flex-direction: column;
 align-items: stretch;
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 2;
 align-self: center;
 justify-self: stretch;
 padding: 40px;
 margin-top: 0;
 background-color: #FAFAFC;
 margin-bottom: 64px;

} .scrollAnim .content .h2 { 

 font-size: 2.4rem;
 margin: 0 0 16px;

} .scrollAnim .content .h2:empty { 

 margin: 0;

} .scrollAnim .content .h3 { 

 font-size: 1.5rem;
 margin: 0 0 8px;

} .scrollAnim .content .h3:empty { 

 margin: 0;

} .scrollAnim .content p { 

 margin-bottom: 0;

} .scrollAnim .content ol.biglist { 

 padding-left: 1.5em;

} .scrollAnim .content ol.biglist li { 

 margin: 0;
 font-family: "lato-light";
 font-size: 1.2rem;
 line-height: 1.5;
 text-align: justify;
 padding-left: 0.5em;

} @media (max-width: 480px) { 

 .scrollAnim .content ol.biglist li {
   font-size: 1rem;
 }

} .scrollAnim .content sup, .scrollAnim .content sub { 

 font-size: 0.7rem;

} @media (max-width: 480px) { 

 .scrollAnim .content sup, .scrollAnim .content sub {
   font-size: 0.6rem;
 }

} @media (max-width: 800px) { 

 .scrollAnim .content {
   box-shadow: 0 0 10px lightgrey;
 }

} @media (max-aspect-ratio: 1/1) { 

 .scrollAnim .content {
   grid-column-start: 1;
   grid-column-end: 2;
 }

} @media (max-aspect-ratio: 1/1) { 

 .scrollAnim {
   grid-template-columns: 80vw 16px;
   grid-template-rows: auto;
   margin-left: 16px;
 }
 .scrollAnim .content {
   width: 70vw;
   box-shadow: 0 0 10px lightgrey;
   padding: 20px;
 }

}

p, #HQ_page p, main .content > p { 

 font-family: "lato-light";
 margin: 0;
 font-size: 1.2rem;
 line-height: 1.5;

} p + p, #HQ_page p + p, main .content > p + p { 

 margin-top: 16px;

} p:empty, #HQ_page p:empty, main .content > p:empty { 

 margin: 0;

} @media (max-width: 480px) { 

 p, #HQ_page p, main .content > p {
   font-size: 1rem;
 }

}

.overviewIndex { 

 margin: 0 auto;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: start;
 width: calc(70vw + 80px);

} .overviewIndex > div { 

 background-color: #FAFAFC;
 border-radius: 48px;
 box-shadow: 0 0 10px lightgrey;
 width: 22vw;
 padding-bottom: 20px;

} .overviewIndex > div .title { 

 text-decoration: none;
 color: #121212;
 display: block;
 padding: 35px 10px;
 color: #FAFAFC;
 background-color: #2E64EC;
 text-transform: uppercase;
 border-radius: 48px;
 text-align: center;
 font-family: "montserrat-bold";
 font-size: 1.4rem;
 box-shadow: 0 0 10px lightgrey;
 margin-bottom: 16px;

} .overviewIndex > div .item { 

 text-decoration: none;
 color: #121212;
 display: flex;
 align-items: baseline;
 padding: 10px 20px;
 cursor: pointer;
 font-size: 1.1rem;
 font-family: "lato-light";

} .overviewIndex > div .item > span { 

 transition: color 0.3s;

} .overviewIndex > div .item > span:hover { 

 color: #6281EF;

} .overviewIndex > div .item > div { 

 display: inline;
 min-width: 12px;
 height: 12px;
 margin-right: 14px;
 border-radius: 1000px;
 background-color: #6281EF;

} .overviewIndex > div .title { 

 background-color: #3356CE;

} .overviewIndex > div .item > div { 

 background-color: #3356CE;

} .overviewIndex > div:first-child .title { 

 background-color: #6D8CF1;

} .overviewIndex > div:first-child .item > div { 

 background-color: #6D8CF1;

} .overviewIndex > div:last-child .title { 

 background-color: #11348F;

} .overviewIndex > div:last-child .item > div { 

 background-color: #11348F;

} @media (max-width: 800px) { 

 .overviewIndex {
   flex-direction: column;
   width: calc(70vw + 40px);
 }
 .overviewIndex > div {
   width: 100%;
   margin-bottom: 32px;
 }

}

  1. mw-content-text > p {
 margin: 0;

}

  1. mw-content-text > p + p {
 margin: 0;

}