body{
	position: absolute;
	width: 100%;
	height: 100%;
	min-width: 800px;
	overflow: auto;
	padding: 0px;
	margin: 0px;
}

.All {
	position: absolute;
	bottom: 0px;
	top: 0px;
	left: 0px;
	right: 0px;
	padding: 0px;
	margin: 0px;
	z-index: 0;
	text-align: center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+37,1e5799+37,266013+48,266013+48,0c0502+80,7db9e8+100&0+-1,1+0,0+0,0.7+60,1+73 */
background: radial-gradient(ellipse at center,  rgba(30,87,153,0) -1%,rgba(30,87,153,0) 0%,rgba(30,87,153,0.43) 37%,rgba(38,96,19,0.56) 48%,rgba(28,62,13,0.7) 60%,rgba(18,25,6,1) 73%,rgba(12,5,2,1) 80%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/*box-shadow: 15px 15px 15px #888888 inset;*/
}

.Button1 {
	position: relative;
	width: 200px;
	font-size: 30px;
	text-align: center;
	margin-top: 5px;
	margin-left: auto;
	Margin-right: auto;
	top: 5px;
	left: auto;
	right: auto;
	background-color: yellow;
	border-radius: 50%;
	z-index: 13;
}

.Back1 {
	position: absolute;
	bottom: 0px;
	top: 0px;
	left: 0px;
	right: 0px;
	inset: 25px 25px 25px 25px;
	background-color: black;
	z-index: 1;
	border-radius: 50%;
	opacity: 0;
	animation: fadeInAnimation ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        border-radius: 50%;
		opacity: 0;
    }
    100% {
        border-radius: 10%;
		opacity: 1;
    }
}

#Back2 {
	position: absolute;
	margin-top: auto;
	margin-bottom: auto;
	padding: 0px;
	margin-left: -200px;
	height: 700px;
	width: 200px;
	inset: -25px -25px -25px -25px;
	background-color: black;
	z-index: 11;
	border-radius: 25%;
	opacity: 0;
	animation: fadeInAnimation4 ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation4 {
    0% {
        border-radius: 25%;
		opacity: 0;
    }
    100% {
        border-radius: 25%;
		opacity: 1;
    }
}

.Edge {
	position: absolute;
	bottom: 0px;
	top: 0px;
	left: 0px;
	right: 0px;
	inset: 25px 25px 25px 25px;
	background-color: #008080;
	z-index: 2;
	border-radius: 50%;
	opacity: 0;
	overflow: hidden;
	animation: fadeInAnimation2 ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation2 {
    0% {
        border-radius: 50%;
		opacity: 0;
    }
    100% {
        border-radius: 6%;
		opacity: 1;
    }
}

.Edge2 {
	position: absolute;
	bottom: 0px;
	top: 0px;
	left: 0px;
	right: 0px;
	inset: 10px 10px 10px 10px;
	background-color: #000099;
	z-index: 12;
	border-radius: 25%;
	opacity: 0;
	overflow: hidden;
	animation: fadeInAnimation5 ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation5 {
    0% {
        border-radius: 25%;
		opacity: 0;
    }
    100% {
        border-radius: 25%;
		opacity: 1;
    }
}

.TitleBar {
	Position: absolute;
	top: 50px;
	width: 100%;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	animation: fadeInAnimation3 ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	z-index: 3;
}

.Title {
	Position: absolute;
	top: 20px;
	padding: 0;
	width: 50%;
	margin-left: 25%;
	margin-right: 25%;
	font-size: 50px;
	text-align: center;
	color: blue;
}

.T1 {
	Position: absolute;
	top: 0px;
	height: 100px;
	left: 100px;
}

.T2 {
	Position: absolute;
	top: 0px;
	bottom: 0px;
	height: 100px;
	right: 100px;
}

@keyframes fadeInAnimation3 {
    0% {
		opacity: 0;
    }
	65% {
		opacity: 0;
    }
    100% {
		opacity: 1;
    }
}

.fuzzy-overlay {
            position: absolute;
            inset: -200%;
            background-image: url("noise.png");
            opacity: 5%;
            z-index: 10;
            pointer-events: none; 
			
			animation: shift 0.2s linear infinite both;
			
        }

        @keyframes shift {
            0% {
                transform: translateX(10%) translateY(10%);
            }

            100% {
                transform: translateX(-10%) translateY(-10%);
            }