@charset "UTF-8";

body {
   font-family: 'Lora', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
}

a {
   scroll-behavior: smooth;
}

/* Navigation Active State */
.nav-link.active a {
   color: #7209b7;
   border-bottom: 2px solid #7209b7;
}

/* Button Styles */
a:not(.nav-link a):not(.footer a) {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   min-height: 70px;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

@media (max-width: 768px) {
   a:not(.nav-link a):not(.footer a) {
      width: 100%;
   }
}

/* Image Styles */
img {
   width: 100%;
   max-width: 100%;
   object-fit: cover;
   -webkit-transition: transform 0.3s ease;
   -moz-transition: transform 0.3s ease;
   transition: transform 0.3s ease;
}

img:hover {
   transform: scale(1.05);
}

/* Parallax Effect */
[data-parallax] {
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
}

/* Marquee */
.marquee {
   overflow: hidden;
   white-space: nowrap;
}

.marquee-content {
   display: inline-block;
   animation: marquee 15s linear infinite;
}

.marquee-content span {
   margin-right: 50px;
}

@keyframes marquee {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-100%);
   }
}

/* Spoiler */
.spoiler button {
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

.spoiler-content {
   display: none;
}

.spoiler-content.active {
   display: block;
}

/* Tabs */
.tab-button.active {
   background-color: #fff;
   color: #7209b7;
}

.tab-content {
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   transition: all 0.3s ease;
}

/* Fade-in Animation */
.fade-in {
   opacity: 0;
   transform: translateY(20px);
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
}

.fade-in.visible {
   opacity: 1;
   transform: translateY(0);
}

/* Responsive Table */
table {
   width: 100%;
   border-collapse: collapse;
}

table th,
table td {
   padding: 1rem;
   border: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
   table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
   }
}

/* Header Responsive */
@media (max-width: 1300px) {
   header nav {
      display: none;
   }

   #menu-toggle {
      display: block;
   }
}

/* Dark Mode */
.dark .tab-button.active {
   background-color: #1f2937;
}

/* Counter Animation */
.counter {
   display: inline-block;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}

/* Темная тема */
body.dark {
   background-color: #111827;
   /* gray-900 */
   color: #f3f4f6;
   /* gray-100 */
}

body.dark header {
   background-color: #1f2937;
   /* gray-800 */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark header a {
   color: #d1d5db;
   /* gray-300 */
}

body.dark header a:hover {
   color: #c084fc;
   /* purple-400 */
}

body.dark #theme-toggle {
   background-color: #374151;
   /* gray-700 */
}

body.dark #mobile-menu {
   background-color: #1f2937;
   /* gray-800 */
}

body.dark .bg-white {
   background-color: #1f2937 !important;
   /* gray-800 */
}

body.dark .bg-gray-200 {
   background-color: #374151;
   /* gray-700 */
}

body.dark table {
   background-color: #1f2937;
   /* gray-800 */
}

body.dark table thead tr {
   background-color: #374151;
   /* gray-700 */
}

body.dark table tbody tr {
   border-bottom: 1px solid #374151;
   /* gray-700 */
}

body.dark .spoiler button {
   background-color: #374151;
   /* gray-700 */
   color: #f3f4f6;
   /* gray-100 */
}

body.dark .spoiler-content {
   background-color: #1f2937;
   /* gray-800 */
}

body.dark .tab-button {
   background-color: #1f2937;
   /* gray-800 */
   color: #d1d5db;
   /* gray-300 */
}

body.dark .tab-button.active {
   background-color: #374151;
   /* gray-700 */
}

body.dark .tab-content {
   background-color: #1f2937;
   /* gray-800 */
}

body.dark form input,
body.dark form select,
body.dark form textarea {
   background-color: #374151;
   /* gray-700 */
   border: 1px solid #4b5563;
   /* gray-600 */
   color: #f3f4f6;
   /* gray-100 */
}


body.dark a.bg-purple-600 {
   background-color: #c084fc;
   /* purple-400 */
}

body.dark button:hover,
body.dark a.bg-purple-600:hover {
   background-color: #a855f7;
   /* purple-500 */
}

body.dark .marquee {
   background-color: #c084fc;
   /* purple-400 */
}

body.dark .nav-link.active a {
   color: #c084fc;
   /* purple-400 */
   border-bottom: 2px solid #c084fc;
   /* purple-400 */
}