@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
}

.background {
    width: 100%;
    height: 100%;
    background: #edf3f8;
    /* #edf3f8 1%, #dee3e8 100% */
    background: -moz-radial-gradient(center, ellipse cover, #edf3f8 1%, #ccd3db 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #edf3f8 1%, #ccd3db 100%);
    background: radial-gradient(ellipse at center, #edf3f8 1%, #ccd3db 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#edf3f8", endColorstr="#dee3e8", GradientType=1);
}

.title {
    z-index: 10;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%) translateY(-50%);
    font-family: "Montserrat";
    text-align: center;
    width: 60%;
}

.title h1 {
    position: relative;
    color: #000000;
    font-weight: 300;
    font-size: 50px;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.title h2 {
    font-weight: 600;
    font-size: 64px;
    padding: 0;
    margin: 0;
    line-height: 1;

    /* -webkit-background-clip: text;
          background-clip: text;
  background-image: -webkit-gradient(linear, left top, right top, from(#09f1b8), color-stop(#00a2ff), color-stop(#ff00d2), to(#fed90f));
  background-image: -o-linear-gradient(left, #09f1b8, #00a2ff, #ff00d2, #fed90f);
  background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
  color: #dee3e8;
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: calc(1em / 16); */
}

.title h2 span {
    display: inline-block;
    font-size: 4rem;
    animation: wave 4s ease-in-out infinite;
}

.title h2 span:nth-child(1) {
    animation-delay: 0.0s;
}
.title h2 span:nth-child(2) {
    animation-delay: 0.1s;
}
.title h2 span:nth-child(3) {
    animation-delay: 0.2s;
}
.title h2 span:nth-child(4) {
    animation-delay: 0.1s;
}
.title h2 span:nth-child(5) {
    animation-delay: 0.0s;
}

@keyframes wave {
    0% {
        transform: translateY(0px);
    }
    80%, 90%, 100% {
        transform: translateY(0px);
    }
    85%, 95% {
        transform: translateY(-5px);
    }
}

.title h3 {
    font-weight: 200;
    font-size: 24px;
    padding: 0;
    margin: 0;
    line-height: 2;
    color: #5e7283;
    letter-spacing: 2px;
}

.title p {
    font-weight: 200;
    font-size: 20px;
    color: #5e7283;
}

.pentahedron {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #3E82F7;
}

.point {
    fill: #8491A3;
}

.rhombus {
    /* fill: #2DA94F;
    stroke: #2DA94F; */
    fill: #ED412D;
    stroke: #ED412D;
}

.x {
    /* fill: #FDBD00; */
    fill: #ED412D;
}

.circle {
    /* fill: #ED412D; */
    fill: #2DA94F;
}

.gamepad {
    /* fill: #b22bbe; */
    fill: #3E82F7;
}

.star {
    /* fill: #fde800; */
    fill: #FDBD00;
}

svg {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    transform: translateZ(0px);
}