body.modal-open {
overflow: hidden;
}

.ad{
	position: fixed;
	top: 20px;
	left: 60px;
	z-index: 1001;
}

.open-modal-btn {
position: fixed;
top: 20px;
left: 60px;
z-index: 1000;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
font-family: 'Montserrat', sans-serif; 
}


.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
z-index: 999;
}


.modal {
background-color: white;
width: 400px;
height: auto;
padding: 20px;
padding-top: 30px;
padding-bottom: 30px;
position: relative;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
z-index: 1000;
opacity: 0;
transform: scale(0.7); 
transition: transform 0.2s ease-out, opacity 0.1s ease-out; 
display: flex;
direction: column;
}


.modal-content {
text-align: center;
font-size: 17px;
}


.close-btn {
position: absolute;
top: 10px;
right: 20px;
font-size: 24px;
cursor: pointer;
}


.modal-bg.active .modal {
opacity: 1;
transform: scale(1);
}


#tgbutton{
margin-top:10px;
padding: 10px;
color: white;
background-color: #007bff;
border-radius: 5px;
transition-duration: 0.5s;
display: flex;
justify-content: center
}

#tgbutton:hover{
background-color: #0257b3;
}

#tgbutton::selection {
background: white;
color: black; 
}