Difference between revisions of "Template:Vilnius-Lithuania/index.css"

Revision as of 12:42, 4 October 2020 (view source) Kvainiute (Talk | contribs) ← Older edit		Revision as of 12:44, 4 October 2020 (view source) Kvainiute (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	div[bg=dark] {	+	body,
−	background-color: rgba(0, 0, 0, 0.85);	+	html {
		+	margin: 0;
		+	padding: 0;
		+	color: #121212;
		+	font-family: 'lato-regular';
	}		}
−	div[bg=none] {	+	.container {
−	background-color: none;	+	width: 100%;
		+	height: calc(100vh - 14px)
	}		}
−	#fixedOverlay {	+	#waves {
−	position: fixed;	+	transform: rotate(180deg);
−	height: 100%;	+	background-color: #fafafc
−	width: 100%;	+
−	z-index: 3;	+
−	transition: 1s;	+
−	font-family: "montserrat-light" !important;	+
	}		}
−	#fixedOverlay[bg=none], #fixedOverlay[bg=dark] {	+
−	pointer-events: none;	+	#intro-page {
		+	background-color: #121212;
	}		}
−	#fixedOverlay[bg=none] #bubbles, #fixedOverlay[bg=dark] #bubbles {	+
−	pointer-events: none;	+	#intro-header {
		+	height: 100vh
	}		}
−	#fixedOverlay #sidebar {	+
−	width: 5vw;	+	#intro-header svg {
−	height: 100%;	+	height: 90%;
−	position: fixed;	+
−	color: #FAFAFC;	+
−	display: flex;	+
−	justify-content: center;	+
	}		}
−	#fixedOverlay #sidebar #sidebar-wrapper {	+
−	width: 40%;	+	#intro-page #intro-header {
−	height: 100%;	+	width: 100%;
		+	margin: 0 auto;
		+	position: absolute;
		+	z-index: 4;
		+	pointer-events: none
	}		}
−	#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container {	+
−	width: 30%;	+	#intro-page #intro {
−	height: 30%;	+	z-index: 4;
−	background: rgba(98, 129, 239, 0.3);	+	height: calc(100vh - 14px);
−	position: absolute;	+	width: 100%;
−	left: 50%;	+	top: 0;
−	top: 50%;	+	position: absolute;
−	transform: translate(-50%, -50%);	+	pointer-events: none
−	border-radius: 10px;	+
−	max-width: 7px;	+
−	opacity: 1;	+
−	transition: 0.5s;	+
	}		}
−	#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container[hiddenScroll=true] {	+
−	opacity: 0;	+	#text-wrapper {
		+	position: absolute;
		+	top: 50%;
		+	left: 50%;
		+	transform: translate(-50%, 20%);
		+	width: 100%;
		+	z-index: 4;
		+	pointer-events: none
	}		}
−	#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container #scrollbar {	+
−	width: 100%;	+	#desc-wrapper {
−	background: #6281EF;	+	padding-top: 30px;
−	opacity: 100%;	+	display: block;
−	height: 0%;	+	width: fit-content;
−	border-radius: 20px;	+	margin: 0 auto;
	}		}
−	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll {	+
−	position: absolute;	+	#center-desc {
−	left: 50%;	+	display: flex;
−	transform: translateX(-50%);	+	justify-content: center;
−	bottom: 10vh;	+	width: -webkit-fit-content;
	}		}
−	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {	+
−	padding-top: 10px;	+	#desc-wrapper span {
−	transform: rotate(180deg);	+	color: white;
−	writing-mode: vertical-lr;	+	font-family: "lato-regular";
−	text-transform: uppercase;	+	font-size: 3em;
−	margin: -2px;	+	text-align: right;
	}		}
−	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll img {	+
−	width: 100%;	+	.container h1 {
−	text-align: center;	+	text-transform: uppercase;
		+	font-size: 70px;
		+	font-family: "lato-heavy";
		+	text-align: center;
		+	margin: 0;
	}		}
−	#fixedOverlay nav {	+
−	box-sizing: border-box;	+	#intro-page #intro h1 {
−	z-index: 2;	+	color: #FAFAFC;
−	pointer-events: none;	+	font-size: 12em;
−	display: block;	+	font-family: 'raleway';
−	transition: 0.5s;	+	text-transform: lowercase;
−	height: 70px;	+	font-weight: 600;
	}		}
−	#fixedOverlay nav[onText=true] {	+
−	background-color: #FAFAFC;	+	#intro-page #intro #lower {
−	box-sizing: border-box;	+	color: transparent;
−	border-bottom: solid 1px rgba(0, 0, 0, 0.1);	+	stroke-color: rgba(255, 255, 255, 0.4);
−	padding-bottom: 10px;	+	transform: translate(-0.3em, -0.8em);
−	box-shadow: 0px 1px 5px #999;	+
	}		}
−	#fixedOverlay nav .header-part {	+
−	margin: 20px;	+	#bubbles-container {
		+	height: 100vh;
		+	position: absolute;
		+	width: 100%;
		+	box-sizing: border-box;
	}		}
−	#fixedOverlay nav #header {	+
−	display: flex;	+	#problem-page,
−	justify-content: space-between;	+	#links-page {
−	height: 100%;	+	background-color: #FAFAFC;
−	align-items: center;	+
	}		}
−	#fixedOverlay nav #header img {	+
−	width: 145px;	+	#problem-page #problem-header h1,
		+	#links-page #links-header h1 {
		+	color: #6281EF
	}		}
−	#fixedOverlay nav #header .active .menu-short {	+
−	transform: translateX(30%) scaleX(0);	+	#solution-page {
		+	background-color: #121212;
	}		}
−	#fixedOverlay nav #header .active #top-hamb {	+
−	transform: scale(0.7) translateY(20px) rotate(45deg);	+	#solution-page #solution-header h1 {
		+	color: #FFC43B
	}		}
−	#fixedOverlay nav #header .active #bottom-hamb {	+
−	transform: scale(0.7) translateY(-9px) rotate(-45deg);	+	.big-section {
		+	line-height: 1.7
	}		}
−	#fixedOverlay nav #header .menu-wrapper {	+
−	cursor: pointer;	+	.black-bg {
−	z-index: 11;	+	background-color: #121212;
−	box-sizing: border-box;	+
−	min-width: 30px;	+
−	pointer-events: all;	+
	}		}
−	#fixedOverlay nav #header .menu-wrapper .menu-hamb {	+
−	height: 4px;	+	.white-bg {
−	border-radius: 5px;	+	background-color: #fafafc;
−	transition: 0.5s;	+	display: flex;
−	background-color: #6281EF;	+	justify-content: center;
		+	align-items: center;
		+	flex-direction: column;
		+	padding: 20px
	}		}
−	#fixedOverlay nav #header .menu-wrapper .menu-short {	+
−	width: 70%;	+	.lightblue-bg {
−	margin-bottom: 6px;	+	background-color: #6281ef;
−	margin-top: 6px;	+	display: flex;
−	transition: 0.1s;	+	justify-content: center;
		+	align-items: center;
		+	flex-direction: column;
	}		}
−	#fixedOverlay nav #header #logo a {	+
−	pointer-events: all;	+	.brightblue-bg {
		+	background-color: #3356ce;
		+	display: flex;
		+	justify-content: center;
		+	align-items: center;
		+	flex-direction: column;
	}		}
−	#fixedOverlay #bubbles-to-close {	+
−	height: 100%;	+	.darkblue-bg {
−	width: 100%;	+	background-color: #11348f;
−	position: absolute;	+	display: flex;
−	display: none;	+	justify-content: center;
		+	align-items: center;
		+	flex-direction: column;
	}		}
−	#fixedOverlay #bubbles-to-close[open=true] {	+
−	display: initial;	+	#storytelling .section {
−	pointer-events: all;	+	display: flex;
		+	padding: 20px;
		+	max-width: calc(100% - 330px);
		+	margin: 0 auto;
		+
	}		}
−	#bubbles {	+	#storytelling .black-bg:first-of-type .section {
−	position: fixed;	+	padding-bottom: 50px;
−	height: 100%;	+	padding-top: 100px;
−	width: 100%;	+
	}		}
−	#bubbles .bubble .choices {	+
−	position: absolute;	+	#storytelling p br {
−	left: 50%;	+	display: initial;
−	top: 50%;	+
−	transform: translate(-50%, -50%);	+
−	text-transform: uppercase;	+
−	padding-left: 20px;	+
−	padding-right: 20px;	+
−	pointer-events: all;	+
	}		}
−	#bubbles .bubble .choices .menu-list {	+
−	width: fit-content;	+
−	list-style: none;	+	/*
−	font-size: 2em;	+	.textBox p {
		+	color: #fafafc;
		+	margin: 0;
	}		}
−	#bubbles .bubble .choices .menu-list h1 {	+
−	margin: 0;	+	#logoText {
−	font-size: 1.2em;	+	display: flex;
−	font-family: "montserrat-bold";	+	flex-direction: column;
		+	justify-content: space-between;
	}		}
−	#bubbles .bubble .choices .menu-list .main-choice h1 {	+
−	box-shadow: inset 0 0 0 -1px #6281EF;	+	#logoAnimation {
−	transition: 0.3s;	+	height: 300px;
−	padding: 0 5px;	+	position: sticky;
		+	top: 40vh;
	}		}
−	#bubbles .bubble .choices .menu-list .main-choice h1:hover {	+
−	box-shadow: inset 0 -0.5em 0 -1px #6281EF;	+	*/
		+	.half {
		+	width: 50%;
		+	padding: 20px;
		+	box-sizing: border-box;
	}		}
−	#bubbles .bubble .choices .menu-list .active h1 {	+
−	box-shadow: inset 0 -0.5em 0 -1px #6281EF;	+	#storytelling p.center {
		+	text-align: center !important;
	}		}
−	#bubbles .bubble .choices ol li {	+
−	counter-increment: count-me;	+	#storytelling .centered {
−	cursor: pointer;	+	display: flex;
−	padding: 10px;	+	justify-content: center;
−	width: fit-content;	+	align-items: center;
	}		}
−	#bubbles .bubble .choices ol li::before {	+
−	content: counter(count-me) ". ";	+	#storytelling #fish-icon {
−	max-width: 0px;	+	border-radius: 50px;
−	max-height: 0px;	+	text-align: center !important;
−	left: -1.3em;	+
−	position: relative;	+
−	display: flex;	+
	}		}
−	#bubbles .bubble .choices ul {	+
−	padding-inline-start: 0;	+	#storytelling p {
		+	font-family: 'montserrat-light';
		+	font-size: 1.3em;
		+	text-align: initial;
	}		}
−	#bubbles #popup-main {	+
−	background-color: #121212;	+	#storytelling p b,
−	height: 40vw;	+	#storytelling h2,
−	width: 40vw;	+	#storytelling h1 {
−	border-radius: 100%;	+	font-family: 'montserrat-bold';
−	position: absolute;	+
−	right: -80vw;	+
−	top: -80vh;	+
−	transition: 1s;	+
−	color: #FAFAFC;	+
−	z-index: 2;	+
−	-webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);	+
−	-moz-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);	+
−	box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);	+
	}		}
−	#bubbles #popup-main .menu-list {	+
−	font-size: 1.8em;	+	#storytelling h2,
		+	#storytelling h1 {
		+	text-align: center;
	}		}
−	#bubbles #popup-main .menu-list li::before {	+
−	-webkit-text-fill-color: #121212;	+	.black {
−	-webkit-text-stroke-width: 1px;	+	color: #121212;
−	-webkit-text-stroke-color: #FAFAFC;	+
−	line-height: 0.6em;	+
−	font-size: 2em;	+
	}		}
−	#bubbles #popup-main .menu-list .active::before {	+
−	-webkit-text-fill-color: #FAFAFC;	+	.white {
		+	color: #fafafc;
	}		}
−	#bubbles #popup-next {	+
−	background-color: #6281EF;	+
−	height: 70vw;	+	#storytelling #secondpart {
−	width: 70vw;	+	height: fit-content;
−	border-radius: 100%;	+	display: flex;
−	position: absolute;	+	flex-direction: column;
−	left: -90vw;	+	text-align: center !important;
−	bottom: -200vh;	+
−	transition: 1s;	+
−	color: #FAFAFC;	+
−	display: table;	+
−	overflow: hidden;	+
−	z-index: 3;	+
−	transform: translate(-50%, 50%);	+
	}		}
−	#bubbles #popup-next .project {	+
−	columns: 2;	+	#secondpart .icon {
−	-webkit-columns: 2;	+	max-width: 500px;
−	-moz-columns: 2;	+	width: 60%
−	column-gap: 0;	+
	}		}
−	#bubbles #popup-next .project li {	+
−	padding-left: 0;	+	.wdt-60 {
−	padding-right: 0;	+	max-width: 400px;
−	font-family: "montserrat-bold";	+	width: 60%;
	}		}
−	#bubbles #popup-next .choices {	+
−	vertical-align: middle;	+	.wd-60 {
−	display: table-cell;	+	max-width: 700px;
		+	width: 60%;
	}		}
−	#bubbles #popup-next .choices .menu-list {	+
−	font-size: 2em;	+	.wd-50 {
−	list-style: none;	+	max-width: 500px;
−	margin: 0 auto;	+	width: 50%;
−	padding-right: 10px;	+
−	padding-left: 10px;	+
−	text-align: -webkit-center;	+
	}		}
−	#bubbles #popup-next .choices .menu-list li {	+
−	width: fit-content;	+	.wdt-80 {
−	margin-bottom: 15px;	+	width: 80%;
−	font-family: "montserrat-bold";	+	margin: 0 auto;
	}		}
−	#bubbles #popup-next .choices .menu-list li a {	+
−	box-shadow: inset 0 0 0 -1px #3356CE;	+	.icon {
−	transition: 0.3s;	+	padding: 20px;
−	padding: 0 5px;	+	box-sizing: border-box;
		+	height: 300px;
		+	width: 300px;
		+	border-radius: 50px;
		+	margin: 0 auto;
		+	max-width: 100%;
	}		}
−	#bubbles #popup-next .choices .menu-list li a:hover {	+
−	box-shadow: inset 0 -0.5em 0 -1px #3356CE;	+	.icon.white {
		+	background-color: #fafafc;
		+	color: #121212;
	}		}
−	#bubbles #popup-next .choices .menu-list a {	+
−	color: #FAFAFC;	+	.icon.dark {
−	text-decoration: none;	+	background-color: rgba(255, 255, 255, 0.1);
−	white-space: nowrap;	+	color: #fafafc;
	}		}
−	#bubbles #bub_first .active {	+
−	right: -7vw;	+	h1 {
−	top: -3vh;	+	color: #fafafc;
	}		}
−	#bubbles #bub_second .active {	+
−	left: 50vw;	+	#thirdpart,
−	bottom: 50vh;	+	#fourthpart,
		+	#seventhpart {
		+	width: 80%;
		+	margin: 0 auto;
	}		}
−	#intro-page {	+	#storytelling #fifthpart {
−	background-color: #121212;	+	text-align: center !important;
−	width: 100%;	+
−	height: 100vh;	+
	}		}
−	#intro-page #intro-header {	+
−	padding-top: 10vh;	+	#fifthpart .list {
−	width: 120%;	+	width: 80%;
−	margin: 0 auto;	+	margin: 0 auto
	}		}
−	#intro-page #intro-header img {	+
−	width: 100%;	+	#fifthpart .list .list-item {
−	position: relative;	+	height: 60px;
−	left: 50%;	+	padding: 10px;
−	margin-left: -70vw;	+	display: flex;
		+	align-items: center;
	}		}
−	#intro-page #intro {	+
−	z-index: 1;	+	#fifthpart .list .list-item div {
−	background-color: transparent;	+	width: 60px;
−	height: 70vh;	+	height: 60px;
−	width: 70vh;	+	background-color: rgba(255, 255, 255, 0.1);
−	position: absolute;	+	border-radius: 40px;
−	left: 50%;	+
−	top: 50%;	+
−	transform: translate(-50%, -50%);	+
−	border-radius: 100%;	+
	}		}
−	#intro-page #intro #title-wrapper {	+
−	position: absolute;	+	#fifthpart .list .list-item p {
−	left: 50%;	+	width: calc(100% - 60px);
−	top: 50%;	+	float: right;
−	transform: translate(-50%, -50%);	+	margin: 0;
		+	padding: 5px;
		+	color: #fafafc;
	}		}
−	#intro-page #intro h1 {	+
−	text-transform: uppercase;	+	#sixthpart {
−	color: #FAFAFC;	+	flex-direction: column;
−	font-size: 70px;	+
−	font-family: "montserrat-bold";	+
−	text-align: center;	+
−	margin: 0;	+
	}		}
−	#problem-page {	+	.milkWave {
−	background-color: #FAFAFC;	+	z-index: 2;
−	width: 100%;	+	width: 100%;
−	height: 100vh;	+	top: 0;
		+	position: absolute;
		+	content: "";
		+	pointer-events: none;
		+	background-position: bottom;
		+	background-origin: border-box;
		+	background-size: 100%;
		+	background-repeat: no-repeat;
		+	background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);
	}		}
−	@media only screen and (min-width: 768px) and (max-width: 1023px) {	+	.yellow {
−	#bubbles #popup-main {	+	color: #fcbd1b;
−	background-color: #121212;	+	}
−	height: 60vh;	+
−	width: 60vh;	+
−	right: -100vw;	+
−	top: -100vh;	+
−	}	+
−	#bubbles #popup-main .menu-list {	+
−	font-size: 18px;	+
−	}	+
−	#bubbles #popup-main .menu-list h1 {	+
−	font-size: 1.2em;	+
−	}	+
−	#bubbles #popup-main .menu-list li::before {	+
−	line-height: 22px;	+
−	}	+
−	#bubbles #popup-next {	+
−	height: 100vw;	+
−	width: 100vw;	+
−	}	+
−	#bubbles #popup-next .menu-list {	+
−	font-size: 1.5em;	+
−	}	+
−	#bubbles #popup-next .menu-list li {	+
−	padding: 5px;	+
−	}	+
−	#bubbles #popup-next .project {	+
−	columns: 2;	+
−	-webkit-columns: 2;	+
−	-moz-columns: 2;	+
−	column-gap: 0;	+
−	}	+
−	#bubbles #popup-next .project li {	+
−	padding-left: 0;	+
−	padding-right: 0;	+
−	margin-bottom: 3px;	+
−	}	+
−	#bubbles #bub_first .active {	+
−	right: -7vw;	+
−	top: -4vh;	+
−	}	+
−	#bubbles #bub_second .active {	+
−	left: 40vw;	+
−	bottom: 40vh;	+
−	}	+
−	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {	+	#storytelling #bact {
−	font-size: 0.65em;	+	flex-direction: column;
−	}	+	text-align: center !important;
−	#fixedOverlay nav #header h1 {	+
−	font-size: 18px;	+
−	}	+
−	#fixedOverlay nav #header .active #top-hamb {	+
−	transform: scale(0.7) translateY(15px) rotate(45deg);	+
−	}	+
−	#fixedOverlay nav #header .active #bottom-hamb {	+
−	transform: scale(0.7) translateY(-8px) rotate(-45deg);	+
−	}	+
−	#fixedOverlay nav #header .menu-wrapper .menu-hamb {	+
−	height: 3px;	+
−	}	+
−	#fixedOverlay nav #header .menu-wrapper .menu-short {	+
−	margin-bottom: 5px;	+
−	margin-top: 5px;	+
−	}	+
	}		}
−	@media only screen and (max-width: 767px) {
−	#bubbles #popup-main {
−	background-color: #121212;
−	height: 60vh;
−	width: 60vh;
−	right: -100vw;
−	top: -100vh;
−	}
−	#bubbles #popup-main .menu-list {
−	font-size: 18px;
−	}
−	#bubbles #popup-main .menu-list h1 {
−	font-size: 1.3em;
−	}
−	#bubbles #popup-next {
−	height: 100vw;
−	width: 100vw;
−	}
−	#bubbles #popup-next .choices .menu-list {
−	font-size: 1.45em;
−	}
−	#bubbles #popup-next .choices .menu-list li {
−	margin-bottom: 3px;
−	}
−	#bubbles #popup-next .choices li {
−	padding: 5px;
−	}
−	#bubbles #popup-next .project {
−	column-gap: 0;
−	}
−	#bubbles #popup-next .project li {
−	padding-left: 0;
−	padding-right: 0;
−	margin-bottom: 3px;
−	}
−	#bubbles #bub_first .active {
−	right: -22vw;
−	top: -6vh;
−	}
−	#bubbles #bub_second .active {
−	left: 50vw;
−	bottom: 25vh;
−	}
−	#fixedOverlay nav .header-part {	+	#bact .row {
−	margin: 5px 30px;	+	display: inherit;
−	}	+
−	#fixedOverlay nav #header h1 {	+	}
−	font-size: 18px;	+
−	}	+	.white-bg .wdt-60 {
−	#fixedOverlay nav #header .active #top-hamb {	+	text-align: center;
−	transform: scale(0.7) translateY(15px) rotate(45deg);	+	}
−	}	+
−	#fixedOverlay nav #header .active #bottom-hamb {	+	#storytelling #fish-symptoms {
−	transform: scale(0.7) translateY(-8px) rotate(-45deg);	+	align-items: inherit !important;
−	}	+	}
−	#fixedOverlay nav #header .menu-wrapper .menu-hamb {	+
−	height: 3px;	+	#fish-symptoms .icon {
−	}	+	margin: 0 auto
−	#fixedOverlay nav #header .menu-wrapper .menu-short {	+	}
−	margin-bottom: 5px;	+
−	margin-top: 5px;	+	#fish-symptoms p {
−	}	+	margin-top: 50px
−	#fixedOverlay #sidebar {	+	}
−	width: 10vw;	+
−	}	+	#fish-symptoms p:first-child {
−	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {	+	margin-top: 0px
−	font-size: 0.65em;	+	}
−	}	+
		+	.title {
		+	text-transform: uppercase
		+	}
		+
		+	#links .nf {
		+	display: inherit
		+	}
		+
		+	#links .title {
		+	font-size: 2.5em;
		+	}
		+
		+	#links .row {
		+	display: flex;
		+	justify-content: center;
		+	}
		+
		+	#links .row .icon {
		+	width: 200px;
		+	height: 200px;
		+	margin: 20px
		+	}
		+
		+	@media (max-width:768px) {
		+	#intro-page #intro h1 {
		+	font-size: 4.5em;
		+	}
		+
		+	#intro-page #intro #title::after {
		+	font-size: 4em;
		+	transform: translate(-53%, -130%);
		+	}
		+
		+	.content-header {
		+	padding-top: 50px
		+	}
		+
		+	.content-index h1 {
		+	font-size: 3.3em;
		+	}
		+
		+	.half {
		+	width: 100%;
		+	}
		+
		+	.two-parts {
		+	flex-direction: column;
		+	}
		+
		+	#fifthpart .list {
		+	width: 80%
		+	}
		+
		+	#links .row .icon {
		+	width: 100px;
		+	height: 100px;
		+	margin: 5px;
		+	padding: 10px;
		+	}
		+
		+	#storytelling p,
		+	#storytelling h1,
		+	#storytelling h2,
		+	#storytelling h3 {
		+	text-align: center !important;
		+	}
		+
		+	#storytelling p {
		+	font-size: 0.8em
		+	}
		+
		+	.wd-50,
		+	.wdt-60 {
		+	width: 80%
		+	}
		+	#storytelling .section {
		+	max-width: calc(100% - 50px);
	}		}
−	@media only screen and (max-width: 420px) and (max-height: 600px) {
−	#bubbles #popup-main .menu-list libefore {
−	font-size: 1.8em;
−	line-height: 0.5em;
−	}
−	#bubbles #popup-main .menu-list h1 {
−	font-size: 1em;
−	}
−	#bubbles #popup-next .choices .menu-list {
−	font-size: 1.2em;
−	}
	}		}

---

Revision as of 12:44, 4 October 2020

body, html { margin: 0; padding: 0; color: #121212; font-family: 'lato-regular'; }

.container { width: 100%; height: calc(100vh - 14px) }

1. waves {

transform: rotate(180deg); background-color: #fafafc }

1. intro-page {

background-color: #121212; }

1. intro-header {

height: 100vh }

1. intro-header svg {

height: 90%; }

1. intro-page #intro-header {

width: 100%; margin: 0 auto; position: absolute; z-index: 4; pointer-events: none }

1. intro-page #intro {

z-index: 4; height: calc(100vh - 14px); width: 100%; top: 0; position: absolute; pointer-events: none }

1. text-wrapper {

position: absolute; top: 50%; left: 50%; transform: translate(-50%, 20%); width: 100%; z-index: 4; pointer-events: none }

1. desc-wrapper {

padding-top: 30px; display: block; width: fit-content; margin: 0 auto; }

1. center-desc {

display: flex; justify-content: center; width: -webkit-fit-content; }

1. desc-wrapper span {

color: white; font-family: "lato-regular"; font-size: 3em; text-align: right; }

.container h1 { text-transform: uppercase; font-size: 70px; font-family: "lato-heavy"; text-align: center; margin: 0; }

1. intro-page #intro h1 {

color: #FAFAFC; font-size: 12em; font-family: 'raleway'; text-transform: lowercase; font-weight: 600; }

1. intro-page #intro #lower {

color: transparent; stroke-color: rgba(255, 255, 255, 0.4); transform: translate(-0.3em, -0.8em); }

1. bubbles-container {

height: 100vh; position: absolute; width: 100%; box-sizing: border-box; }

1. problem-page,
2. links-page {

background-color: #FAFAFC; }

1. problem-page #problem-header h1,
2. links-page #links-header h1 {

color: #6281EF }

1. solution-page {

background-color: #121212; }

1. solution-page #solution-header h1 {

color: #FFC43B }

.big-section { line-height: 1.7 }

.black-bg { background-color: #121212;

}

.white-bg { background-color: #fafafc; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 20px }

.lightblue-bg { background-color: #6281ef; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.brightblue-bg { background-color: #3356ce; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.darkblue-bg { background-color: #11348f; display: flex; justify-content: center; align-items: center; flex-direction: column; }

1. storytelling .section {

display: flex; padding: 20px; max-width: calc(100% - 330px);

   margin: 0 auto;

}

1. storytelling .black-bg:first-of-type .section {

padding-bottom: 50px; padding-top: 100px; }

1. storytelling p br {

display: initial; }

/* .textBox p { color: #fafafc; margin: 0; }

1. logoText {

display: flex; flex-direction: column; justify-content: space-between; }

1. logoAnimation {

height: 300px; position: sticky; top: 40vh; }

• /

.half { width: 50%; padding: 20px; box-sizing: border-box; }

1. storytelling p.center {

text-align: center !important; }

1. storytelling .centered {

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

1. storytelling #fish-icon {

border-radius: 50px; text-align: center !important; }

1. storytelling p {

font-family: 'montserrat-light'; font-size: 1.3em; text-align: initial; }

1. storytelling p b,
2. storytelling h2,
3. storytelling h1 {

font-family: 'montserrat-bold'; }

1. storytelling h2,
2. storytelling h1 {

text-align: center; }

.black { color: #121212;

}

.white { color: #fafafc; }

1. storytelling #secondpart {

height: fit-content; display: flex; flex-direction: column; text-align: center !important; }

1. secondpart .icon {

max-width: 500px; width: 60% }

.wdt-60 { max-width: 400px; width: 60%; }

.wd-60 { max-width: 700px; width: 60%; }

.wd-50 { max-width: 500px; width: 50%; }

.wdt-80 { width: 80%; margin: 0 auto; }

.icon { padding: 20px; box-sizing: border-box; height: 300px; width: 300px; border-radius: 50px; margin: 0 auto; max-width: 100%; }

.icon.white { background-color: #fafafc; color: #121212; }

.icon.dark { background-color: rgba(255, 255, 255, 0.1); color: #fafafc; }

h1 { color: #fafafc; }

1. thirdpart,
2. fourthpart,
3. seventhpart {

width: 80%; margin: 0 auto; }

1. storytelling #fifthpart {

text-align: center !important; }

1. fifthpart .list {

width: 80%; margin: 0 auto }

1. fifthpart .list .list-item {

height: 60px; padding: 10px; display: flex; align-items: center; }

1. fifthpart .list .list-item div {

width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.1); border-radius: 40px; }

1. fifthpart .list .list-item p {

width: calc(100% - 60px); float: right; margin: 0; padding: 5px; color: #fafafc; }

1. sixthpart {

flex-direction: column; }

.milkWave { z-index: 2; width: 100%; top: 0; position: absolute; content: ""; pointer-events: none; background-position: bottom; background-origin: border-box; background-size: 100%; background-repeat: no-repeat; background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg); }

.yellow { color: #fcbd1b; }

1. storytelling #bact {

flex-direction: column; text-align: center !important; }

1. bact .row {

display: inherit;

}

.white-bg .wdt-60 { text-align: center; }

1. storytelling #fish-symptoms {

align-items: inherit !important; }

1. fish-symptoms .icon {

margin: 0 auto }

1. fish-symptoms p {

margin-top: 50px }

1. fish-symptoms p:first-child {

margin-top: 0px }

.title { text-transform: uppercase }

1. links .nf {

display: inherit }

1. links .title {

font-size: 2.5em; }

1. links .row {

display: flex; justify-content: center; }

1. links .row .icon {

width: 200px; height: 200px; margin: 20px }

@media (max-width:768px) { #intro-page #intro h1 { font-size: 4.5em; }

#intro-page #intro #title::after { font-size: 4em; transform: translate(-53%, -130%); }

.content-header { padding-top: 50px }

.content-index h1 { font-size: 3.3em; }

.half { width: 100%; }

.two-parts { flex-direction: column; }

#fifthpart .list { width: 80% }

#links .row .icon { width: 100px; height: 100px; margin: 5px; padding: 10px; }

#storytelling p,

      #storytelling h1,
      #storytelling h2,
      #storytelling h3 {

text-align: center !important; }

#storytelling p { font-size: 0.8em }

.wd-50, .wdt-60 { width: 80% }

       #storytelling .section {

max-width: calc(100% - 50px); } }