:root {
    --main-color: #e0a826;
    --not-so-main-color: #ca771f;
    --content-width: 542px;
    --content-height: 164px;
}

* {
    font-family: sans-serif;
}

html, body {
    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    background: var(--main-color) url("/static/img/background.jpg");
    background-size: cover;
    background-position: center;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;

    background: var(--main-color);
    opacity: 0.6;
}

#main-wrapper {
    display: flex;
    height: 100%;

    color: white;

    justify-content: center;
    align-items: center;
}

#content-wrapper {
    text-align: center;

    z-index: 10;
}

h1 {
    font-size: 6rem;
    margin: 0;
}

h2 {
    font-size: 2rem;
}

.hub {
    margin-left: .25ch;
    padding: 0 .25ch;

    color: black;
    font-weight: bold;

    border-radius: 5px;
    background-color: #f8981d;
}

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.svg-triangle {
    position: absolute;
    height: auto;
    max-width: 40%;

    transform: translateY(100%);

    filter: drop-shadow(0 0 .5em rgba(0, 0, 0, 0.3));

    fill: var(--not-so-main-color);
}

.svg-triangle.left {
    max-width: 60%;
    left: 0;
    bottom: 0;

    animation: 1s .25s slideInFromBottom ease-in-out forwards;
}

.svg-triangle.left polygon {
    position: relative;
    left: 0;
    bottom: 0;
}

.svg-triangle.right {
    right: 0;
    bottom: 0;

    animation: 1s .5s slideInFromBottom ease-in-out forwards;
}

.svg-triangle.right polygon {
    right: 0;
    bottom: 0;
}

.svg-triangle.right-top {
    top: 0;
    right: 0;

    transform: translateX(100%);

    animation: 1s .6s slideInFromRight ease-in-out forwards;
}

.svg-triangle.right-top polygon {
    top: 0;
    right: 0;
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.floating-head {
    height: 33%;

    z-index: 100;

    position: absolute;
    filter: drop-shadow(0 0 .5em rgba(0, 0, 0, 0.3));
}

.floating-head.left {
    top: calc(50vh - 33.33vh / 2);
    left: calc((100vw - var(--content-width)) / 4 - 33.33vh * 0.395);

    transform: scale(0);

    animation: 1s .5s scaleIntoPlaceLeft forwards, 1s 1.5s wiggleLeft infinite alternate ease-in-out;
}

.floating-head.right {
    top: calc(50vh - 33.33vh / 2);
    right: calc((100vw - var(--content-width)) / 4 - 33.33vh * 0.395);

    transform: scale(0);

    animation: 1s .5s scaleIntoPlaceRight forwards, 1s 1.5s wiggleRight infinite alternate ease-in-out;
}

.floating-head.bottom {
    bottom: 0;
    left: calc(50% - 33.33vh * 0.563);

    transform: translateY(100%);

    animation: 1s .5s slideInFromBottom forwards;
}

@keyframes scaleIntoPlace {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes scaleIntoPlaceLeft {
    from {
        transform: scale(0);
        transform-origin: 100% 50%;
    }
    to {
        transform: scale(1);
        transform-origin: 100% 50%;
    }
}

@keyframes scaleIntoPlaceRight {
    from {
        transform: scale(0);
        transform-origin: 0 50%;
    }
    to {
        transform: scale(1);
        transform-origin: 0 50%;
    }
}

@keyframes wiggleRight {
    from {
        transform: rotateZ(0deg);
        transform-origin: center;
    }
    to {
        transform: rotateZ(-10deg);
        transform-origin: center;
    }
}

@keyframes wiggleLeft {
    from {
        transform: rotateZ(0deg);
        transform-origin: center;
    }
    to {
        transform: rotateZ(10deg);
        transform-origin: center;
    }
}

@media screen and (max-width: calc(542px + 35vh * 1.6)) {
    .svg-triangle.left {
        height: auto;
    }

    .svg-triangle.right {
        height: auto;
    }

    .svg-triangle.right-top {
        height: auto;
    }

    .floating-head.left {
        top: calc(25vh - var(--content-height) / 4 - 33.33vh / 2);
        left: calc(50% - 33.33vh * 0.395);

        transform: scale(0);

        animation: 1s .5s scaleIntoPlace forwards, 1s 1.5s wiggleLeft infinite alternate ease-in-out;
    }

    .floating-head.right {
        visibility: hidden;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --content-height: 132px;
    }

    html {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 540px) {
    :root {
        --content-height: 99px;
    }

    html {
        font-size: 0.6rem;
    }
}