/* Global Rules */

:root {
    --main-font: Arial;
    --footer-nav-bg-color: #00203D;
    --footer-cred-bg-color: #FFFFFF;
    --footer-text-color: #FFFFFC;
    --footer-divider: #db34a1;
    --background-main-color: #00203D;
    --background-second-color: #3A7A99;
    --text-main-color: #E4E8EB;
}

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

body {
    background: var(--background-main-color);
    color: var(--text-main-color);
    font-family: var(--main-font), sans-serif;
    height: 60%;
    font-size: 2.5vh;
    overflow-x: hidden;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://static.igem.wiki/teams/4334/wiki/quicksand.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Loader */
#loading-screen {
    height: 100%;
    width: 100%;
    background: #3A7A99;
    z-index: 200;
    position: fixed;
    transition: all 1.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

#loading-ribbon {
    height: 50%;
}

@keyframes ribbon-scroll {
    from {
        stroke-dashoffset: 0
    }
    to {
        stroke-dashoffset: -5268
    }
}

#loading-ribbon path {
    stroke-dasharray: 2634 2634;
    animation: ribbon-scroll 3s ease infinite;
}

/* Ribbon and Path */
.ribbon-center {
    fill: none;
    stroke: #db34a1;
    stroke-miterlimit: 10;
    stroke-width: 30px;
}

.ribbon-edge {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 36px;
}

.ribbon-paths svg {
    position: fixed;
    width: 100%;
    left: 0;
    z-index: -1;
    pointer-events: none;
}

/* General Page */
header {
    height: 100vh;
    display: flex;
    align-items: center;
}

.maintitlebox {
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 70%;
    overflow: hidden;
}

@keyframes voxtext {
    from {
        top: 110%;
        transform: translateY(0);
        opacity: 0;
    }
    to {
        top: 95%;
        transform: translateY(-100%);
        opacity: 100%
    }
}

.maintitletext {
    text-align: center;
    color: #FFCF5C;
    margin: 0;
    font-size: 10vw;
    position: relative;
    font-family: Arial-Black, "Arial Black", sans-serif;
    top: 110%;
    line-height: 80%;
}

.title-ribbon {
    width: 100%;
    position: relative;
}

.content-grid {
    width: 86%;
    margin-right: 7%;
    margin-left: 7%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.grid-content {
    /*height: 100vh;*/
    padding: 4vh 4vw;
    border-radius: 2vw;
}

.mid-short{
    grid-column: span 2;
    width: 65vw;
    margin: 0 auto;
}

.left-short {
    grid-column: span 2;
    width: 65vw;
    margin: 0 auto 0 0;
}

.right-short {
    grid-column: span 2;
    width: 65vw;
    margin: 0 0 0 auto;
}

.mid-full {
    grid-column: span 2;
}

.grid-content:nth-child(2n+1) {
    background: #5FC2B3;
    color: #E4E8EB;
}

.grid-content:nth-child(2n) {
    background: #3A7A99;
    color: #E4E8EB;
}

.smaller, .smaller li {
    font-size: 1.5vh;
}

.grid-gap {
    display: flex;
    justify-content: space-around;
    padding: 4vh 4vw;
    flex-direction: column;
    align-content: space-between;
    align-items: center;
}

.no-shadow img {
    filter: none !important;
}

.grid-gap img {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(8px 12px 0 #3A7A99);
    margin: 1vh;
}

.grid-content ol li {
    margin-bottom: 1vh;
}

/* Sticky content boxes */
.content-container {
    position: absolute; /* Makes timing the sticky boxes possible */
}

aside {
    height: 120vh; /* !Default Dont change here! Controls how long a box stays */
    width: 65vw; /* !Default Dont change here! Controls how wide boxes are */
    position: relative;
    display: flex;
    flex-direction: column;
}

.stickyWrapper {
    flex-grow: 1;
}

.sticky {
    position: sticky;
    top: 20%; /* !Default Dont change here! Controls distance from the top of the position box will stick */
}

.stickyItem {
    max-height: 60vh;
    background: #3A7A99; /* !Default Dont change here! Box background color */
    color: #E4E8EB; /* !Default Dont change here! Text color */
    display: flex;
    align-items: center;
    padding: 15px; /* !Default Dont change here! Distance from edges of box content will be at? */
    font-size: 2vh; /* Font-size, duh */
    line-height: max(calc(1.5vw + 3px), 100%);
}

/* Home Page */
.lotustitlebox {
    position: absolute;
    top: 5%;
    right: 50%;
    transform: translate3d(50%, 50%, 0);
    width: 100%;
    height: 18%;
    overflow: hidden;
}

.lotustitle {
    text-align: center;
    color: rgb(219, 52, 161);
    margin: 0;
    font-size: 16vh;
    position: relative;
    font-family: Arial-Black, "Arial Black", serif;
    transform: translateY(0);
    top: 110%;
    animation: 1.5s voxtext calc(var(--global-delay) + 0.5s) ease forwards;
}

.frettitlebox {
    position: absolute;
    top: 8%;
    right: 50%;
    transform: translate3d(50%, 50%, 0);
    width: 100%;
    height: 18%;
    overflow: hidden;
}

.frettitle {
    text-align: center;
    color: rgb(219, 52, 161);
    margin: 0;
    font-size: 6vh;
    position: relative;
    font-family: Arial-Black, "Arial Black", serif;
    transform: translateY(0);
    top: 110%;
    animation: 1.5s voxtext calc(var(--global-delay) + 0.5s) ease forwards;
}

#landing {
    position: absolute;
    top: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    background: linear-gradient(180deg, var(--background-second-color) 0%, var(--background-main-color) 100%);
}

/* Footer */
.footer {
    height: auto;
    position: relative;
    bottom: -100%;
    z-index: -1;
    transform: translateY(-100%);
}

.footer-ribbon {
    height: 20px;
    width: 100%;
    background-color: var(--footer-divider);
    border-top: solid 2px #E4E8EB;
    border-bottom: solid 2px #E4E8EB;
}

.footer-credits {
    padding: 5vh 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-content: center;
    text-align: center;
    background-color: var(--footer-cred-bg-color);
    overflow: hidden;
}

.credits {
    min-width: 90%;
    display: grid;
    grid-template: 1fr / 2fr 1fr 2fr 3fr 1fr 2fr 1fr;
    height: 100%;
}

.credits img {
    align-self: center;
    justify-self: center;
    width: 85%;
}

.footer h3 {
    width: 100%;
}

.footer-license {
    font-size: 1.3vw;
    background-color: var(--footer-nav-bg-color);
    padding: 15px 10%;
}

.footer-license a {
    color: #E4E8EB !important;
}