@media only screen and (min-width: 768px) {
    /* Add your desktop-specific CSS here */
    :root {
        --circleDiameter: 250px; 
        --circleSize: 100px;
      }
}
@media only screen and (max-width: 767px) {
    /* Add your mobile-specific CSS here */
    :root {
        --circleDiameter: 175px; 
        --circleSize: 40px;
      }
}
 

@keyframes scaleAndTranslateAnimation {
    0% {
        transform: scale(0) translate(-50%, -50%);
    }
    100% {
        transform: scale(1) translate(-50%, -50%);
    }
}


         body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
			font-family: 'Montserrat', sans-serif;
				font-weight: 300;
				font-size: 15px;
				line-height: 1.7;
				color: #ececee;
				background-color: #1f2029;
				overflow: hidden;
			background-image: url('../img/Pattern.png');  
			background-position: center;
			background-repeat: repeat;
			background-size: 10%; 
			width: 100%;
        } 
		 
		
		.logo {
		
            width: 321px;
            height: 213px;  
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center; 
            font-size: 20px;
			content: url("/img/logo.png");
        }
		
		.circle-buttons-container {
            display: none; 
        }
		
        .circle-buttons-container.active {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
         animation: scaleAndTranslateAnimation 0.5s ease-in-out; /* Adjust duration and timing function as needed */
    animation-fill-mode: both; /* Keeps the final state of the animation after it completes */
}
        .circle-button {
            width:  var(--circleSize) ;
            height: var(--circleSize) ;
           background-color: rgb(208 244 255 / 19%);
           color: white;
    backdrop-filter: blur(1px);
            border-radius: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
            cursor: pointer;
            outline: none;
            border: none;
        }

        .circle-button:nth-child(1) { transform: rotate(60deg) 	translate(var(--circleDiameter)) rotate(-60deg); }
        .circle-button:nth-child(2) { transform: rotate(120deg) translate(var(--circleDiameter)) rotate(-120deg); }
        .circle-button:nth-child(3) { transform: rotate(180deg) translate(var(--circleDiameter)) rotate(-180deg); }
        .circle-button:nth-child(4) { transform: rotate(240deg) translate(var(--circleDiameter)) rotate(-240deg); }
        .circle-button:nth-child(5) { transform: rotate(300deg) translate(var(--circleDiameter)) rotate(-300deg); }
        .circle-button:nth-child(6) { transform: rotate(360deg) translate(var(--circleDiameter)) rotate(-360deg); }