:root {
    --primary-color: #50a14fff;
    --primary-color-faded: #70c877ff;
    --secondary-color: #603912ff;
    --primary-color-gradient: #99f78460;
    --tertiary-color: #3bb83eff;
    /*--primary-color-gradient: ##3771c860;*/
    --secondary-color-gradient: #a3754820;
    /*--secondary-color-gradient: ##8d5fd320;*/
    --gradient-end: #00000000;
    --background-opacity: 0.5;
    --small-font-size: clamp(1rem, 0.3vw + 1rem,5rem);
    --default-font-size: clamp(1rem, 0.5vw + 1rem,5rem);
    --large-font-size: clamp(2rem, 0.8vw + 1rem,5rem);
    --huge-font-size: clamp(2.5rem, 1.2vw + 1rem,5rem);
    --giant-font-size: clamp(3rem, 1.5vw + 1rem,5rem);
    --primary-color-dark: #0d1b30ff;
    --secondary-color-dark: #3d295bff;
    --gold-color: #ffff21ff;
    --gold-color-faded: #fff559ff;
}
@font-face {
    font-family: 'Futura';
    src: url('/fonts/Futura light bt.ttf') format('truetype'),
}
@font-face {
    font-family: 'Futura Bold';
    src: url('/fonts/Futura Bold font.ttf') format('truetype'),
}
@font-face {
    font-family: 'Futura Book';
    src: url('/fonts/Futura Book font.ttf') format('truetype'),
}
@font-face {
    font-family: 'Blank';
    src: url('/fonts/AdobeBlank.woff') format('woff'),
}
@font-face {
    font-family: 'Bahnschrift';
    src: '/fonts/BAHNSCRIFT 1.TTF' format('truetype'),
}
body {
    background-color: #fff;
    margin:0;
    padding: 0;
    padding-top: 0;
    overflow-x: hidden;
    overflow-y: visible;
    min-width:100%;
    max-width:100%;
    height:max-content
}
.background-gradient {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background-color: #00000000;
    background-image: -moz-linear-gradient(top,#3871c944, #526ccc66, #6d66cf66, #8361d244, #8d5fd333, #8d5fd322,var(--gradient-end));
    background-image: -o-linear-gradient(top,#3871c944, #526ccc66, #6d66cf66, #8361d244, #8d5fd333, #8d5fd322,var(--gradient-end));
    background-image: -webkit-gradient(linear, left top, left bottom,#3871c944, #526ccc66, #6d66cf66, #8361d244, #8d5fd333, #8d5fd322,var(--gradient-end));
    background-image: -webkit-linear-gradient(top,#3871c944, #526ccc66, #6d66cf66, #8361d244, #8d5fd333, #8d5fd322,var(--gradient-end));
    background-image: linear-gradient(to bottom,#3871c944, #526ccc66, #6d66cf66, #8361d244, #8d5fd333, #8d5fd322,var(--gradient-end));
    min-height: 60vh;
    min-width: 100%;
    max-width: 100%;
    z-index: -6;
    opacity:.5;
}
.clickable-text, .navbar-link, .navbar-item {
    color: #fff;
    transition: color 0.15s;
    font-family: Bahnschrift,Blank,sans-serif;
    text-shadow: 1px 1px 2px black;
    font-size: var(--default-font-size);
    text-align:center;
    cursor:pointer;
}
.normal-text {
    color: #fff;
    transition: color 0.15s;
    font-family: Bahnschrift,Blank,sans-serif;
    text-shadow: 1px 1px 2px black;
    font-size: var(--default-font-size);
}
.gray-text {
    color: #ccc;
    transition: color 0.15s;
    font-family: Bahnschrift,Blank,sans-serif;
    text-shadow: 1px 1px 2px black;
    font-size: var(--default-font-size);
}
.black-text {
    color: #000;
    transition: color 0.15s;
    font-family: Bahnschrift,Blank,sans-serif;
    text-shadow: 1px 1px 2px black;
    font-size: var(--default-font-size);
    padding:0
}

.thin-black-text {
    color: #000;
    transition: color 0.15s;
    font-family: Futura,Blank,sans-serif;
    text-shadow: 1px 1px 2px black;
    font-size: var(--default-font-size);
    padding: 0
}

.thin-white-text {
    color: #fff;
    transition: color 0.15s;
    font-family: Futura,Blank,sans-serif;
    text-shadow: 1px 1px 2px black;
    font-size: var(--default-font-size);
    padding: 0
}
.navbar-link, .navbar-item {
    padding-top: 20px;
    padding-right: 20px;
    position: relative;
    text-align: center;
    font-size: var(--large-font-size);
}
.clickable-text:hover{
    color: var(--gold-color-faded)
}
.navbar-link:hover {
    color: var(--gold-color-faded)
}
.navbar-item:hover {
    color: var(--gold-color-faded)
}
.navbar {
    top:0;
    left:0;
    position:fixed;
    padding: 0;
    background-color: #00000000;
    height: max-content;
    margin-top: 48px;
    margin-bottom: 8px;
    margin-left: 5vw;
    width: 90vw;
    display: flex;
    align-content: center;
    transition: opacity ease-in-out .6s;
    z-index:4
}
.navbar-background {
    top: 0;
    left: 0;
    position: fixed;
    padding: 0;
    background-color: #00000000;
    height: 25vh;
    margin-bottom: 8px;
    width: 100vw;
    display: flex;
    z-index: 3;
    background-image: linear-gradient(#51a04fff,#51a04f80,#51a04f80,#51a04f60,#51a04f20,#51a04f00);
    transition: opacity ease-in-out .6s, transform ease-in-out .8s;
}
.invisible{
    opacity:0;
    transform:translateY(-512px);
}
.main-logo {
    padding: 0;
    margin: 0;
    color: white;
    width: auto;
    height: 160px;
    position: inherit;
    align-self: center start;
    opacity:1;
    z-index:4;
    border-radius:64px;
    background-color:#ffffff24;
}
.content-area {
    box-shadow: 5px 5px 0px #050505;
}
.navbar-content {
    list-style: none;
    padding: 0px;
    margin:5px;
    display: flex;
    width: 100%;
    -webkit-justify-content: right;
    justify-content: right;
    align-content:center;
}
.clear-link {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
    padding:10px;
}
.clear-item {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
    padding: 10px;
}
.background-logo1 {
    color: var(--primary-color);
    opacity: 0.1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: var(--primary-color);
    fill-rule: nonzero;
    height: auto;
    width: 35%;
    z-index:-3
}
.background-logo2 {
    color: var(--primary-color);
    opacity: 0.15;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-55%, -50%);
    fill: var(--primary-color);
    fill-rule: nonzero;
    height: auto;
    width: 35%;
    z-index:-3
}
.background-shapes {
    color: var(--primary-color);
    opacity: 1;
    position: fixed;
    height: 100%;
    width: auto;
    max-width: auto;
    opacity: 0.75;
    z-index: -1;
    margin-left:auto;
    margin-right: auto;
    transform:translateX(30vw)
}
.tiny-arrow {
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    transform: translate(-8px, -8px);
    transition: position ease-in-out, 0.2s;
    z-index:7;
}
.tiny-arrow.parent-hover{
    transform: translate(0px, 0px)
}
.tiny-arrow-b {
    position: absolute;
    width: 32px;
    height: 32px;
    transform: translate(8px, 8px);
    transition: position ease-in-out, 0.2s;
    z-index: 7;
}

.tiny-arrow-b.parent-hover {
    transform: translate(0px, 0px)
}
.center-title {
    font-family: Futura Book, Bahnschrift, Blank, sans-serif;
    font-size: var(--giant-font-size);
    color: black;
    -webkit-justify-content: center;
    justify-content: center;
}
.normal-title {
    font-family: Futura Book, Bahnschrift, Blank, sans-serif;
    font-size: var(--large-font-size);
    color: black;
    text-align: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.title-area {
    padding: 0;
    margin-top: 20px;
    top: 0;
    left: 0;
    opacity: 1;
    height: min(35vh,25vw);
    text-align: center;
    -webkit-justify-content: center;
    justify-content: center;
    justify-items: center;
    display: flex;
    flex-flow: column;
    min-width: 100vw;
    width: 100vw;
    max-width: 100vw;
    opacity: 0;
    -moz-transition: opacity ease-in-out 1s;
    -o-transition: opacity ease-in-out 1s;
    -webkit-transition: opacity ease-in-out 1s;
    transition: opacity ease-in-out 1s;
    -moz-transition-delay: 0.75s;
    -o-transition-delay: 0.75s;
    -webkit-transition-delay: 0.75s;
    transition-delay: 0.75s;
}
.title-area.finished{
    opacity:1;
}
.news-area {
    min-width: 100vw;
    max-width: 100vw;
    -webkit-justify-content: center;
    justify-content: center;
    justify-items: center;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.newsbox-background {
    min-height: 250px;
    max-width: 80vw;
    min-width: 80vw;
    margin: 3% 3% 3% 3%;
    background: #ffffffff;
    -moz-box-shadow: #ffffffff 5px 5px 0px;
    -webkit-box-shadow: #00000000 5px 5px 0px;
    box-shadow: #00000000 5px 5px 0px;
    display: flex;
    flex-flow: column;
    -moz-transition: transform ease-in-out .2s;
    -o-transition: transform ease-in-out .2s;
    -webkit-transition: transform ease-in-out .2s;
    transition: transform ease-in-out .5s, opacity ease-in-out .2s;
    -moz-transition-delay: .8s;
    -o-transition-delay: .8s;
    -webkit-transition-delay: .8s;
    transition-delay: .8s;
    transform: translateY(100px);
    opacity:0
}
.newsbox-background-square {
    max-height: 50vw;
    min-height: 50vw;
    max-width: 60vw;
    min-width: 60vw;
    margin: 3% 3% 3% 3%;
    background: #ffffffff;
    -moz-box-shadow: #ffffffff 5px 5px 0px;
    -webkit-box-shadow: #00000000 5px 5px 0px;
    box-shadow: #00000000 5px 5px 0px;
    display: flex;
    flex-flow: column;
    -moz-transition: transform ease-in-out .2s;
    -o-transition: transform ease-in-out .2s;
    -webkit-transition: transform ease-in-out .2s;
    transition: transform ease-in-out .5s, opacity ease-in-out .2s;
    -moz-transition-delay: .8s;
    -o-transition-delay: .8s;
    -webkit-transition-delay: .8s;
    transition-delay: .8s;
    transform: translateY(100px);
    opacity: 0
}
.newsbox-background.slid{
    transform: translate(0);
    opacity:1
}

.newsbox-gradient {
    position: absolute;
    padding: 0;
    margin: 0;
    background-image: -moz-linear-gradient(left, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffff00);
    background-image: -o-linear-gradient(left, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffff00);
    background-image: -webkit-gradient(linear, left, left, from(#ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff), to(#ffffff00));
    background-image: -webkit-linear-gradient(left, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffff00);
    background-image: linear-gradient(to right, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffffff, #ffffff00);
    z-index: 3;
    width: 80vw;
    height: 250px;
}
.newsbox-content {
    position: absolute;
    padding: 0;
    margin: 0;
    width: 80vw;
    height: 250px;
}
.newsbox-image {
    position: absolute;
    height: auto;
    width: auto;
    z-index: 0;
    max-height: 250px;
    min-height: 250px;
    z-index: 2;
}
.side-lines-top {
    margin: 0;
    padding: 0;
    height: auto;
    width: 96px;
    position: absolute;
    transform: translate(0,-48%);
    left: 75%;
    z-index:7;
}
.side-lines-bottom {
    position: absolute;
    height: auto;
    width: 96px;
    margin: 0;
    padding: 0;
    left: 25%;
    z-index: 2;
    z-index: 7;
}
.content{
    max-height:max-content;
    min-width:100%;
    display:contents;
}
.bio-area {
    min-width: 100vw;
    max-width: 100vw;
    -webkit-justify-content: center;
    justify-content: center;
    justify-items: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top:10%
}
.bio {
    min-height: 300px;
    max-width: 80vw;
    min-width: 80vw;
    margin: 3% 3% 20% 3%;
    background: #ffffffff;
    -moz-box-shadow: #ffffffff 5px 5px 0px;
    -webkit-box-shadow: #00000000 5px 5px 0px;
    box-shadow: #00000000 5px 5px 0px;
    display: flex;
    flex-flow: column;
    opacity: 0;
    -moz-transition: opacity ease-in-out 0.5s,transform ease-in-out 0.8s;
    -o-transition: opacity ease-in-out 0.5s,transform ease-in-out 0.8s;
    -webkit-transition: opacity ease-in-out 0.5s,transform ease-in-out 0.8s;
    transition: opacity ease-in-out 0.5s,transform ease-in-out 0.8s;
    -moz-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
}
.bio.finished {
    opacity: 1;
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

.bio-image {
    height: auto;
    width: 20%;
    position: absolute;
    transform: translate(-25%,-50%);
    left: 10%;
    z-index: 2;
    border: 5px solid white;
}
.contact-area{
    height: 386px;
    width: 684px;
    background-color: white;
    margin:0;
    padding:0;
}
.loading-screen {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: fixed;
    -moz-transition: opacity ease-in-out .5s;
    -o-transition: opacity ease-in-out .5s;
    -webkit-transition: opacity ease-in-out .5s;
    transition: opacity ease-in-out .5s;
    -moz-transition-delay: .2s;
    -o-transition-delay: .2s;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    background-color: black;
    z-index: 1000;
    top: 0;
    left: 0;
    opacity: 1;
    overflow-y: hidden;
    display: flex;
    -ms-flex-flow: nowrap;
    -webkit-flex-flow: nowrap;
    flex-flow: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
}
.loading-screen.finished {
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
    opacity: 0;
    overflow-y: auto;
}
.styled-dropdown {
    background-color: #00000044;
    background-image: -moz-linear-gradient(top,#3871c9ff, #526ccc66, #6d66cf66, #8361d244, #8d5fd333, #8d5fd322,var(--gradient-end));
    background-image: -o-linear-gradient(top,#3871c9ff, #526ccc66, #6d66cf66, #8361d244, #8d5fd333, #8d5fd322,var(--gradient-end));
    background-image: -webkit-gradient(linear, left top, left bottom,#3871c9ff, #526ccc66, #6d66cf66, #8361d244, #8d5fd333, #8d5fd322,var(--gradient-end));
    background-image: -webkit-linear-gradient(top,#3871c9ff, #526ccc66, #6d66cf66, #8361d244, #8d5fd333, #8d5fd322,var(--gradient-end));
    background-image: linear-gradient(to bottom,#3871c9ff, #526ccc66, #6d66cf66, #8361d244, #8d5fd333, #8d5fd322,var(--gradient-end));
    min-width: contain;
    max-width: max-content;
    height: auto;
    max-height: 25vh;
    opacity: 0;
    -moz-transition: opacity ease-in-out .5s, transform ease-in-out .25s;
    -o-transition: opacity ease-in-out .5s, transform ease-in-out .25s;
    -webkit-transition: opacity ease-in-out .5s, transform ease-in-out .25s;
    transition: opacity ease-in-out .5s, transform ease-in-out .25s;
    z-index: 200;
    position: absolute;
    top: 0;
    left: 0;
    padding: max(1vw, 1vh);
    transform: translateX(-15%);
    border-style: groove;
    -moz-border-radius: 24px 24px;
    -webkit-border-radius: 24px 24px;
    border-radius: 24px 24px;
}
.scrollable {
    overflow-y: scroll;
    overflow-x: hidden;
}
.styled-dropdown-option {
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
    -moz-transition: color ease-in-out .5s;
    -o-transition: color ease-in-out .5s;
    -webkit-transition: color ease-in-out .5s;
    transition: color ease-in-out .5s;
    -webkit-text-decoration: none;
    text-decoration: none;
    list-style: none;
    padding: 5px;
    cursor: pointer;
}
.styled-dropdown-option:hover{
    color:var(--primary-color);
}
.styled-dropdown-text {
    font-family: Futura, Bahnschrift, Blank;
    font-size: var(--small-font-size);
    text-shadow: 1px 1px 1px white;
    color: black;
    -webkit-text-decoration: none;
    text-decoration: none;
    cursor: pointer;
}
.styled-dropdown.visible{
    opacity:1;
    transform:translateX(0%)
}

.centered-diagram {
    align-self: center;
    min-width: 40vw;
    min-height: 40vw;
    max-width: 40vw;
    max-height: 40vw;
    /*transform: translateX(15vw)*/
}

.branching-diagram{

}
.branching-diagram-branch{

}
.branching-diagram-item{
    width:128px;
    height:auto;
    
}

.centered-diagram.finished{
    opacity:1;
    transform:translate(0px,0px)
}
.vertical-div-line {
    background-image: -moz-linear-gradient(top, #ffffff00, #ddddddff, #fffffff, #dddddd, #ffffff00);
    background-image: -o-linear-gradient(top, #ffffff00, #ddddddff, #fffffff, #ddddddff, #ffffff00);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff00), to(#ddddddff,#fffffffff, #ddddddff, #ffffff00));
    background-image: -webkit-linear-gradient(top, #ffffff00, #ddddddff, #fffffffff, #ddddddff, #ffffff00);
    background-image: linear-gradient(to bottom, #ffffff00, #ddddddff, #ffffffff, #ddddddff, #ffffff00);
    margin-left: 24px;
    margin-right: 24px;
}
.info-box {
    background-color: #000000;
    padding: 24px;
    outline: 2px solid white;
    border-style: groove;
    -moz-border-radius: 128px 128px;
    -webkit-border-radius: 120px 128px;
    border-radius: 128px 128px;
    transition: border-radius ease-in-out .35s, transform ease-in-out .4s;
    transform: scale(1);
    background-color: #00000000;
    background-color: var(--tertiary-color);
}
.info-box:hover{
    -moz-border-radius: 8px 8px;
    -webkit-border-radius: 8px 8px;
    border-radius: 8px 8px;
    transform:scale(1.02)
}

.registration-area{
    display:flex;
    flex-flow:column nowrap;
    width:60%;
    margin-left:auto;
    margin-right:auto;

}

.data-area {
    display: flex;
    flex-flow: column nowrap;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.input-box{
    margin:24px;
}
.rounded-button {
    border-radius: 16px;
    border: 3px solid white;
    width: fit-content;
    height: 32px;
    padding: 12px;
    background-color:var(--tertiary-color);
    transition-duration: 0.3s;
    cursor: pointer;
}

.rounded-button:hover {
    border-radius: 8px;
}
.solid-button {
    border-radius: 48px;
    border: 4px solid black;
    width: fit-content;
    height: fit-content;
    padding: 12px;
    background:var(--secondary-color);
    transition-duration: 0.3s;
    cursor: pointer;
}

.solid-button:hover {
    border-radius: 22px;
}
.editable-text {
    text-decoration: none;
    border: 0px hidden;
    max-height: var(--default-font-size);
    border: none;
    outline: none;
    overflow: clip;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    background: none;
    font-family: Bahnschrift,Blank,sans-serif;
    margin:auto;
    color:black;
    font-size:26px;
    accent-color:white
}
.rounded-divider {
    border-radius: 24px;
    border: 3px solid white;
    width: fit-content;
    height: 28px;
    padding: 12px;
    background-image: -moz-linear-gradient(top,#51a04fff,#51a04f80,#51a04f80,#51a04f60,#51a04f20,#51a04f00,var(--gradient-end));
    background-image: -o-linear-gradient(top,#3871c9ff, #51a04fff,#51a04f80,#51a04f80,#51a04f60,#51a04f20,#51a04f00,var(--gradient-end));
    background-image: -webkit-gradient(linear, left top, left bottom,#51a04fff,#51a04f80,#51a04f80,#51a04f60,#51a04f20,#51a04f00,var(--gradient-end));
    background-image: -webkit-linear-gradient(top,#3871c9ff, #51a04fff,#51a04f80,#51a04f80,#51a04f60,#51a04f20,#51a04f00,var(--gradient-end));
    background-image: linear-gradient(to bottom,#51a04fff,#51a04f80,#51a04f80,#51a04f60,#51a04f20,#51a04f00,var(--gradient-end));
    background-color: #00000038;
}
::placeholder{
    color:lightgrey;
}
.hidden{
    transform:scale(0);
    opacity:0;
}
.shown{
    transform:scale(1);
}
.player-data {
    border-radius: 24px;
    border: 6px solid #8d5fd333;
    background-color: white;
    min-height: 768px;
    max-height: 1024px;
    border: 3px solid white;
}
.edit-icon{
    height:32px;
    width:auto;
}
.player-icon {
    height: auto;
    width: 15%;
    position: absolute;
    transform: translate(5%,-50%);
    left: 20%;
    z-index: 2;
}
.landing-page-screen {
    width: 80vw;
    height: 80vh;
    min-width: 80vw;
    min-height: 80vh;
    margin-left: auto;
    margin-right: auto;
    display:flex;
}
.landing-page-clickable {
    width: 20vw;
    height: 70vh;
    min-width: 20vw;
    min-height: 50vh;
    max-height: 70vh;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid white;
    border-radius: 32px;
    background-color: white;
    overflow: hidden;
    transition: all ease-in-out .3s;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
.landing-page-clickable:hover{
    border-radius: 8px;
    transform: scale(1.02)
}
.landing-page-info-box{
    opacity:0;
    background:white;
    grid-area: 1 / 1 / 1 / 1;
    z-index:5;
    width:100%;
    height:100%;
    transition: opacity ease-in-out .2s; 
    display:flex;
}
.landing-page-info-box:hover{
    opacity:.8;
}

.screen-clickable-image {
    height: 105%;
    width: auto;
    transform: translateX(-50%);
    grid-area: 1 / 1 / 1 / 1;
}

.announcement {
    height: auto;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid white;
    border-radius: 16px;
    margin-bottom:10vh;
}
.screen-info {
    width: 100%;
    height: 50%;
    transform: translateY(100%);
    transform: translateY(100%);
    z-index: 2;
    grid-area: 1 / 1 / 1 / 1;
    display:flex;
    align-content:baseline;
    padding:0;
    margin:0;
}
.landing-page-info-area{
    width:100vw;
    height:40%;
    min-height:40%;
    background:white;
    margin-top:5vw;
    margin-bottom:5vw;
    display:flex;
    overflow:hidden;
}
.centered-text{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.landing-page-slidable{
    opacity:0;
    transform: translateY(5vh);
    transition: transform ease-in-out .5s, opacity linear .6s;
}
.page-slid {
    opacity: 1;
    transform: translateY(0);
}
.page-diagram{
    width:75vw;
    height:auto;
    margin:auto;
    padding:0;
}
.decor-circle{
    position: absolute;
    width:15%;
    height:auto;
    filter:hue-rotate(240)
}
.background-image-animation {
    z-index: -2;
    opacity: .8;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-10%);
    transition: opacity ease-in-out .8s;
}
.background-image {
    opacity: 0.6;
    position: fixed;
    margin: auto;
    -webkit-mask-image: url('../vector/BGMask.svg');
    mask-image: url('../vector/BGMask.svg');
    mask-position:left;
    width:80vw;
    height:80vw;
    mask-repeat: no-repeat;
}
.greyed-out{
    color:dimgray;
}
.outofview{
    transform:translateX(-100vw)
}
.transparent{
    opacity:0;
}
.deco-lines{
    width:100%;
    height:100%;
    position:absolute;
    z-index:-1;
    opacity:.5;
    transform:translateX(-25%);
    transition: transform ease-out .05s;
}
.loading-overlay {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: fixed;
    transition: all ease-in-out .5s;
    background-color: black;
    z-index: 1000;
    top: 0;
    left: 0;
    opacity: .5;
    overflow-y: hidden;
    display: flex;
    -ms-flex-flow: nowrap;
    -webkit-flex-flow: nowrap;
    flex-flow: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
}
.arrow-masked {
    -webkit-mask-image: url(../vector/ArrowMask.svg);
    mask-image: url(../vector/ArrowMask.svg);
    width: 40%;
    height: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: transform ease-in-out 1s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
    transform: translateX(-40vw);
}
.arrowed-images{
    display: flex;
    flex-flow: row nowrap;
    width:fit-content;
    margin-left: auto;
    margin-right: auto;
    height:max(30vw, 30vh);
    margin-top:10vh;
    margin-bottom:8vh;
}
.landing-info-area{
    display: flex;
    flex-flow: column nowrap;
    width: 35vw;
    height:fit-content;
    padding:20px;
    margin-left:auto;
    margin-right: 2vw;
    background-color:#00000060;
    border-radius:8px 8px;
}
.landing-page-link-area {
    width: 100vw;
    height: fit-content;
    margin-top: 20vh;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    display: grid;
    grid-template-areas:
        "a b c d e"
        "a f g h e";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 2fr;
    overflow: hidden;
    background-color:white;
}
.landing-page-link-area > div.left-image{
    grid-row-start:a;
    grid-row-end:a;
    background-color:white;
    margin:4px;
    clip:rect(0%,25%,25%,0);
    overflow:hidden;
}
.landing-page-link-area > div.small-image{
    grid-area:b;
    background-color:white;
    margin:4px;
}

.landing-page-link-area > div.description{
    grid-area:c;
    background-color:white;
    text-align:center;
    padding:20px;
    margin:4px;
}

.landing-page-link-area > div.right-image{
    grid-row-start:e;
    grid-row-end:e;
    background-color:white;
    margin:4px;
    overflow:hidden;
}

.landing-page-side-image {
    height: 60vh;
    width: auto;
    overflow: hidden;
}

.landing-page-description-image {
    width: 20vw;
    height: auto;
}
.landing-page-diagram-grid {
    display: flex;
    flex-flow: column;
    width: 90vw;
    height: 50vh;
    flex-direction: row;
    margin-right:auto;
    margin-left:auto;
}
.landing-page-side-info {
    width: auto;
    height: 100vh;
    min-height: 40%;
    margin-top: 5vw;
    margin-bottom: 5vw;
    display: flex;
    overflow: hidden;
}
.hidden-image{
    transform: translateX(100%);
    opacity: 0;
}
.landing-page-big-image {
    width: 100vw;
    height: auto;
    position: absolute;
    z-index: -1;
    -webkit-mask-image: url(../vector/BigImageMask.svg);
    mask-image: url(../vector/BigImageMask.svg);
    mask-size:auto 100%;
}
.landing-page-top-elemets{
    display:grid;
    grid-template-areas:"a b";
}
landing-page-top-elemets > div.left{
    grid-area:a;
}
landing-page-top-elemets > div.left {
    grid-area: b;
    z-index:-1;

}
.gallery-grid {
    margin-left: auto;
    margin-right: auto;
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background-color: #ffffff20;
    -moz-border-radius: 8px 8px;
    -webkit-border-radius: 8px 8px;
    border-radius: 8px 8px;
}
.gallery-item {
    width: 16vw;
    height: 16vw;
    border: 4px solid var(--gold-color-faded);
    -moz-border-radius: 16px 16px;
    -webkit-border-radius: 16px 16px;
    border-radius: 16px 16px;
    overflow: hidden;
    margin: 1vw;
    -moz-transition: transform ease-in-out .25s, border-radius ease-in-out .25s, opacity ease-in-out .2s;
    -o-transition: transform ease-in-out .25s, border-radius ease-in-out .25s, opacity ease-in-out .2s;
    -webkit-transition: transform ease-in-out .25s, border-radius ease-in-out .25s, opacity ease-in-out .2s;
    transition: transform ease-in-out .25s, border-radius ease-in-out .25s, opacity ease-in-out .2s;
}
.gallery-image {
    opacity: 1;
    overflow: hidden;
    width: auto;
    height: inherit;
    transform: scale(1.75);
}
.gallery-item:hover {
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    -moz-border-radius: 8px 8px;
    -webkit-border-radius: 8px 8px;
    border-radius: 8px 8px;
}
.gallery-full-screen-display {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #00000040;
    top: 0;
    left: 0;
    z-index:5;
    display:flex;
    transition: opacity ease-in-out .75s;
}
.full-screen-hidden{
    top:100vh;
    opacity:0;
}
.gallery-full-image {
    width: auto;
    height: 75vh;
    margin: auto;
    transition: opacity ease-in-out .5s;
    border: 32px solid white;
}
.decorated-box {
    /*background-color: white;*/
    display: grid;
    grid-template-areas:
        "a b c"
        "d e f"
        "g h i";
    grid-template-columns: min-content 1fr min-content;
    grid-template-rows: min-content 1fr min-content;
}
.left-side-decoration {
    background-repeat: repeat-y;
    background-image: url(../vector/DecorWaveTemplate.svg);
    background-size: contain;
    grid-row-start: a;
    grid-row-end: g;
    width: 48px;
    margin: auto;
    height: 90%;
}
.right-side-decoration {
    background-repeat: repeat-y;
    background-image: url(../vector/DecorWaveTemplate.svg);
    background-size: contain;
    grid-row-start: c;
    grid-row-end: i;
    width: 48px;
    margin: auto;
    height: 90%;
}
.top-side-decoration {
    background-repeat: repeat-x;
    background-image: url(../vector/DecorWaveHorizontalTemplate.svg);
    background-size: contain;
    grid-area: b;
    width: 95%;
    margin: auto;
    height: 48px;
}

.bottom-side-decoration {
    background-repeat: repeat-x;
    background-image: url(../vector/DecorWaveHorizontalTemplate.svg);
    background-size: contain;
    grid-area: h;
    width: 95%;
    margin: auto;
    height: 48px;
}
.maize-decoration {
    background-image: url(../vector/DecorMaize.svg);
}
.maize-decoration-horizontal {
    background-image: url(../vector/DecorMaizeHorizontal.svg);
}
.decorated-box-content{
    grid-area:e / e / e / e;
}
.rounded-box{
    border-radius:8px 8px;
}
.gallery-cancel-button{
    opacity:.8;
    position: absolute;
    top:10vh;
    left: 90vw;
    width:3vw;
    height:auto;
}
.golden-border{
    border: 6px solid var(--gold-color);
}
.golden-border-faded {
    border: 6px solid var(--gold-color-faded);
}
.primary-border {
    border: 6px solid var(--tertiary-color);
}
.primary-border-faded {
    border: 6px solid var(--primary-color-faded);
}

.wave-divider {
    background-repeat: repeat-x;
    background-image: url(../vector/DecorWaveHorizontalTemplate.svg);
    background-size: contain;
    grid-area: b;
    width: 100%;
    margin: auto;
    height: 48px;
}

.maize-divider {
    background-repeat: repeat-x;
    background-image: url(../vector/DecorMaizeHorizontal.svg);
    background-size: contain;
    grid-area: b;
    width: 100%;
    margin: auto;
    height: 48px;
}
.footer-image {
    width: 100vw;
    height: auto;
    z-index: -1;
    -webkit-mask-image: url(../vector/FooterMask.svg);
    mask-image: url(../vector/FooterMask.svg);
    mask-size: auto 100%;
    z-index: -3;
    overflow:hidden;
}