.background-image {}

:root{
	--dotSize: 1080px;
	--dotMargin: -540px;
}

body {
    overflow: hidden;
	margin: 0;
	padding: 0;
/* Hide scrollbars */
    background: #6D246EFF;
	z-index: -2;
}

.dot {
    width: var(--dotSize);
    height: var(--dotSize);
	margin-left: var(--dotMargin);
	margin-top: var(--dotMargin);
    top: 0vh;
    left: 0vw;
    border-radius: 50%;
    display: inline-block;
    animation-name: pulse;
    animation-iteration-count: 1;
    z-index: -1;
    filter: blur(100px);
	overflow: hidden;
	animation-duration: 1s;
}


/**
Make a keyframe animation that's a pulsing circle that goes from 25px to the whole screen
start with the color #06a897 and end with #8800ff
*/
@keyframes pulse {
    0%{
        background-color: #25CDCCFF;
        transform: scale(0);
		z-index: -1;
    }
	20%{
		background-color: #2677B6FF;
        transform: scale(0.20);
	}
	80%{
		background-color: #322796FF;
        transform: scale(0.80);
	}
    100%{
        background-color: #6D246E00;
        transform: scale(1);
		z-index:-100;
    }

}

#dot1 {
	position: fixed;
}

#dot2 {
	position: fixed;
}

#dot3 {
	position: fixed;
}

#dot4 {
	position: fixed;
}

#dot5 {
	position: fixed;
}

#dot6 {
	position: fixed;
}

#dot7 {
	position: fixed;
}

#dot8 {
	position: fixed;
}

.background-image>img {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
.background-image {
    z-index: 10000;
    position: absolute;
}