body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #333;
      color: white;
    }

    header {
      background: #333;
      color: white;
      padding: 20px 0;
      text-align: center;
    }

    .main, .sidebar {
      padding: 15px;
      font-family: Arial, sans-serif;
      background: #333;
      color: white; 
    }

    .sidebar{
      width: 10%;
      height: 25vh;
      position: -webkit-sticky;
      position: fixed;
    
    .sidebarTextBox{
      transform: translateX(-4);
    }

    .sidebarTextBox:hover{
      background-color: white;
      background-clip: border-box;
      border-radius: 10px;
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    }

    .center{
      margin: auto;
      width: 40%;
      padding: 10px;  
    }

    .sidebarLink{
      color:white;
      text-decoration: none;
      border: 1px; 
    }
    

    .sidebarLink:hover{
      color:black;
      text-decoration: none;
      border: 1px; 
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }


    nav {
      background: #444;
      overflow: hidden;
    }

    nav a {
        float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
    }

    nav a:hover {
      background-color: #838383;
    }



    

    .showreelSection {
      padding: 20px;
      background: #333;
    }

    .postsSection {
      padding: 20px;
      background: #333;
    }

    .recent-links {
      margin-top: 20px;
    }

    .recent-links h2 {
      margin-bottom: 10px;
      text-align: center;
      font-size: 60px;
    }


    .showreels {
      margin-top: 20px;
    }

    .showreels h2 {
      margin-bottom: 10px;
      text-align: center;
      font-size: 60px;
    }


    .grid_x2 {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
      justify-items: center;
      gap: 20px;
      max-width: 960px;
      margin: 0 auto;
    }

    .card_x2 {
        max-width: 450px;
        max-height: 250px;
        width: 100%;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    }

    .card_x2:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .card_x2 img {
      width:450px;
      height: auto;
      display: block;
    }



    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      justify-items: center;
      gap: 20px;
      max-width: 960px;
      margin: 0 auto;
    }
    

    .cardLink {
      text-decoration: none;
      color: inherit;
      display: block;
    }

    .cardLink .card {
        cursor: pointer;
    }


    .card {
        max-width: 300px;
        max-height: 400px;
        width: 100%;
      background: #333;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .card img {
      width:300px;
      height: auto;
      display: block;
    }

    .card h3 {
      padding: 10px 15px;
      margin: 0;
      font-size: 1.1em;
      text-align: center;
    }

    .card h3 a {
      text-decoration: none;
      color: #333;
    }



     .cardLink_NoText {
      text-decoration: none;
      color: inherit;
      display: block;
    }

    .cardLink_NoText .card_NoText {
        cursor: pointer;
    }


    .card_NoText {
        max-width: 300px;
        max-height: 300px;
        width: 100%;
        background: #333;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    }

    .card_NoText:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    
    .videoWrapper {
        display:flex;
        justify-content: center;
        padding: 5px;
    }

    .videoContainer {
        position: relative;
        width: 100%;
        max-width: 1920px;
        aspect-ratio: 16 / 9;;


    }

    .videoContainer iframe {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }