@font-face {                  
font-family: 'HelveticaNB';
src: url('fonts/HelveticaNeueBold.otf') format('otf');
font-weight: normal;
font-style: normal;
}

@font-face {                  
font-family: 'Illusion-Italic';
src: url(https://humantooth.neocities.org/fonts/IllusionSerif-Italic.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 

/* For modern browsers (Chrome, Edge, Safari, Opera) */
::selection {
  background-color: #A6F2EB;
  color: #000000        
}

/* For older versions of Firefox */
::-moz-selection {
  background-color: #A6F2EB;
  color: #000000
}
a {
  color: #FF66FF; /* Replace with your chosen color */
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Helvetica, sans-serif;
    letter-spacing: -0.02em;
    background:url('https://i.pinimg.com/webp85/1200x/ef/db/42/efdb42d541dfc04c0b657b73a6869d26.webp');;
    color: ##000000;
}

/* =========================
   OUTER FRAME
========================= */

.wrapper{
    width:920px;
    margin:40px auto;
    padding:8px;
    border:2px solid #FF66FF;
    background:#FFFFFF;
}

.main-frame{
    display:flex;
    border:1px solid #FF66FF;
    min-height:700px;
}

/* =========================
   LEFT IMAGE
========================= */

.left-panel{
    width:38%;
    border-right:1px solid #FF66FF;
    background:url("artwork.jpg") center center;
    background-size:cover;
    min-height:700px;
}

/* =========================
   RIGHT SIDE
========================= */

.right-panel{
    width:62%;
    background:#FFFFFF;
}

/* =========================
   LOGO
========================= */

.logo{
    font-family:'Illusion-Italic', serif;
    text-align:right;
    padding:10px 20px 0;
    font-size:72px;
    color:#F8F914;
    line-height:1;
}

/* =========================
   NAVIGATION
========================= */

.top-nav{
    padding:10px 20px 15px;
}

.top-nav ul{
    display:flex;
    list-style:none;
    gap:14px;
    flex-wrap:wrap;
}

.top-nav a{
    text-decoration:none;
    text-transform:uppercase;
    font-size:13px;
    color:#A6F2EB;
    transition:color .15s linear;
}

.top-nav a:hover{
    color:#A6F2EB;
    text-decoration:underline;
}

/* =========================
   CONTAINERS
========================= */

.container{
    margin:10px;
    border:1px solid #FF66FF;
    background:#FFFFFF;
}

.container-label{
    font-family:'HelveticaNB', sans-serif;
    padding:6px 8px 0;
    font-size:12px;
    font-weight: bold
    color: #000000;
    letter-spacing:0px;
}

.container-body{
    padding:8px;
}

/* =========================
   NEWS AREA
========================= */

.news-scroll{
    height:250px;
    overflow-y:auto;
    padding-right:10px;
}

.news-scroll::-webkit-scrollbar{
    width:14px;
}

.news-scroll::-webkit-scrollbar-track{
    background:#FFEBFF;
    border-left:1px solid #FF66FF;
}

.news-scroll::-webkit-scrollbar-thumb{
    background:#FF66FF;
    border:1px solid #FF66FF;
}

.post h1{
    font-family:'HelveticaNB', sans-serif;
    letter-spacing: -0.02em;
    color:#000000;
}

.date{
    font-size:11px;
    text-transform:uppercase;
    color:#000000;
    margin-bottom:15px;
}

.post p{
    line-height:1.8;
    font-size:14px;
    margin-bottom:15px;
}

/* =========================
   LOWER ROW
========================= */

.row{
    display:flex;
    gap:10px;
    margin:0 10px;
}

.row .container{
    flex:1;
    margin:0;
}

/* =========================
   LATEST
========================= */

.thumb{
    border:1px solid #A6F2EB;
    padding:4px;
    background:#FFFFFF;
}

.thumb img{
    width:100%;
    display:block;
}

.caption{
    text-align:center;
    margin-top:8px;
    font-size:12px;
    color:#000000;
}

/* =========================
   PLAYLIST SCROLLBOX
========================= */

.playlist-scroll{
    height:160px;
    overflow-y:auto;
    padding-right:10px;
}

.playlist-scroll::-webkit-scrollbar{
    width:14px;
}

.playlist-scroll::-webkit-scrollbar-track{
    background: #FFEBFF;
    border-left:1px solid #FF66FF;
}

.playlist-scroll::-webkit-scrollbar-thumb{
    background:#FF66FF;
    border:1px solid #FF66FF;
}

.playlist{
    list-style:none;
    font-size:13px;
}

.playlist li{
    margin-bottom:6px;
}

/* =========================
   RESPECT LINKS
========================= */

.respect-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px 20px;
}

.respect-grid a{
    text-decoration:none;
    color:#000000;
    font-size:13px;
}

.respect-grid a:hover{
    color:#A6F2EB;
    text-decoration:underline;
}

/* =========================
   FOOTER
========================= */

.footer{
    text-align:center;
    padding:18px;
    font-size:12px;
}

.footer-links{
    margin-bottom:8px;
}

.footer-links a{
    text-decoration:none;
    color:#A6F2EB;
    margin:0 8px;
}

.footer-links a:hover{
    color:#F8F914;
    text-decoration:underline;
}

  .video-container {
    display: flex;          /* Activates Flexbox styling */
    align-items: flex-start;    /* Vertically aligns text and video */
    gap: 20px;              /* Adds spacing between text and video */
  }

  .text-side {
    flex: 1;                /* Allows text to take up remaining space */
  }

  .video-side {
    flex-shrink: 0;         /* Prevents the video from squishing */
  }

  /* Responsive adjustment for mobile devices */
  @media (max-width: 768px) {
    .video-container {
      flex-direction: column; /* Stacks text on top of the video on small screens */
    }
    
    .video-side iframe {
      width: 100%;          /* Makes the video fill the screen width on mobile */
      height: auto;
      aspect-ratio: 16 / 9; /* Maintains video proportions */
    }
  }