@font-face { font-family: 'BlackOpsOne'; src: url('fonts/BlackOpsOne.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Rubik'; src: url('fonts/rubik.woff2') format('truetype'); font-weight: normal; font-style: normal; }
body { font-family: 'BlackOpsOne', Tahoma, sans-serif; font-size: 20px; margin: 0; padding: 20px; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow-x: hidden; background-color: #262626; position: relative; }
a { color: #FF9400; text-decoration: underline; }
a:hover { text-decoration: none; }
h1 { position: relative; }
h1::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 75%; height: 2px; background: linear-gradient( to right, transparent 0%, #FF9400 20%, #FF9400 50%, #FF9400 80%, transparent 100% ); }
h2 { position: relative; padding-bottom: 10px; margin-top: 15px; }
h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 75%; height: 2px; background: linear-gradient(to right, #FF9400 0%, #FF9400 20%, transparent 100%); }
p { padding: 0 0 10px 0; margin-bottom: 0; }
cmd { border: 1px solid white; background: rgba(0, 0, 0, 0.6); color: white; font-size: 13px; padding: 2px 7px 4px 7px; border-radius: 4px; }
.background-blobs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.6; }
.blob-1 { background: #FFD800; width: 300px; height: 300px; top: 20%; left: 10%; animation: moveBlob1 25s infinite alternate ease-in-out; }
.blob-2 { background: #F2CB0C; width: 400px; height: 400px; top: 60%; right: 10%; animation: moveBlob2 30s infinite alternate ease-in-out; }
.blob-3 { background: #E5BF16; width: 350px; height: 350px; bottom: 10%; left: 20%; animation: moveBlob3 35s infinite alternate ease-in-out; }
.blob-4 { background: #D8B320; width: 320px; height: 320px; top: 15%; right: 20%; animation: moveBlob4 28s infinite alternate ease-in-out; }
@keyframes moveBlob1 { 0%{transform:translate(0,0) scale(1);}25%{transform:translate(200px,150px) scale(1.2);}50%{transform:translate(400px,-100px) scale(0.9);}75%{transform:translate(100px,-200px) scale(1.1);}100%{transform:translate(-200px,100px) scale(1);} }
@keyframes moveBlob2 { 0%{transform:translate(0,0) scale(1);}25%{transform:translate(-300px,100px) scale(1.3);}50%{transform:translate(200px,200px) scale(0.8);}75%{transform:translate(-100px,-300px) scale(1.2);}100%{transform:translate(300px,-100px) scale(1);} }
@keyframes moveBlob3 { 0%{transform:translate(0,0) scale(1);}25%{transform:translate(250px,-150px) scale(1.1);}50%{transform:translate(-300px,100px) scale(1.3);}75%{transform:translate(150px,250px) scale(0.9);}100%{transform:translate(-200px,-200px) scale(1);} }
@keyframes moveBlob4 { 0%{transform:translate(0,0) scale(1);}25%{transform:translate(180px,220px) scale(1.15);}50%{transform:translate(-250px,-120px) scale(0.85);}75%{transform:translate(120px,-250px) scale(1.25);}100%{transform:translate(-180px,180px) scale(1);} }
.main-container { font-size: 16px; width: 100%; max-width: 1200px; min-width: 60%; background: transparent; border-radius: 15px; overflow: hidden; }
.section { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); margin-bottom: 20px; border-radius: 10px; padding: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
.header { display: flex; justify-content: space-between; align-items: center; font-size: 20px; padding: 15px 30px, 13px 30px; position: relative; z-index: 10000; }
.logo { display: flex; align-items: center; font-size: 24px; color: white; }
.logo img { width: 32px; height: 32px; margin-right: 10px; border-radius: 8px; }
.nav-menu { display: flex; gap: 20px; align-items: extreme; position: relative; z-index: 10000; }
.nav-menu a { color: white; text-decoration: none; padding: 8px 15px; border-radius: 5px; transition: background 0.3s; display: flex; align-items: center; gap: 8px; }
.nav-menu a:hover { background: rgba(255, 255, 255, 0.2); }
.dropdown { position: relative; display: inline-block; z-index: 10000; }
.dropdown-toggle { color: white; text-decoration: none; padding: 8px 15px; border-radius: 5px; transition: background 0.3s; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.dropdown-toggle:hover { background: rgba(255, 255, 255, 0.2); }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: rgba(40, 40, 40, 0.95); backdrop-filter: blur(10px); min-width: 160px; border-radius: 5px; overflow: hidden; z-index: 99999; box-shadow: 0 8px 16px rgba(0,0,0,0.3); }
.dropdown-menu a { color: white; padding: 12px 16px; text-decoration: none; display: flex; align-items: center; gap: 8px; transition: background 0.3s; }
.dropdown-menu a:hover { background: rgba(255, 255, 255, 0.1); }
.dropdown:hover .dropdown-menu { display: block; }
.play-btn { background: #FF9400; color: white; border: none; padding: 10px 25px; border-radius: 25px; cursor: pointer; transition: background 0.3s; display: flex; align-items: center; gap: 8px; }
.play-btn:hover { background: #1280C5; }
.slider-container { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 20px; z-index: 1; }
.slider { position: relative; height: 400px; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.slide.active { opacity: 1; }
.slide-img { width: 100%; height: 100%; object-fit: cover; }
.slide-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle, transparent 70%, rgba(0,0,0,0.7) 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center; padding: 20px; }
.slide-text { font-size: 2.5em; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.slide-btn { background: #FF9400; color: white; padding: 12px 30px; text-decoration: none; border-radius: 25px; transition: background 0.3s; }
.slide-btn:hover { background: #1280C5; color: white; }
.slider-controls { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); z-index: 10; padding: 0 20px; }
.slider-control { background: rgba(255, 255, 255, 0.2); border: none; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; cursor: pointer; transition: background 0.3s; }
.slider-control:hover { background: rgba(255, 255, 255, 0.3); }
.slider-dots { position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: center; gap: 10px; z-index: 10; }
.slider-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background 0.3s; }
.slider-dot.active { background: #FF9400; }
.content { padding: 15px 30px 30px 30px; color: white; line-height: 1.6; }
.footer { font-size: 14px; display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; color: white; text-align: left; }
.footer-links { display: flex; gap: 15px; }
.toast { position: fixed; bottom: 20px; right: 20px; background: #333; color: white; padding: 15px 20px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); display: none; z-index: 100000; }
.toast button { background: none; border: none; color: white; margin-left: 15px; font-size: 16px; cursor: pointer; }
@media (max-width: 992px) { .main-container { width: 90%; } .header { flex-direction: column; gap: 15px; } .nav-menu { flex-wrap: wrap; justify-content: center; } .footer { flex-direction: column; gap: 15px; text-align: left; } .slide-text { font-size: 2em; } }
@media (max-width: 768px) { .main-container { width: 100%; } .slide-text { font-size: 1.5em; } .blob { filter: blur(50px); } .blob-1, .blob-2, .blob-3, .blob-4 { width: 200px; height: 200px; } .slider-control { width: 40px; height: 40px; } }
.section.content { font-family: Rubik, Arial; }
.css-spoiler { margin: 1rem 0; }
.spoiler-checkbox { display: none; }
.spoiler-label { display: block; padding: 10px 15px; background: rgba(255, 148, 0, 0.2); color: white; border-radius: 5px; cursor: pointer; font-weight: 600; transition: background 0.3s; }
.spoiler-label:hover { background: rgba(255, 148, 0, 0.3); }
.spoiler-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: rgba(0, 0, 0, 0.2); border-radius: 0 0 5px 5px; }
.spoiler-checkbox:checked ~ .spoiler-content { padding: 15px 20px; max-height: 2000px; }
.spoiler-checkbox:checked ~ .spoiler-label { border-radius: 5px 5px 0 0; }
.page-title { text-align: center; padding: 5px 0; margin-bottom: 10px; }
.table-transparent { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, 0.05); --bs-table-striped-color: #fff; --bs-table-active-bg: rgba(255, 255, 255, 0.1); --bs-table-active-color: #fff; --bs-table-hover-bg: rgba(255, 255, 255, 0.075); --bs-table-hover-color: #fff; color: #fff; border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); }
.table-transparent td { color: white; }
.table-transparent th { color: white; }
.table-transparent th, .table-transparent td { border-color: rgba(255, 255, 255, 0.1); background-color: transparent !important; }
.table-transparent .table-light { --bs-table-bg: rgba(255, 255, 255, 0.1); color: #fff; }