@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,600;1,200;1,400&display=swap');

html {
    width: 100%;
    height: 100%;
    background: #f7eff3;
}

body {
    overflow: hidden;
    font-family: 'Grandstander', cursive;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pulse-big {
    0% {
        transition: all 300ms ease;
        transform: scale(1);
        opacity: 1;
    }

    70% {
        transition: all 300ms ease;
        transform: scale(1.4);
        opacity: 1;
    }

    100% {
        transition: all 300ms ease;
        transform: scale(1.6);
        opacity: 0;
    }
}

h1 {
    text-align: center;
    position: absolute;
    width: 100%;
    top: calc(50% - 350px);
    font-size: 60px;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    opacity: 1;
    transition: all 600ms ease;
}

.present {
    width: 400px;
    height: 400px;
    left: calc(50% - 200px);
    top: calc(50% - 200px);
    position: absolute;
    transform: scale(1);
    transition: all 300ms ease;
}

.present:hover .i1,
.present:hover .i2,
.present:hover .i3,
.present:hover .i4 {
    transition: all 300ms ease;
}

.present:hover .i1 {
    fill: #8ecedd!important;
}

.present:hover .i2 {
    fill: #7bc7dd!important;
}

.present:hover .i3 {
    fill: #ec4d5a!important;
}

.present:hover .i4 {
    fill: #e23c49!important;
}

.pulse {
    transform: scale(1);
    animation: pulse 1000ms;
}

.pulse-big {
    transform: scale(1);
    animation: pulse-big 5000ms;
}

.graphic-1 {
    width: 400px;
    position: absolute;
    bottom: -50px;
    left: 40px;
    transition: all 600ms ease;
}

.graphic-2 {
    width: 400px;
    position: absolute;
    bottom: -50px;
    right: 50px;
    transition: all 600ms ease;
}

.graphic-3 {
    width: 600px;
    position: absolute;
    transform: rotate(-29deg);
    top: -222px;
    left: -130px;
    transition: all 1400ms ease;
}

.graphic-4 {
    width: 550px;
    position: absolute;
    transform: rotate(42deg);
    top: -225px;
    right: -125px;
    transition: all 1400ms ease;
}

.graphic-5 {
    width: 300px;
    position: absolute;
    bottom: -50px;
    left: 350px;
    transform: rotate(21deg);
    transition: all 600ms ease;
}

.graphic-6 {
    width: 260px;
    position: absolute;
    bottom: -80px;
    right: 350px;
    transform: rotate(-21deg);
    transition: all 600ms ease;
}

.second-text {
    position: absolute;
    top: calc(50% - 235px);
    left: calc(50% - 300px);
    width: 600px;
    text-align: center;
    transition: all 300ms ease;
}

img.img1 {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    position: absolute;
    left: -170px;
    top: 80px;
    transform: rotate(17deg);
    opacity: 1;
    transition: all 300ms ease;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

img.img2 {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    position: absolute;
    left: 150px;
    top: 140px;
    opacity: 1;
    transition: all 300ms ease;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

img.img3 {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    position: absolute;
    right: -169px;
    top: 68px;
    transform: rotate(-9deg);
    opacity: 1;
    transition: all 300ms ease;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

img.img1.hide-o {
    left: -190px;
    top: 100px;
    opacity: 0;
}

img.img2.hide-o {
    left: 170px;
    top: 170px;
    opacity: 0;
}

img.img3.hide-o {
    right: -189px;
    top: 108px;
    opacity: 0;
}

.second-reveal,
.second-reveal.hide-o {
    transition: all 600ms ease;
}

.graphic-1.active {
    bottom: -80px;
}

.graphic-2.active {
    bottom: -70px;
}

.graphic-3.active {
    top: -260px;
    left: -200px;
}

.graphic-4.active {
    top: -255px;
    right: -175px;
}

.graphic-5.active {
    bottom: -90px;
}

.graphic-6.active {
    bottom: -120px;
}

.hide {
    display: none!important;
}

.hide-o {
    opacity: 0;
}

p {
    font-size: 24px;
    margin: 8px 0;
}

.green {
    color: #66C6B9;
}

.red {
    color: #F3705A;
}

.yellow {
    color: #FFD15C;
}


@media (max-width:1450px) {

    .graphic-3 {
        top: -260px;
        left: -180px;
    }

    .graphic-3.active {
        top: -290px;
        left: -210px;
    }

    .graphic-4 {
        top: -255px;
        right: -175px;
    }

    .graphic-4.active {
        top: -285px;
        right: -205px;
    }

    .graphic-1.active {
        bottom: -100px;
    }

    .graphic-2.active {
        bottom: -90px;
    }

    .graphic-5.active {
        bottom: -120px;
    }

    .graphic-6.active {
        bottom: -150px;
    }

}


@media (max-width:1360px) {

    .graphic-3 {
        top: -360px;
        left: -280px;
    }

    .graphic-3.active {
        top: -390px;
        left: -310px;
    }

    .graphic-4 {
        top: -355px;
        right: -275px;
    }

    .graphic-4.active {
        top: -385px;
        right: -305px;
    }

}