/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*home page stuff*/

.logo {
  display: flex;
  align-items: center; /* keeps them vertically aligned*/
  justify-content: center; /* centers on page*/
  gap: 2px;
  flex-wrap: nowrap;
  max-width: 100%;
}

.logo img{
  width: auto;
  max-width:100%;
  flex-shrink: 1;
  min-width: 0;
  transition: transform 0.2s ease, filter 0.2s ease;
 }
 
 @keyframes logo-idle {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(0.5px, -0.5px); }
  100% { transform: translate(0, 0); }
}

@keyframes logo-jitter {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(2px, -1px); }
  40%  { transform: translate(-1px, 2px); }
  60%  { transform: translate(2px, 1px); }
  80%  { transform: translate(-2px, -1px); }
  100% { transform: translate(0, 0); }
}
  
 .logo-center:hover {
  animation: logo-jitter 0.55s steps(2) infinite;
                
               /*transition: translateY(-4px) rotate(-2deg);
               filter: contrast(130%) brightness(120%);*/
 }
 
.logo-left,
.logo-right {
  height: 10vw;
  width: auto;
  max-height: 110px;
  min-height: 40px;
}

.logo-center{
  height: 14vw;
  max-height: 160px;
  min-height: 60px;
  width: auto;
  animation: logo-idle 2s steps(2) infinite;
}

@keyframes star-jitter {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(4px, -3px) rotate(3deg); }
  100% { transform: translate(-4px, 3px) rotate(3deg); }
  }
#star-home {
  display: block;
  margin: 0 auto 20px auto;
  width: 40vw;
  max-width: 600px;
  min-width: 200px;
  height: auto;
  animation: star-jitter 1s steps(1) infinite;
}

.star-wrapper {
    position: relative;
    width: fit-content;
    margin: 60px auto;
  }
  
#star-home {
  display: block;  
  max-width: 90vw;
  height: auto;
  }
  
/* all logos */
.star-link {
    position: absolute;
    transform: translate(-50%, -50%); 
  }

.star-link img {
    width: clamp(40px, 6vw, 80px);
    height: auto;
    transition: transform 0.15s steps(2);
  }
  
.about-link img {
    width: 22vw;
   
  }
  
.zines-link img {
    width: 22vw;
    
  }
  
.articles-link img {
    width: 27vw;
   
  }
  
.about-link img,
.zines-link img,
.articles-link img {
    transition: transform 0.2s steps(2), filter 0.2s ease;
  }
  
.about-link img:hover,
.zines-link img:hover,
.articles-link img:hover {
    transform: scale(1.05);
    filter: 
    brightness(120%) contrast(120%) drop-shadow(0 0 6px rgba(255,255,255,0.8)) drop-shadow(0 0 12px rgba(255,255,255,0.6));
  }
  
/*positions to tweak*/

.top-right { top: 32%; left: 133%;}
.bottom-right { top: 103%; left: 95%;}
.bottom-left { top: 103%; left: 8%;}

/*sidebar nav*/

.innerpage {
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 10;
}

.zipper-bg {
  height: 100vh;
  width: auto;
  display: block;
  z-index: 1;
}


.sidebar-content {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.sidebar-star {
  width: 90px;
  margin-bottom: 20px;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.sidebar a {
  color: white;
  text-decoration: none;
  font-family: "p22-folk-art-block", sans-serif;  
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  letter-spacing: 1px;
  transition: transform 0.15s ease, text-shadow 0.15s ease, color 0.15s ease;
}

.sidebar a:hover {
  color: #ff7a00;
  transform: scale(1.30);
  text-shadow: 
    0 0 5px #ff7a00,
    0 0 10px #ff7a00,
    0 0 20px #ff7a00;
}

/*body paragraph stylings*/

.page-content {
  margin-left: 20%;
  padding: 5%;
}
  
  html, body {
  margin: 0;
  padding: 0;
}

/*zine page*/

.text-cloth {
  font-family: "sunflower", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: white;
  font-size: 1.2vw;
  letter-spacing: 0.6px;
  line-height: 1.5;
  text-align: center;
  text-shadow: 1px 1px black; 
}

.text-cloth a {
  color: white;

}

.text-cloth a:hover{
  color: #dc713b; 
}

.zine-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 50px;
}

.zine-row img {
  width: 100%;
  max-width: 250px;
  height: auto;
 filter: drop-shadow(0 8px 15px rgba(0,0,0,0.50));
  transition: transform 0.2s ease;
 
}

.zine-row a {
  flex: 1;
  text-align: center;
}

.zine-row img:hover {
  transform: scale(1.15);
  animation: zine-jitter 1s steps(1) infinite;
}

@keyframes zine-jitter {
  0%   { transform: scale(1.15) translate(0, 0) rotate(0deg); }
  50%  { transform: scale(1.15) translate(4px, -3px) rotate(3deg); }
  100% { transform: scale(1.15) translate(-4px, 3px) rotate(3deg); }
  }
/*about page*/

.paper-container {
  background-image: url(paper-bg.jpg);
  background-size: contain;
  background-repeat: repeat;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  
  max-width: 650px;
  width: 70%;
  margin: 60px auto 0;
  padding: 1px 50px;
}

.paper-container p {
  font-family: "sunflower", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.6px;
  line-height: 1.7;
  font-size: 15px;
}

.paper-container a {
  color: black;
}

.paper-container a:hover {
  color: #dc713b; 
}

.paper-container h1 {
  font-family: p22-folk-art-block, sans-serif;
  font-weight: 900;
  font-size: 45px;
  color: #dc713b;
  -webkit-text-stroke: 0.8px #dc713b;
  -webkit-text-stroke: 0.4px black;
  text-shadow: 1.5px 1.5px 0px black; 
  transform: rotate(-0.5deg);
  letter-spacing: -4px;
  margin-bottom: 10px;

}

.heart02-gif {
  width: 6%;
  max-width: 24px;
  height: auto;
  vertical-align: middle;
}

.h1-star {
  width: 8%;
  max-width: 40px;
  height: auto;
  vertical-align: middle;
}

.scroll-gif {
  width: 18%;
  max-width: 90px;
  height: auto;
  vertical-align: middle;
}

.snorlax-gif {
  width: 18%;
  max-width: 90px;
  height: auto;
  vertical-align: middle;
}

.conspirate-jpg {
  width: 25vw;
  height: auto;
  align-items: center;
  margin: 0px 130px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transform: rotate(0.9deg);
}
  
body {
  background-image:url(images/denim-2.png);
  font-family: Verdana;
}

/*responsive stuff*/

/* For tablets and smaller screens */
@media (max-width: 1024px) {
  .page-content {
    margin-left: 25%;
    padding: 3%;
  }
  
  .sidebar nav {
    gap: 12px;
  }
  
  .sidebar a {
    font-size: 20px;
  }

  .paper-container p {
    font-size: 13px;
  }
  
  .paper-container h1 {
    font-size: 35px;
  }
}


/* For phones / very small screens */
@media (max-width: 600px) {
  .page-content {
    margin-left: 0; /* no left sidebar */
    margin-top: auto;
    padding: 3%;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    z-index: auto;
  }
  
  .sidebar-content {
    display: flex;
    position: relative;
    justify-content: space-around;
    background-color: black;
    padding: 10px 0;
  }
  
  .sidebar nav {
    flex-direction: row;
    gap: 10px;
    width: 100%;
    justify-content: space-around;

    
  }
  
  .sidebar a {
    font-size: 16px;
  }
  
  .zipper-bg{
    display: none;
  }
  
  .paper-container {
    padding: 15px;
    margin: 20px 50px;
    max-width: 100%;
  }
  
   .paper-container p {
    font-size: 11px;
  }
    
     .paper-container h1 {
    font-size: 29px;
  }
  }