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

@font-face{
    font-family: "Director-Regular";
    src: url(Director-Regular.woff2) format(woff2);
}


:root {
    --primary-bg-color: #fafd28;
    --font-family: "Director-Regular";
    --font-size-large: 2.5rem;
    --font-size-small: 1.5rem;
    --padding-small: 1rem;
    --padding-medium: 2rem;
}


body {
    background: var(--primary-bg-color);
    font-family: var(--font-family);
    font-size: var(--font-size-large);
    color: black;
}


main {
    width: 100%;
    font-size: var(--font-size-large);
    padding: var(--padding-small);
}
  
.intro {
    margin-bottom: var(--padding-medium);
}
  

/* HOW TO ? */
  
  .how_to a {
    display: inline-block;
    text-decoration: underline;
    color: black;
    cursor: pointer;
  }

  .step_title {
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-size: var(--font-size-small);
    margin-top: var(--padding-small);
    margin-bottom: var(--padding-small);
}

  .step_text{
    margin-left: 7rem;
    margin-right: 14rem;
  }

  .step_item ul{
    margin-left: 8rem;

    list-style-type: disc;
    list-style-position: inside;
  }



  /* ARCHIVE */
  
  .archive {
    margin-top: 2rem;
  }

  .archive span{
    text-decoration: line-through;
  }
  
  .archive sup {
    vertical-align: super;
    margin-left: 3px;
  }


  
  footer {
    text-align: right;
    color: #333;
  }

  .logo-text{
    position: fixed;
    bottom: 1rem;
    width: 900px;
    cursor: pointer;
  }



  #submissionInfo {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    margin-bottom: 0;
    transition:
        max-height 1s ease-in-out,
        opacity 1s ease-in-out,
        padding 1s ease-in-out,
        margin 1s ease-in-out;
  }
  
  #submissionInfo.show {
    max-height: 4100px; /* or enough to hold the text comfortably */
    opacity: 1;
    margin-bottom: 1rem;
  }

  #panelInfo {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    margin-bottom: 0;
    transition:
        max-height 1s ease-in-out,
        opacity 1s ease-in-out,
        padding 1s ease-in-out,
        margin 1s ease-in-out;
  }
  
  #panelInfo.show {
    max-height: 2000px; /* or enough to hold the text comfortably */
    opacity: 1;
    margin-bottom: 1rem;
  }

  


  .toggle-box {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    margin-bottom: 0;
    transition:
        max-height 1s ease-in-out,
        opacity 1s ease-in-out,
        padding 1s ease-in-out,
        margin 1s ease-in-out;
  }
  
  .toggle-box.show {
    max-height: 2500px;
    opacity: 1;
    margin-bottom: 1rem;
  }

  #read_more span {
    align-self: right;
  }

  #read_more figure {
    display: flex;
  }

  #read_more img {
    width: 700px;
  }

  #read_more figcaption {
    font-size: 1rem;
    writing-mode: vertical-rl;
    height: 550px;
  }

  a{
    color: black;
  }

  a:hover{
    color: #A09BE7;
  }




  /* Archive */

  .publication_container{
    display: flex;
    flex-direction: column;
    gap: .1rem;
    justify-content: left;
  }

  .publication_container .item{
    flex: 0 0 auto;
    width: 50px;
  }

  .publication_container figure img{
    width: 100%;
  }


  .publication_container_images{
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: .1rem;
    justify-content: left;
  }

  .publication_container_info{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: 50px;
  }

  .publication_container_info p{
    font-size: 1rem;
  }



  /* Image preview */
  .image-preview {
    position: fixed;
    top: 0px;
    right: 0px;
    max-width: 90vw;       /* Responsive width cap */
    max-height: 90vh;      /* Prevent going off-screen vertically */
    z-index: 9999;
    display: none;
    pointer-events: none;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .image-preview img {
    max-width: 100%;
    max-height: 80vh;      /* Adjusted to give space for caption */
    height: auto;
    width: 100%;
    display: block;
    object-fit: contain;
  }



  /* background svg animation */
  .svg-background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
  }
  
  .bg-svg {
    position: absolute;
    width: 200px;
    opacity: 0;
    animation: fadeInOut 1s infinite ease-in-out;
  }
  
  @keyframes fadeInOut {
    10% {
        opacity: 1; /* Element appears immediately */
    }
    80% {
        opacity: 1; /* Keep the element visible for the majority of the animation */
    }
    100% {
        opacity: 0; /* Fade the element out */
    }
  }
  



/* Smaller mobile view */
@media (max-width: 480px) {

    :root {
        --primary-bg-color: #fafd28;    
        --font-family: "Director-Regular";
        --font-size-large: 1.05rem;
        --font-size-small: .75rem;
        --padding-small: .5rem;
        --padding-medium: 1rem;
    }

    .bg-svg {
        width: 100px;
    }

    .intro_container{
        letter-spacing: -.05rem;
        hyphens: auto;
    }

    .logo-text{
        bottom: .5rem;
        width: 300px;
    }

    #read_more img {
        width: 300px;
        height: 400px;
    }
    
    #read_more figcaption {
        font-size: .75rem;
        writing-mode: vertical-rl;
        height: 350px;
    }

    .how_to{
        letter-spacing: -.05rem;
    }


    .step_title{
        margin-top: 1.5rem;
        margin-bottom: .5rem;
        text-transform: uppercase;
      }

    .step_text{
        margin-left: 0;
        margin-right: 0;
      }
    
    .step_item ul{
        margin-top: .5rem;
        margin-left: .8rem;
    
        list-style-type: disc;
        list-style-position: inside;
      }
    

      .image-preview {
        position: fixed;
        top: 0px;
        right: 0px;
        max-width: 80vw;       /* Responsive width cap */
        max-height: 70vh;      /* Prevent going off-screen vertically */
        z-index: 9999;
        display: none;
        pointer-events: none;
        overflow: hidden;
        box-sizing: border-box;
      }

}