._unselectable, .contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .nextButton, .calendarbutton {
-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.contentBlock {
max-width: 600px;
} @media (max-width: 800px) {
.contentBlock { margin-right: 0; }
} .contentBlock .content {
display: flex; flex-direction: column; align-items: stretch;
} @media (max-width: 800px) {
.contentBlock .content { margin: unset; }
} .contentBlock .content .heading {
font-size: 1.5rem; font-family: "montserrat-bold"; text-transform: uppercase; text-align: center;
} .contentBlock .content .downloadButton {
align-self: center; color: #FAFAFC; background-color: #6281EF; font-family: "lato-heavy"; font-size: 1.3rem; text-transform: uppercase; padding: 8px 52px; border-radius: 10px; margin: 16px 0 32px; box-shadow: 0 16px 32px -12px #6584ef; transition: box-shadow 0.3s, transform 0.3s; cursor: pointer;
} .contentBlock .content .downloadButton:hover {
transform: translateY(-2px); box-shadow: 0 18px 40px -14px #6584ef;
} .contentBlock .content .sectionButtons {
display: flex; justify-content: stretch; align-items: center; margin: 20px -40px;
} @media (max-width: 800px) {
.contentBlock .content .sectionButtons { margin: 20px -30px; }
} .contentBlock .content .sectionButtons div {
padding: 16px; font-size: 1.4rem; box-shadow: 0 0 20px lightgray; flex-grow: 1; text-align: center; cursor: pointer; font-family: "montserrat-bold"; background-color: #FAFAFC; transition: color 0.5s, background-color 0.5s;
} @media (max-width: 1024px) {
.contentBlock .content .sectionButtons div { font-size: 1.1rem; }
} @media (max-width: 800px) {
.contentBlock .content .sectionButtons div { font-size: 0.9rem; }
} .contentBlock .content .sectionButtons div.active {
color: #FAFAFC; background-color: #6281EF;
} .contentBlock .content .weekName {
font-family: "montserrat-bold"; font-size: 1.4rem; margin: 10px 0;
} .contentBlock .content .weekName::after {
content: ""; display: block; margin: 12px 0; height: 3px; width: 300px; background-color: #6281EF;
} .contentBlock .content .nextButton {
margin-top: 32px; cursor: pointer; align-self: flex-end; display: flex; flex-direction: row; align-items: center; font-family: "montserrat-bold";
} .contentBlock .content .nextButton::after {
content: ""; display: block; background-image: url(https://static.igem.org/mediawiki/2020/7/7a/T--Vilnius-Lithuania--arrowNext2.svg); background-repeat: no-repeat; background-position: center; background-size: 91%; width: 64px; height: 40px; margin-top: 3px; margin-left: 8px;
} .contentBlock::after {
display: none; content: unset;
}
@media (max-width: 800px) {
main { padding-bottom: 300px; justify-content: center; }
}
.sideBlock {
background-color: #222222; color: #FAFAFC; padding: 24px; box-sizing: border-box; margin: 374px 60px 0 50px; text-transform: unset; display: flex; flex-direction: column; align-items: stretch; min-width: 321px;
} @media (max-width: 1024px) {
.sideBlock { margin: 374px 40px 0 50px; }
} @media (max-width: 800px) {
.sideBlock { position: fixed; bottom: 0; padding: 24px 24px 60px; border-radius: 0; float: unset; margin: 0; z-index: 20; width: 100%; text-align: center; transition: transform 0.5s; top: unset; transform: translateY(100%); } .sideBlock.open { transform: translateY(0); }
} .sideBlock .title {
font-family: "montserrat-bold"; font-size: 1.3rem;
} .sideBlock .title::after {
content: ""; display: block; margin: 6px 0; height: 2px; width: 100px; background-color: #6281EF;
} @media (max-width: 800px) {
.sideBlock .title { display: flex; flex-direction: column; align-items: center; } .sideBlock .title::after { margin: 6px 0 16px; width: 200px; }
} .sideBlock .months {
font-family: "lato-heavy"; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; margin-bottom: 10px; justify-items: center;
} .sideBlock .months span {
width: 39px; padding: 4px; box-sizing: border-box; text-align: center; cursor: pointer;
} .sideBlock .months span::after {
content: ""; display: block; height: 2px; width: 28px; margin: 2px auto 0; background-color: transparent; transition: background-color 0.5s;
} .sideBlock .months span.active::after, .sideBlock .months span:hover::after {
background-color: #6281EF;
} .sideBlock .days {
justify-items: stretch; align-items: stretch; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr);
} .sideBlock .days span {
cursor: pointer; text-align: center; height: 22px;
} .sideBlock .days span.dark {
color: #BBBBBB;
} .sideBlock .days .hover {
margin-top: calc(-3px + 22px * 0); margin-left: -2px; padding: 2px; width: calc(100% - 48px); height: 22px; background-color: #6281EF; mix-blend-mode: lighten; border-radius: 20px; position: absolute; transition: margin-top 0.3s, visibility 0.3s;
} .sideBlock .days .hover.invisible {
visibility: hidden;
}
.calendarbutton {
font-family: "montserrat-bold"; display: none; position: fixed; bottom: -100px; color: #FAFAFC; text-transform: uppercase; text-align: center; font-size: 1.3rem; width: 100%; box-sizing: border-box; padding: 16px; cursor: pointer; background-color: #222222; max-height: 60px; transition: 0.5s;
} .calendarbutton[onText=true] {
bottom: 0px;
} .calendarbutton.open {
bottom: 0px;
} @media (max-width: 800px) {
.calendarbutton { display: block; z-index: 21; bottom: 0px; }
}