body {
font-family: Arial, sans-serif;
background-color: #000000; color: #ffffff; margin: 0;
padding: 0;
} a {
color: #ff3333; text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #ff5555; } .logo {
text-align: center;
margin-bottom: 15px;
}
.logo img {
max-width: 100%;
height: auto;
} .main-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.main-menu li {
display: inline-block;
}
.main-menu a {
color: #ffffff;
background-color: #330000; padding: 10px 20px;
border-radius: 8px;
box-shadow: 0 0 10px #ff0000, 0 0 20px #ff3333; transition: all 0.3s ease;
}
.main-menu a:hover {
background-color: #ff0000; color: #ffff33; box-shadow: 0 0 15px #ff0000, 0 0 30px #ff6666; } header {
background-color: #1a0000; color: #ffffff;
padding: 25px 0;
text-align: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
header .logo img {
max-width: 280px;
height: auto;
}
header nav a {
color: #ffffff;
font-weight: bold;
text-shadow: 1px 1px 3px #ff0000; transition: all 0.3s ease;
}
header nav a:hover {
color: #ffff33;
text-shadow: 2px 2px 8px #ff0000;
} .slogan {
font-size: 18px;
font-weight: bold;
color: #ffffff;
margin-top: 10px;
text-align: center;
text-shadow: 1px 1px 5px #ff0000;
} @media (max-width: 768px) {
.main-menu {
flex-direction: column;
align-items: center;
}
.main-menu li {
margin: 10px 0;
}
}
selector {
background-color: #000;
color: #fff;
padding: 25px 0;
text-align: center;
box-shadow: 0 0 20px #b30000, 0 0 40px #b30000;
position: relative;
overflow: hidden;
}
selector::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 200px;
background: radial-gradient(circle, rgba(179,0,0,0.6) 0%, rgba(0,0,0,0) 80%);
transform: translate(-50%, -50%);
pointer-events: none;
}