Template:Vilnius-Lithuania/CSS/Team

body, html {

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

}

.introContainer {

 flex-direction: column-reverse;
 justify-content: space-between;

} .introContainer .heading {

 position: absolute;
 text-align: end;
 top: 10vh;
 pointer-events: none;

} .introContainer .heading.other {

 top: 12vh;

} .introContainer::before {

 content: unset;
 display: none;
 background-image: unset;

} .introContainer span {

 position: absolute;
 color: #FAFAFC;
 top: 7vw;
 width: 60vw;
 height: 60vw;
 background-attachment: unset;
 overflow: hidden;
 font-weight: bold;

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

 .introContainer span {
   top: 7vh;
   width: 60vh;
   height: 60vh;
 }

} .introContainer span.novideo video {

 display: none;

} .introContainer span video {

 width: 100%;
 height: 100%;
 object-fit: cover;

} .introContainer button.introVideoPlay {

 position: absolute;
 top: 52vw;
 left: 20vw;
 width: 64px;
 height: 64px;
 border: unset;
 display: none;
 background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg");
 background-size: 50% 50%;
 background-repeat: no-repeat;
 background-position: 58% 50%;
 cursor: pointer;
 padding: 0;
 border-radius: 1000px;
 background-color: #6281EF;

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

 .introContainer button.introVideoPlay {
   top: 52vh;
   left: calc(50vw - 30vh);
 }

} .introContainer button.introVideoPlay.novideo {

 display: block;

} .introContainer .memberDiv {

 position: absolute;
 left: 62vw;
 top: 38vh;
 color: #FAFAFC;

} .introContainer .memberDiv div {

 margin: 8px 0;

} .introContainer .memberDiv #memberName {

 font-family: "lato-heavy";
 font-size: 4vh;
 text-transform: uppercase;

} .introContainer .memberDiv #memberRole {

 font-size: 3vh;
 text-transform: uppercase;

} .introContainer .memberDiv #memberFunFact {

 font-size: 2.5vh;
 font-weight: normal;

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

 .introContainer .memberDiv {
   left: 5vw;
 }

} .introContainer .bubbleList {

 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 box-sizing: border-box;

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

 .introContainer .bubbleList {
   padding: 16px;
 }

} .introContainer .bubbleList span {

 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background-color: #6281EF;
 border-radius: 10vw;
 position: static;
 width: 7vh;
 height: 7vh;
 margin: 12px;
 transform: scale(1);
 transition: transform 0.3s;

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

 .introContainer .bubbleList span {
   width: 9vh;
   height: 9vh;
 }

} .introContainer .bubbleList span:hover {

 transform: scale(1.2);

}

main {

 margin-top: 0;
 padding-top: 50px;

}