/* This is css for article 3 */


header{
    background-color: var(--background);
}

h1{
    text-transform: lowercase;
}
.title-container {
    text-align: center; /* Center-aligns everything */
  }

.Title{
font-size: calc(var(--base-size)*4.2);
margin-top: 0;
margin-bottom: 0;
line-height: 1; 
}

.NotTitle{
    font-size: calc(var(--base-size)*2);
    letter-spacing: 20px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 3;
  }
  

  .Title, .NotTitle {
    display: block;
  }


.line{
    display: block;
    height: calc(var(--base-size)*0.5);
    background-color: #DD1E26;
    width: 80%;
    margin: 1px auto;
}  

.NotTitle-container {
    position: relative;
    display: inline-block; /* Keeps it aligned with text */
}

.NotTitle {
    position: relative;
    z-index: 2; /* Place text above the lines */
    font-size: 3rem; /* Example, adjust as needed */
}

.skewed-lines {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1; /* Place behind the text */
    width: 100%; /* Match text width */
}

.lines {
    display: inline-block;
    height: 4px; /* Line thickness */
    width: 80%; /* Width of the lines */
    background-color: #DD1E26; /* Line color */
    margin: 15px 0; /* Spacing */
    opacity:20%;
}

.lines:nth-child(1) {
    transform: rotate(5deg);
}

.lines:nth-child(2) {
    transform: rotate(-2deg);
}

.lines:nth-child(3) {
    transform: rotate(-5deg);
}
.lines:nth-child(4) {
    transform: rotate(2deg);
}


cite{
    display: block;
    }
    

blockquote{
    font-family: "Anton";
    font-size: calc(var(--base-size)*2);
}

/* MOBILE MEDIA QUERIES */
@media (max-width:800px) {

    header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh; 
      padding: 10px; 
      gap: calc(var(--padding)*6);
    }

    cite{
        font-size: calc(var(--base-size)*1.2);
      }

      .skewed-lines .lines {
        width: 100%;
        height: 8px;
        margin: 12px 0; 
        background-color: #DD1E26; 
        animation: flickerLines 1s infinite linear;
        opacity: 100%;
      }
      
      @keyframes flickerLines {
        0%, 20% {
          background-color: #DD1E26; 
        }
        50% {
          background-color: #000000; 
        }
        70%, 100% {
          background-color: #DD1E26; 
        }
      }
      

      h2{
        font-size: calc(var(--base-size)*2);
        position: sticky;
        top: 0; 
        z-index: 1;
        transition: opacity 0.3s ease; 
        opacity: 1;
      }

      .blockquote-container:in-view ~ h2 {
        opacity: 0; 
      }

      .blockquote-container{
        z-index: 2;
        margin: 24px 12px;
        display: inline-block;
        position: relative;
        background: linear-gradient(to right, transparent 50%, #000000 50%);
        background-size: 200% 100%;
        animation: sweep 4s ease-in-out infinite;
      }

      .blockquote-rotate span {
        font-size: calc(var(--base-size)*3);
        color: var(--red);
        
      }
      
      @keyframes sweep {
        0%, 100% {
          background-position: 100% 0;
        }
        50% {
          background-position: 0 0;
        }
      } 
      


      


}  

/* DESKTOP QUERIES */
@media (min-width: 800px) {
    /* navigation button on desktop only */
  .nav-button {
    display: block; 
  }

  h2{
    position: sticky;
    top: 0;
    z-index: 1;
    margin-top: calc(var(--padding)*3);
    margin-bottom: calc(var(--padding)*3);
  }

.title-container{
    margin-top: 40px;
}
  .Title {
    font-size: calc(var(--base-size) * 8.5); /* Increase size slightly */
    margin-bottom: 5px; /* Reduce spacing */
  }
  
  .NotTitle {
    font-size: calc(var(--base-size) * 5.2); /* Slightly larger for emphasis */
    letter-spacing: 25px; /* Adjust for balance */
    margin-top: 5px; /* Reduce top margin */
  }
  
  .line {
    height: calc(var(--base-size) * 0.8); /* Thicker */
    width: 60vw; /* Slightly wider for better balance */
    margin: 5px auto; /* Reduce spacing */
  }
  
  .lines {
    height: 15px; /* Thicker lines */
    width: 100%; /* Match full width */
    margin: 10px 0; /* Reduce vertical spacing */
    opacity: 20%; /* Slightly darker */
  }
  

/* Keyframes for Flicker Effect */
@keyframes flicker {
    0%, 100% {
      opacity: 1;
      filter: brightness(1);
    }
    10% {
      opacity: 0.6;
      filter: brightness(1.2);
    }
    20% {
      opacity: 0.9;
      filter: brightness(0.8);
    }
    30% {
      opacity: 0.4;
      filter: brightness(1.5);
    }
    50% {
      opacity: 1;
      filter: brightness(1);
    }
    70% {
      opacity: 0.8;
      filter: brightness(1.3);
    }
    90% {
      opacity: 0.95;
      filter: brightness(0.9);
    }
  }
  

  .NotTitle-container, .lines {
    opacity: 1;
    filter: brightness(1);
    transition: opacity 0.3s ease, filter 0.3s ease; /* Smooth fallback when not hovered */
  }
  
 
  .NotTitle-container:hover, .lines:hover {
    animation: flicker 1.5s ease-in-out infinite; /* Flicker triggers on hover */
    
  }


  h2{
    font-size: calc(var(--base-size)*5);
  }

  
  
cite {
    letter-spacing: 2px;
    display: block;
    margin-top: 10px;
  }
  

cite:nth-of-type(1) {
    margin-top: calc(var(--base-size)*6);
    }
    
 cite:nth-of-type(2) {
      margin-top: calc(var(--base-size)*2);
      }
  
  
  
    p {
      font-size: 20px;
      margin: 0 auto; /* Center horizontally */
      margin-top: 20px;
      width: 50vw; /* Limit the width to half the viewport */
    }


    p:nth-of-type(1) {
        margin-top: 120px;
      }



.blockquote-container {
    text-align: center; 
    position: relative;
    overflow: hidden; 
    padding: 2rem;
    margin-top: calc(var(--padding)*3);
    margin-bottom: calc(var(--padding)*3);
  }
  

.blockquote-rotate span {
    display: inline-block;
    transition: transform 0.3s ease;
    transform: rotate(0deg); 
    color: #DD1E26;
    font-size: 4rem;
  }


  .blockquote-effect span {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease; 
    opacity: 1; 
    transform: scale(1) translate(0, 0) rotate(0); 
  }
  

  .blockquote-container:hover span:nth-child(1) {
    transform: translate(-40px, -30px) rotate(-15deg) scale(1.2); 
  }
  
  .blockquote-container:hover span:nth-child(2) {
    transform: translate(0, -50px) rotate(10deg) scale(1.1);
  }
  
  .blockquote-container:hover span:nth-child(3) {
    transform: translate(50px, 40px) rotate(20deg) scale(1.3); 
  }
  
  .blockquote-container:hover span:nth-child(4) {
    transform: translate(-30px, 50px) rotate(-10deg) scale(1.2);
  }
  
  .blockquote-container:hover span:nth-child(5) {
    transform: translate(40px, -20px) rotate(5deg) scale(1.15);
  }
  
  
  
  .blockquote-rotate span:nth-child(1):hover {
    transform: rotate(-5deg);
  }
  .blockquote-rotate span:nth-child(2):hover {
    transform: rotate(5deg);
  }
  .blockquote-rotate span:nth-child(3):hover {
    transform: rotate(-10deg);
  }
  .blockquote-rotate span:nth-child(4):hover {
    transform: rotate(10deg);
  }
  
  .glyph-three .glyph div:nth-child(1) {
    transform: rotate(10deg); /* Skew first line slightly */
    transition: transform 0.3s ease;
    background-color: #000000; 
  
  }
  
  .glyph-three .glyph div:nth-child(2) {
    transform: rotate(-10deg); /* Skew second line in the opposite direction */
    transition: transform 0.3s ease;
    background-color: #000000; 
  
  }
  
  .glyph-three .glyph div:nth-child(3) {
    transform: rotate(15deg); /* Skew third line a bit more */
    transition: transform 0.3s ease;
    background-color: #000000; 
  
  }


  }