@font-face {
    font-family: museo-sans-rounded;
    src: url(/fonts/MuseoSansRounded-300.woff2) format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: museo-sans-rounded;
    src: url(/fonts/MuseoSansRounded-500.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: museo-sans-rounded;
    src: url(/fonts/MuseoSansRounded-700.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: vag-rounded;
    src: url(/fonts/VAGRoundedBT-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: vag-rounded;
    src: url(/fonts/VAGRoundedBT-Regular.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: vag-rounded;
    src: url(/fonts/VAGRoundedBT-Regular.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

:root {
    --moduplay-blue: #016FBD;
    --text-colour: #3E474A;
    --action-button-color: var(--moduplay-blue);
    --bg-rowheight-bottom: 60px;
}

body {
    margin: 0;
    font-family: museo-sans-rounded, Arial, Roboto, "Helvetica Neue", sans-serif;
    color: var(--text-colour);
}

h1 {
    color: var(--moduplay-blue);
    font-family: vag-rounded, museo-sans-rounded, Arial, Roboto, "Helvetica Neue", sans-serif;
    font-size: 40px;
}

h2 {
    font-weight: normal;
    font-size: 20px;
}

h1>sup,
h2>sup {
    font-size: 40%;
}

p {
    font-size: 14px;
}

#landingGrid {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: auto 500px;
    grid-template-areas: "splash info";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

@media (max-aspect-ratio: 99/100) {
    #landingGrid {
        grid-template-rows: auto 300px;
        grid-template-columns: 1fr;
        grid-template-areas: "splash" "info";
    }
}

#landingGrid>#splash {
    grid-area: splash;
    background-color: #0066B3;
    position: relative;
}
#landingGrid>#splash>#bg {
    position: absolute;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-areas:
        "render light"
        "render mid1"
        "mid2 dark";
    grid-template-rows: 2fr 1fr var(--bg-rowheight-bottom);
    grid-template-columns: auto 20vw;
}

#landingGrid>#splash>#bg>#render {
    grid-area: render;
    display: block;
    background-color: #055691;
    background-image: url('/images/splash/render.jpg');
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    align-self: stretch;
    justify-self: stretch;

}

#landingGrid>#splash>#bg>#light {
    grid-area: light;
    background-color: #48A8E7;
}

#landingGrid>#splash>#bg>#mid1,
#landingGrid>#splash>#bg>#mid2 {
    background-color: #0D79C1;
}

#landingGrid>#splash>#bg>#mid1 {
    grid-area: mid1;
}

#landingGrid>#splash>#bg>#mid2 {
    grid-area: mid2;
}

#landingGrid>#splash>#bg>#dark {
    grid-area: dark;
    background-color: #055691;
}
#landingGrid>#splash>#sprites {
    position: absolute;
    height: 100%;
    width: 100%;
    user-select: none;
}
#landingGrid>#splash>#sprites>img#rocketImg {
    position: absolute;
    max-height: 20vh;
    top: 50px;
    right: 30px;
    user-select: none;
}
#landingGrid>#splash>#sprites>#monitorContainer {
    position: absolute;
    max-width: 55%;
    max-height: 45%;
    bottom: 30px;
    right: 30px;
    user-select: none;
    aspect-ratio: 879/725;
}
#landingGrid>#splash>#sprites>#monitorContainer>svg {
    height: 100%;
    width: 100%;
}
#landingGrid>#splash>#sprites>img#cloud1Img {
    position: absolute;
    max-width: 10%;
    right: 13%;
    top: 70px;
    user-select: none;
}
#landingGrid>#splash>#sprites>img#cloud2Img {
    position: absolute;
    max-width: 15%;
    right: 25%;
    top: 30px;
    user-select: none;
}
#landingGrid>#splash>#sprites>img#cloud3Img {
    position: absolute;
    max-width: 20%;
    left: 50%;
    transform: translateX(-80%);
    top: 45px;
    user-select: none;
}
#landingGrid>#splash>#sprites>img#cloud4Img {
    position: absolute;
    bottom: calc(var(--bg-rowheight-bottom) - 15px);
    max-width: 20%;
    left: 30px;
    user-select: none;
}

#landingGrid>#info {
    grid-area: info;
    padding: 1.5em;
}

#landingGrid>#info>#actionButtons {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#landingGrid>#info>#actionButtons>.actionButton {
    display: block;
    border: 1px solid var(--action-button-color);
    border-radius: 5px;
    color: var(--action-button-color);
    text-decoration: none;
    min-width: 100px;
    padding: 10px 20px;
    box-sizing: border-box;
    text-align: center;
}

#landingGrid>#info>#actionButtons>.actionButton.primary {
    border: 1px solid var(--action-button-color);
    color: white;
    background-color: var(--action-button-color);
}