html, body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', sans-serif;
background: #121212;
height: 100%;
overflow: hidden;
}
/* NAVBAR */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: rgba(218, 169, 10, 0.6);
backdrop-filter: blur(12px);
}
.logo {
display: flex;
align-items: center;
gap: 8px;
color: white;
font-size: 16px;
font-weight: bold;
}
.logo img {
height: 36px;
border-radius: 6px;
}
.nav-links {
list-style: none;
display: flex;
gap: 16px;
margin: 0;
padding: 0;
}
.nav-links li a {
color: white;
text-decoration: none;
font-size: 14px;
position: relative;
}
.nav-links li a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: #00ffc3;
left: 0;
bottom: -4px;
transition: width 0.3s;
}
.nav-links li a:hover::after {
width: 100%;
}
.burger {
display: none;
flex-direction: column;
gap: 4px;
cursor: pointer;
}
.burger div {
width: 24px;
height: 2px;
background: white;
}
@media (max-width: 768px) {
.nav-links {
position: absolute;
top: 56px;
right: 16px;
background: rgba(0, 0, 0, 0.95);
flex-direction: column;
padding: 10px 15px;
border-radius: 6px;
display: none;
}
.nav-links.show {
display: flex;
}
.burger {
display: flex;
}
.logo span {
font-size: 14px;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* IFRAME */
.iframe-container {
position: absolute;
top: 56px;
left: 0;
right: 0;
bottom: 0;
}
.iframe-container iframe {
width: 100%;
height: 100%;
border: none;
}
/* Telegram button */
.telegram-btn {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
width: 50px;
height: 50px;
background-color: #0088cc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
animation: float 2s ease-in-out infinite;
}
.telegram-btn img {
width: 24px;
height: 24px;
filter: invert(1);
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}