Template:Vilnius-Lithuania/index.css
body, html { margin: 0; padding: 0; color: #121212; font-family: 'lato-regular'; }
.container { width: 100%; height: calc(100vh - 14px) }
- waves {
transform: rotate(180deg); background-color: #fafafc }
- intro-page {
background-color: #121212; }
- intro-header {
height: 100vh }
- intro-header svg {
height: 90%; }
- intro-page #intro-header {
width: 100%; margin: 0 auto; position: absolute; z-index: 4; pointer-events: none }
- intro-page #intro {
z-index: 4; height: calc(100vh - 14px); width: 100%; top: 0; position: absolute; pointer-events: none }
- text-wrapper {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, 20%); width: 100%; z-index: 4; pointer-events: none }
- desc-wrapper {
padding-top: 30px; display: block; width: fit-content; margin: 0 auto; }
- center-desc {
display: flex; justify-content: center; width: -webkit-fit-content; }
- 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; }
- intro-page #intro h1 {
color: #FAFAFC; font-size: 12em; font-family: 'raleway'; text-transform: lowercase; font-weight: 600; }
- intro-page #intro #lower {
color: transparent; stroke-color: rgba(255, 255, 255, 0.4); transform: translate(-0.3em, -0.8em); }
- bubbles-container {
height: 100vh; position: absolute; width: 100%; box-sizing: border-box; }
- problem-page,
- links-page {
background-color: #FAFAFC; }
- problem-page #problem-header h1,
- links-page #links-header h1 {
color: #6281EF }
- solution-page {
background-color: #121212; }
- 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; }
- storytelling .section {
display: flex; padding: 20px; max-width: calc(100% - 330px); margin: 0 auto;
}
- storytelling .black-bg:first-of-type .section {
padding-bottom: 50px; padding-top: 100px; }
- storytelling p br {
display: initial; }
.half { width: 50%; padding: 20px; box-sizing: border-box; }
- storytelling p.center {
text-align: center !important; }
- storytelling .centered {
display: flex; justify-content: center; align-items: center; }
- storytelling #fish-icon {
border-radius: 50px; text-align: center !important; }
- storytelling p {
font-family: 'montserrat-light'; font-size: 1.3em; text-align: initial; }
- storytelling p b,
- storytelling h2,
- storytelling h1 {
font-family: 'montserrat-bold'; }
- storytelling h2,
- storytelling h1 {
text-align: center; }
.black { color: #121212;
}
.white { color: #fafafc; }
- storytelling #secondpart {
height: fit-content; display: flex; flex-direction: column; text-align: center !important; }
- 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; }
- thirdpart,
- fourthpart,
- seventhpart {
width: 80%; margin: 0 auto; }
- storytelling #fifthpart {
text-align: center !important; }
- fifthpart .list {
width: 80%; margin: 0 auto }
- fifthpart .list .list-item {
height: 60px; padding: 10px; display: flex; align-items: center; }
- fifthpart .list .list-item div {
width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.1); border-radius: 40px; }
- fifthpart .list .list-item p {
width: calc(100% - 60px); float: right; margin: 0; padding: 5px; color: #fafafc; }
- sixthpart {
flex-direction: column; }
.milkWave { z-index: 2; width: 100%; top: 0px; position: relative; 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); height: 150px }
.milkWave.rotate-wave { transform: rotate(180deg) }
.milkWave svg { height: 150px; }
.yellow { color: #fcbd1b; }
- storytelling #bact {
flex-direction: column; text-align: center !important; }
- storytelling #bact .half {
display: flex; flex-direction: column; align-items: center; }
- bact .row {
display: inherit;
}
.white-bg .wdt-60 { text-align: center; }
- storytelling #fish-symptoms {
align-items: inherit !important; }
- fish-symptoms .icon {
margin: 0 auto }
- fish-symptoms p {
margin-top: 50px }
- fish-symptoms p:first-child {
margin-top: 0px }
.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 }
.half p { width: 70% }
@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%; }
.half p { width: initial }
.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); } }