@font-face {
  font-family: Suse;
  src: url(/media/SUSE/SUSE-VariableFont_wght.ttf);
}

@font-face {
  font-family: Roboto;
  src: url(/media/Roboto/Roboto-Regular.ttf);
}
html, body { 
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  }

  section {
    width: auto;
    height: 24vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    justify-content: left;
    margin-left: 10%; 
  }

  .text-overlay {
    display: block;
    height: 100vh;
    background-color: rgb(77, 120, 156);
  }


  h2 {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 18.2vh;
    color: rgb(250, 250, 210);
    text-shadow: 
    0.2vh 0.2vh 0 darkblue, 
    -0.2vh -0.2vh 0 darkblue, 
    -0.2vh 0.2vh 0 darkblue, 
    0.2vh -0.2vh 0 darkblue;
  }

  
  .video-background {
    z-index: -1000;
    width: 100vw;  /* Set width to viewport height for correct rotation */
    height: 100vh;    /* Set height to viewport width for correct rotation */
  }

  
    /* Section after video */
    .work-section {
      background-color: rgb(22, 24, 59);
      display: flex;
      flex-direction: row;
      align-items:center;
      height: 61.8vh; /* Half the screen height */
      color: rgb(247, 244, 236);
    }

    @media (max-width: 800px) {
      h2 {
        font-size: 20.4vw;
      }

      .text-overlay {
        align-content: center;
      }

      .work-section {
        flex-direction: column;
        align-items: baseline;
        padding-top: 4vh;
        height: 55vh;
      }

      .work-image {
        height: 80vw;
      }
      .work-title {
        font-size: 1.6em;
      }
    }
  
    /* Image styling */
    .work-image {
      width: 38.9vw; /* Adjust image size as needed */
      max-height: 100%;
      opacity: 65%;
      object-fit: cover;
      background-color: rgba(114, 171, 215, 0.289);
      padding: 1.6vh 1.6vh 1.6vh 0vh;
    }

    /* Title styling */
    .work-title {
      width: 50%; /* Occupy space beside the image */
      font-family: 'Roboto';
      padding-left: 3vw;
      font-size: 2em;
      text-align: left;
    }

   
    /* Clickable SVG for imprint */
    .imprint {
      align-self: flex-end;
      font-family: Suse;
      color: #ffffff;
      cursor: pointer;
      margin-right: 1em;
    }

    /* Example hover effect for the imprint icon */
    .imprint-link:hover {
      opacity: 0.8;
    }

    .format-imprint {
      padding: 1em 4em 1em 4em;
      font-family: roboto;
    }