.circle{
	
	position: relative;
	top:0;
	left: 0;
	overflow: hidden;	
	/*background-image: radial-gradient(
		circle at 50% 90%,
		#385c78,
		#011735 79%,
		#010e1f
	);*/	
}
.circle_l2{
	position:absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*circle buttons*/
.circle_button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    text-align: center;
    /*font-family: 'Barlow', sans-serif;*/
    color:var(--white);
    font-size: 3.5em;
    /*z-index: 2;*/
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: 2s; 
}

.circle_button div{
	cursor: pointer;
}
.circle_button-first a{
	color: var(--white);  
}

.circle_button-second{

	border-radius: 50px 50px 50px 50px;
	display: flex;
	justify-content: center;
	position: relative;
	top: 1em;
	opacity: 0.5;
}
.circle_button-second a{
	padding: 0.5em;
	color: var(--white);
	font-size: 0.5em;
	text-shadow: var(--white) 3px 3px 4px;
   
}



.circle_button-second:hover {
	opacity: 1;
	box-shadow: 0 0px 8px 0px whitesmoke;
  	


}	
.circle_button-second:hover a{
	color: #3cff00;
	text-shadow: red 4px 5px 11px;
}

    

.circle_button-first{
	border: 2px solid whitesmoke;
	border-radius: 50px;
	position: relative;
	padding: 0.4em;
	/*z-index: 2;*/
    font-size: 1.3em;
}
.circle_button-first:hover .circle_button-backlight{
	opacity:1;
}
.circle_button-first:hover{
	text-shadow: #006dff 2px 2px 16px;
    box-shadow: 2px 2px 10px 10px #006dff;
}
.circle_button-backlight{
	position:absolute;
	top:100%;
	left:50%;
	box-shadow: 0 0 3em 2em #3cff00ad;
	opacity:0;

}
@media (min-aspect-ratio: 1/1){
	.circle_button-first{font-size: 1.3em;}
	.circle_button-second{font-size: 1em;}
}

@media (max-aspect-ratio: 1/1){
	.circle_button-first{font-size: calc(1.3em * 1.5);}
	.circle_button-second{font-size: 2em;}
}