html,
   body {
       margin: 0;
       padding: 0;
       overflow-x: hidden;
       width: 100%;
   }

   ::-webkit-scrollbar {
       width: 0;
       height: 0;
   }

   body {
       margin: 0;
       font-family: 'Segoe UI', sans-serif;
       background-color: #222831;
       color: #e7ffe7
   }

   .container {
       display: flex;
       justify-content: center;
       padding: 30px 15px
   }

   .content-box {
       border-radius: 12px;
       max-width: 1200px;
       width: 100%;
       display: flex;
       padding: 20px;
       gap: 20px;
       background-color: #393E46;
   }

   .main-content {
       flex: 0 0 70%
   }

   .ad-center {
       display: flex;
       justify-content: center;
       margin: 10px 0
   }

   .iframe-container {
       position: relative;
       width: 100%;
       padding-top: 56.25%;
       border-radius: 10px;
       overflow: hidden;
       margin: 15px 0
   }

   .post-icons {
       display: none
   }

   .iframe-container iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border: none;
       border-radius: 10px
   }

   .sidebar {
       flex: 0 0 30%;
       display: flex;
       flex-direction: column;
       gap: 20px
   }

   .sidebar .ad {
       width: 100%;
       overflow: hidden
   }

   @media(max-width:768px) {
       .container {
           flex-direction: column;
           padding: 10px
       }

       .content-box {
           flex-direction: column;
           padding: 10px;
           align-items: center
       }

       .main-content,
       .sidebar {
           width: 100%
       }

       .sidebar {
           flex-direction: column;
           align-items: center;
           gap: 20px;
           margin-top: 20px
       }

       .sidebar .ad {
           width: 100%;
           max-width: 100%
       }

       .ad-center {
           justify-content: center;
           margin: 10px 0
       }

       .iframe-container {
           width: 100%;
           padding-top: 56.25%
       }
   }

   @media(max-width:768px) {
       .main-header {
           flex-direction: column;
           align-items: flex-start;
           padding: 15px 20px
       }

       .logo-container {
           justify-content: flex-start;
           width: 100%;
           margin-bottom: 10px
       }

       .site-logo {
           font-size: 28px;
           text-align: left;
           letter-spacing: 2px
       }

       .nav-links {
           width: 100%;
           justify-content: flex-start;
           flex-wrap: wrap;
           gap: 10px
       }

       .nav-links a {
           font-size: 16px
       }
   }

   @media(max-width:768px) {
       .header-container {
           flex-direction: column;
           align-items: flex-start;
           gap: 10px
       }

       .site-name {
           font-size: 22px
       }

       .nav-links {
           width: 100%;
           justify-content: flex-start;
           flex-wrap: wrap;
           gap: 10px;
           margin-top: 10px
       }

       .nav-links a {
           font-size: 14px;
           padding: 6px 10px
       }
   }

   @media (max-width: 768px) {
       .site-header {
           padding: 15px 20px;
           flex-direction: column;
           align-items: flex-start;
       }

       .header-inner {
           flex-direction: column;
           align-items: flex-start;
           gap: 10px;
       }

       .logo {
           font-size: 16px;
           margin-bottom: 5px;
       }

       .streams-nav {
           flex-direction: row;
           flex-wrap: wrap;
           gap: 15px;
           margin-left: 0;
           margin-top: 5px;
       }

       .streams-nav a {
           font-size: 13px;
       }
   }