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

Revision as of 14:59, 17 October 2020 (view source) Paulius (Talk | contribs) m ← Older edit		Latest revision as of 21:27, 27 October 2020 (view source) Paulius (Talk | contribs) m
(19 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 23:		Line 23:
	.introContainer {		.introContainer {
	overflow: hidden;		overflow: hidden;
		+	}
		+
		+	.grandHeading {
		+	text-align: center;
		+	font-size: 2.5rem;
		+	font-family: "montserrat-bold";
		+	margin-bottom: 0.8em;
	}		}
Line 31:		Line 38:
	background-color: unset;		background-color: unset;
	padding-bottom: 70px;		padding-bottom: 70px;
		+	margin-top: unset;
		+	}
		+	main .references ol li::marker, main .references ol li::before {
		+	font-family: "lato-light";
	}		}
	main .notvisible {		main .notvisible {
Line 43:		Line 54:
	}		}
	main .h3 {		main .h3 {
		+	text-align: left;
	font-size: 1.5rem;		font-size: 1.5rem;
	}		}
Line 57:		Line 69:
	}		}
	main .scrollBlock {		main .scrollBlock {
		+	pointer-events: none;
	height: 80vh;		height: 80vh;
	width: 90vw;		width: 90vw;
Line 70:		Line 83:
	grid-template-columns: 0 auto 16px;		grid-template-columns: 0 auto 16px;
	grid-template-rows: 1fr;		grid-template-rows: 1fr;
−	}
−	main .scrollBlock.noanim {
−	width: 90vw;
−	height: unset;
−	grid-template-columns: 0 auto 16px;
−	grid-template-rows: 1fr;
−	}
−	main .scrollBlock.noanim .content {
−	width: 70vw;
−	justify-self: center;
	}		}
	main .scrollBlock .scrollItem {		main .scrollBlock .scrollItem {
Line 98:		Line 101:
	grid-row-start: 1;		grid-row-start: 1;
	grid-row-end: 2;		grid-row-end: 2;
		+	box-shadow: 0 0 10px lightgrey;
		+	background-color: #FAFAFC;
		+	border-radius: 5px;
		+	padding: 30px;
		+	box-sizing: border-box;
	}		}
	}		}
Line 130:		Line 138:
	height: 50vh;		height: 50vh;
	justify-self: center;		justify-self: center;
−	}
−	main .scrollBlock .content.fadeOutDown, main .scrollBlock .content.fadeOutUp, main .scrollBlock .content.fadedInvisibleDown, main .scrollBlock .content.fadedInvisibleUp {
−	opacity: 0;
−	}
−	main .scrollBlock .content.fadeOutDown, main .scrollBlock .content.fadedInvisibleUp {
−	transform: translateY(-50px);
−	}
−	main .scrollBlock .content.fadeOutUp, main .scrollBlock .content.fadedInvisibleDown {
−	transform: translateY(50px);
−	}
−	main .scrollBlock .content.fadedInvisibleDown, main .scrollBlock .content.fadedInvisibleUp {
−	transition: 0s;
	}		}
	main .scrollBlock .content .h2 {		main .scrollBlock .content .h2 {
−	font-size: 1.8rem;	+	font-size: 2.4rem;
	margin: 0 0 16px;		margin: 0 0 16px;
	}		}
Line 151:		Line 147:
	}		}
	main .scrollBlock .content .h3 {		main .scrollBlock .content .h3 {
−	font-size: 1.3rem;	+	font-size: 1.5rem;
	margin: 0 0 8px;		margin: 0 0 8px;
	}		}
Line 160:		Line 156:
	margin-bottom: 0;		margin-bottom: 0;
	}		}
−	main .scrollBlock .content ol, main .scrollBlock .content li {	+	main .scrollBlock .content ol.biglist li {
		+	padding-left: 1.5em;
	margin: 0;		margin: 0;
−	font-family: "lato-regular";	+	font-family: "lato-light";
	font-size: 1.2rem;		font-size: 1.2rem;
	line-height: 1.5;		line-height: 1.5;
	text-align: justify;		text-align: justify;
		+	padding-left: 0.5em;
	}		}
	@media (max-width: 480px) {		@media (max-width: 480px) {
−	main .scrollBlock .content ol, main .scrollBlock .content li {	+	main .scrollBlock .content ol.biglist li {
	font-size: 1rem;		font-size: 1rem;
	}		}
−	}
−	main .scrollBlock .content ol {
−	padding-left: 1.5em;
−	}
−	main .scrollBlock .content li {
−	padding-left: 0.5em;
	}		}
	main .scrollBlock .content sup, main .scrollBlock .content sub {		main .scrollBlock .content sup, main .scrollBlock .content sub {
Line 201:		Line 193:
	}		}
	main .scrollBlock .bubbleIndex {		main .scrollBlock .bubbleIndex {
		+	pointer-events: all;
	margin-left: 12px;		margin-left: 12px;
	display: flex;		display: flex;
Line 218:		Line 211:
	grid-row-start: 1;		grid-row-start: 1;
	grid-row-end: 3;		grid-row-end: 3;
		+	height: 96vh;
	}		}
	}		}
Line 234:		Line 228:
	main .scrollBlock .bubbleIndex > div.active {		main .scrollBlock .bubbleIndex > div.active {
	background-color: #6281EF;		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) {		@media (max-aspect-ratio: 1/1) {
	main .scrollBlock {		main .scrollBlock {
−	grid-template-columns: 83vw 16px;	+	grid-template-columns: 80vw 16px;
−	grid-template-rows: 40vh 50vh;	+	grid-template-rows: 40vh 5vh;
	margin-left: 16px;		margin-left: 16px;
−	height: 90vh;	+	height: 45vh;
−	top: 5vh;	+	top: 1vh;
	}		}
	main .scrollBlock.contentLarger {		main .scrollBlock.contentLarger {
−	grid-template-columns: 83vw 16px;	+	grid-template-columns: 80vw 16px;
	grid-template-rows: 0 90vh;		grid-template-rows: 0 90vh;
	}		}
Line 253:		Line 261:
	}		}
	main .scrollBlock .scrollItem {		main .scrollBlock .scrollItem {
−	width: 83vw;	+	width: 70vw;
	height: 35vh;		height: 35vh;
		+	justify-self: center;
	}		}
	main .scrollBlock .scrollItem.contentLarger {		main .scrollBlock .scrollItem.contentLarger {
Line 260:		Line 269:
	}		}
	main .scrollBlock .content {		main .scrollBlock .content {
−	width: 83vw;	+	width: 70vw;
		+	justify-self: center;
	box-shadow: 0 0 10px lightgrey;		box-shadow: 0 0 10px lightgrey;
	padding: 20px;		padding: 20px;
Line 322:		Line 332:
	}		}
−	.sideBlock {	+	.content li b {
−	color: #FAFAFC;	+	font-family: "lato-regular", sans-serif;
		+	}
		+
		+	b.bluer {
		+	color: #6281EF;
		+	}
		+
		+	b.yellower {
		+	color: #f48fb1;
		+	}
		+
		+	.scrollAnim {
		+	width: 90vw;
	display: grid;		display: grid;
−	grid-template-columns: 1fr;	+	grid-template-columns: 45vw auto 16px;
	grid-template-rows: 1fr;		grid-template-rows: 1fr;
−	justify-items: center;	+	column-gap: 10px;
−	position: fixed;	+
−	margin: 0 0 32px 32px;	+
−	box-sizing: border-box;	+
−	left: 0;	+
−	bottom: 0;	+
−	z-index: 11;	+
−	top: unset;	+
−	transform: unset;	+
−	min-width: 62px;	+
−	max-width: 62px;	+
−	max-height: 62px;	+
−	border-radius: 31px;	+
−	background-color: #6281EF;	+
−	overflow: hidden;	+
−	transition: 0.3s;	+
−	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);	+
	}		}
−	.sideBlock b {	+	.scrollAnim.lastPad {
−	text-align: center;	+	height: 35vh;
−	margin: 0;	+
	}		}
−	.sideBlock ul {	+	@media (max-aspect-ratio: 1/1) {
−	margin: 1em 0 2em;	+	.scrollAnim.lastPad {
		+	display: none;
		+	}
	}		}
−	.sideBlock ul div {	+	.scrollAnim .content {
−	color: #FAFAFC;	+	display: flex;
−	border-color: #FAFAFC;	+	flex-direction: column;
−	}	+	align-items: stretch;
−	.sideBlock ul li.active div {	+	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;		background-color: #FAFAFC;
		+	margin-bottom: 64px;
	}		}
−	.sideBlock ul a {	+	.scrollAnim .content .h2 {
−	color: #FAFAFC;	+	font-size: 2.4rem;
		+	margin: 0 0 16px;
	}		}
−	.sideBlock ul a.indexsection {	+	.scrollAnim .content .h2:empty {
−	font-family: "montserrat-bold";	+	margin: 0;
	}		}
−	.sideBlock.open {	+	.scrollAnim .content .h3 {
−	padding: 32px 32px 62px;	+	font-size: 1.5rem;
−	border-radius: 0px;	+	margin: 0 0 8px;
−	min-width: 200px;	+
−	max-width: 600px;	+
−	max-height: 100vh;	+
	}		}
−	@media (max-width: 800px) {	+	.scrollAnim .content .h3:empty {
−	.sideBlock {	+	margin: 0;
−	position: fixed;	+	}
−	bottom: 0;	+	.scrollAnim .content p {
−	padding: 0 64px;	+	margin-bottom: 0;
−	margin: 0;	+	}
−	z-index: 20;	+	.scrollAnim .content ol.biglist {
−	width: 100%;	+	padding-left: 1.5em;
−	box-sizing: border-box;	+	}
−	min-width: unset;	+	.scrollAnim .content ol.biglist li {
−	max-width: unset;	+	margin: 0;
−	text-align: center;	+	font-family: "lato-light";
−	transition: transform 0.5s;	+	font-size: 1.2rem;
−	top: unset;	+	line-height: 1.5;
−	transform: translateY(calc(100% - 62px));	+	text-align: justify;
−	display: flex;	+	padding-left: 0.5em;
−	flex-direction: column;	+	}
−	align-items: center;	+	@media (max-width: 480px) {
−	min-width: unset;	+	.scrollAnim .content ol.biglist li {
−	max-width: unset;	+	font-size: 1rem;
−	max-height: unset;	+
−	border-radius: unset;	+
−	box-shadow: unset;	+
−	}	+
−	.sideBlock.open {	+
−	padding: 0 64px;	+
−	min-width: unset;	+
−	max-width: unset;	+
−	max-height: unset;	+
	}		}
	}		}
−		+	.scrollAnim .content sup, .scrollAnim .content sub {
−	.indexbutton2 {	+	font-size: 0.7rem;
−	color: #FAFAFC;	+	}
−	background-color: #6281EF;	+	@media (max-width: 480px) {
−	font-family: "montserrat-bold";	+	.scrollAnim .content sup, .scrollAnim .content sub {
−	z-index: 12;	+	font-size: 0.6rem;
−	cursor: pointer;	+	}
−	position: fixed;	+
−	left: 0;	+
−	bottom: 0;	+
−	margin: 0 0 32px 32px;	+
−	display: flex;	+
−	justify-content: center;	+
−	align-items: center;	+
−	text-transform: uppercase;	+
−	font-size: 1rem;	+
−	width: 62px;	+
−	height: 62px;	+
−	border-radius: 32px;	+
	}		}
	@media (max-width: 800px) {		@media (max-width: 800px) {
−	.indexbutton2 {	+	.scrollAnim .content {
−	display: none;	+	box-shadow: 0 0 10px lightgrey;
	}		}
	}		}
−		+	@media (max-aspect-ratio: 1/1) {
−	.sideBlockOverlay {	+	.scrollAnim .content {
−	position: fixed;	+	grid-column-start: 1;
−	top: 0;	+	grid-column-end: 2;
−	left: 0;	+	}
−	right: 0;	+
−	bottom: 0;	+
−	pointer-events: none;	+
−	opacity: 0;	+
−	z-index: 11;	+
−	background-color: rgba(0, 0, 0, 0.5);	+
−	transition: opacity 0.5s;	+
	}		}
−	.sideBlockOverlay.open {	+	@media (max-aspect-ratio: 1/1) {
−	opacity: 1;	+	.scrollAnim {
−	pointer-events: unset;	+	grid-template-columns: 80vw 16px;
		+	grid-template-rows: auto;
		+	margin-left: 16px;
		+	}
		+	.scrollAnim .content {
		+	width: 70vw;
		+	box-shadow: 0 0 10px lightgrey;
		+	padding: 20px;
		+	}
	}		}
−	.scrollAnim {	+	p, #HQ_page p, main .content > p {
−	width: 100%;	+	font-family: "lato-light";
−	height: 50vh;	+
−	}	+
−		+
−	p.content-paragraph, #HQ_page p.content-paragraph, main .content > p {	+
−	font-family: "lato-regular";	+
	margin: 0;		margin: 0;
	font-size: 1.2rem;		font-size: 1.2rem;
	line-height: 1.5;		line-height: 1.5;
	}		}
−	p.content-paragraph:empty, #HQ_page p.content-paragraph:empty, main .content > p:empty {	+	p + p, #HQ_page p + p, main .content > p + p {
−	margin: 0;	+
−	}	+
−	p.content-paragraph + p, #HQ_page p.content-paragraph + p, main .content > p + p {	+
	margin-top: 16px;		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, main .content > p {	+	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();

}

.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;

}