/* This is css for article 1 */

:root{
    --base-size:16px;
	--padding:12px;
	--body-black:#222222;
	--red:#DD1E26;
	--background:#FFF8E5;
}

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

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

h1{
    font-family: 'Anton';
    color: var(--background);
    -webkit-text-stroke: 1px #DD1E26;
    text-align: center;
    font-size: calc(var(--base-size)*2.5);
    text-transform: lowercase;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color: var(--background);

}

h2{
    font-family: 'Anton';
    color: var(--background);
    -webkit-text-stroke: 1px #DD1E26;
    text-align: center;
    margin: var(--padding);
    background-color: var(--background);

}

h3{
    font-family: 'Courier New', Courier, monospace;
    font-size: calc(var(--base-size)*1.2);
    text-align: center;
    color: var(--red);
    font-weight: bold;
    background-color: var(--background);

}


@keyframes strike-through {
  0% {
    width: 0; /* Start with no line */
    left: 0; /* Start at the beginning of the text */
  }
  50% {
    width: 100%; /* Line fully spans the text */
    left: 0; /* Centered across the text */
  }
  100% {
    width: 0; /* Line disappears */
    left: 100%; /* Moves off the text */
  }
}

.Title {
  position: relative; 
  display: inline-block; 
  -webkit-text-stroke: 2px #FFF8E5;
  text-decoration: none; 
  overflow: hidden;
}

.Title::before,
.Title::after {
  content: '';
  position: absolute;
  height: 0.1px; /* Thickness of the striking lines */
  background:var(--background); /* Color of the striking lines */
  width: 0; /* Start with no width */
  top: 60%; /* Position at the middle of the text */
  left: 0; /* Start at the beginning of the text */
  transform: translateY(-50%); /* Center the lines vertically */
  z-index: 10; /* Ensure the lines appear in front of the text */
}

.Title::before {
  animation: strike-through 3s infinite; 
  animation-fill-mode: forwards; 
}

.Title::after {
  animation: strike-through 3s infinite 1.5s; 
  animation-fill-mode: forwards; 
}

.Title span::after {
  content: '';
  position: absolute;
  height: 10px; /* Thickness of the third line */
  background: #000000; /* Color of the third line */
  width: 0;
  top: 60%; /* Slightly offset vertically */
  left: 0;
  transform: translateY(-50%);
  z-index: 10;
  animation: strike-through 2s infinite 15s; /* Stagger the third line */
}


   .Title span {
    display: block; 
  }
  
  .Title span:nth-child(2),
  .Title span:nth-child(3) {
    margin-top: -30px; 
  }

  .NotTitle{
    letter-spacing: 20px;
    text-align: center;
  }

 

 .quote{
        font-family: 'Climate Crisis';
        color: var(--background);
        -webkit-text-stroke: 1px #DD1E26;
    }


    cite{
      display: block;
      text-align: center;
      margin-top: calc(var(--base-size)*0.8);
      margin-bottom: calc(var(--base-size)*0.8);
      line-height: 0.3;

}

blockquote{
            position: relative;
            font-family: 'Anton';
            font-size: calc(var(--base-size)*1.4);
            text-align: left;
            color: var(--red);
            margin: var(--padding);
            position: relative;
            padding: 20px 0;   
            margin-top: 80px;  
 }

 .big-quote {
            position: absolute; 
            top: -90px; 
            left: -1px;
            font-size: calc(var(--base-size)*10);
            color: var(--red); 
            font-family: 'Anton'; 
 }
          

/* 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)*2);
  }

  
  .Title {
    margin-top: calc(var(--padding)*2);
    margin-top: calc(var(--padding)*2);
    font-size: calc(var(--base-size)*2.5);
    animation: bounce 2s ease-in-out infinite;
    background-color: var(--red);
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0); /* Default position */
    }
    50% {
      transform: translateY(-30px); /* Moves slightly up */
    }
  }

  .NotTitle{
    font-size: calc(var(--base-size)*2.8);

  }

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

  header section {
    margin-top: 50px;
  }
   
  .Title::before,
  .Title::after {
    content: '';
    display: none; 
  }

        h2{
        font-size: calc(var(--base-size)*3);
        position: relative; 
        animation: strikethrough 2s ease-in-out infinite;
        }

        @keyframes strikethrough {
          0%, 20% {
            text-decoration: none; /* Normal state */
            color: var(--red);
          }
          50% {
            text-decoration: line-through; /* Add strikethrough */
            color: var(--red); /* Keep color consistent */
          }
          80%, 100% {
            text-decoration: none; /* Revert to normal */
            color: var(--red);
          }

        }

h3{
  font-size: calc(var(--base-size)*1.5);
}

.quote{
  color: #000000;
  -webkit-text-stroke: 0px #000000;
  text-align: left;
  margin: 24px 12px;
}




}







/* Starting my desktop media queries */

     @media (min-width: 800px) {

        h1{
            margin-top: 40px;
            margin-bottom: 60px;
        }

      .Title{
        font-size: calc(var(--base-size)*6);
      }
      
      .Title span:nth-child(2),
      .Title span:nth-child(3) {
        margin-top: -80px; 
      }

/* big title animation thing */
.Title span {
    display: block;
    opacity: 1; 
    transform: translateY(20px); 
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .Title:hover span {
    opacity: 1;
    transform: translateY(0); 
  }
  
  .Title span:nth-child(1) {
    transition-delay: 0s; 
  }
  
  .Title span:nth-child(2) {
    transition-delay: 0.2s; 
  }
  
  .Title span:nth-child(3) {
    transition-delay: 0.4s;
  }

  
      .NotTitle{
        font-size: calc(var(--base-size)*4.5);
      }

     


p {
    font-size: 20px;
    margin: 0 auto; /* Center horizontally */
    margin-top: 20px;
    width: 50vw; /* Limit the width to half the viewport */
  }

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


  blockquote {
    font-family: 'Anton';
    font-size: calc(var(--base-size) * 2.2);
    line-height: 1.6;
    text-align: left; 
    color: var(--red);
    width: 60vw; 
    margin: 0;
    position: relative;
    margin-top: 100px;
    margin-left: 80px;
    display: inline-block;
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
    border-left: 10px solid transparent;
    padding-left: 20px;
    transition: border-color 0.8s ease-in-out;
  }

  /* blockquote:hover {
    transform: scale(1.05); 
    box-shadow: 0 5px 15px rgba(254, 233, 233, 0.2); 
  } */
  blockquote:hover {
    border-left-color: var(--red); 
    /* transform: scale(1.1); */
  }
.quote{
    font-size: calc(var(--base-size) * 2);
    line-height: 1.6;
    text-align: left;
}

  .big-quote{
    display: none;
  }
 
  blockquote:hover .big-quote {
    /* transform: scale(1.6);  */
    display: none;
  }

  /* other headings for desktop */
  h2 {
    font-family: 'Anton';
    color: var(--background);
    /* -webkit-text-stroke: 1px #DD1E26; */
    color: #000000;
    -webkit-text-stroke: 1px #000000;
    text-align: center;
    font-size: calc(var(--base-size) * 4);
    margin: var(--padding) auto;
    margin-top: calc(var(--base-size)*4);
    margin-bottom: calc(var(--base-size)*4);
    width: 50vw; 
    /* display: inline-block; */
    transition: transform 0.5s ease;
 
  }

  h2:hover {
    transform: scaleX(1.2);
    color: var(--red);
    -webkit-text-stroke: 1px #DD1E26;
  }

  h3 {
    font-family: 'Courier Prime', Courier, monospace;
    font-size: calc(var(--base-size) * 2);
    text-align: center;
    color: var(--red);
    font-weight: bold;
    margin: var(--padding) auto;
    width: 50vw; 
  }

  .glyph-one .button-icon {
    transform: rotate(45deg); 
  }
  
  .glyph-one .glyph div {
    background-color: #000000; 
    transition: background-color 0.3s ease;
}

  


     }