* {
    margin: 0;
    padding: 0;

}

body {
    color: #fefcc1;
    background-color: black;
    font-family:  "Press Start 2P", system-ui;
    font-size: 10pt;
    line-height: 200%;
    color: #fefcc1;
}

button {
    cursor: pointer;
    background-color: transparent;
    border-radius: 50%;
    border-color: #4488cf;
    border-width: 3px;
    box-shadow: 0px 4px #0099ff ;
    height: 50px;
    width: 100%;
    font-family:  "Press Start 2P", system-ui;
    font-size: 10pt;
    border-style: solid;
    transition:  0.5s;
}

button:active {
    transform: translateY(2px);
    box-shadow: 0px 2px #0099ff ;
}

button:hover {
    transform: translateY(2px);
    box-shadow: 0px 2px #0099ff ;
}

a:visited {
    color: #4488cf;
}
a:hover {
    color:#fefcc1;
}
a{
  color: #4488cf ;
}

/* nav */

.navigation {
  display: grid;
    width: 100vw;
    justify-self: center;
    grid-template-columns: repeat(7, 1fr);
    gap: 2%;
    align-items: center;
    margin-right: 2%;
}

.navigation-bg {
    height: 15vh;
    background-repeat: no-repeat;
    transition: 0.25s;
}

.navigation-bg:hover {
    transform: rotate(-0.4deg);
    cursor: pointer;
}

.nav-insta {
    position: relative;
    z-index: 10;
    animation: colorRotate 1s linear 0s infinite;
}

.home-butt {
  width:17vw;
}

.navigation-mobile {
  display: none;
}

#toggle{
  display: none;
}

.navigation-butt-mobile {
  display: none;
}

button.nav-butt-mobile {
  cursor: pointer;
  background-color: black;
  border-radius: 50%;
  border-color: #4488cf;
  border-width: 3px;
  box-shadow: 0px 4px #0099ff ;
  height: 50px;
  width: 70vw;
  font-family:  "Press Start 2P", system-ui;
  font-size: 10pt;
  border-style: solid;
  transition:  0.5s;
}

.menu-butt-mobile {
  animation: bounce 0.9s infinite;
}

.click-me-modal {
  display: none;
}

@keyframes bounce {
  from {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}


@keyframes colorRotate {
    from {
      color: #6666ff;
    }
    10% {
      color: #0099ff;
    }
    50% {
      color: #00ff00;
    }
    75% {
      color: #ff3399;
    }
    100% {
      color: #6666ff;
    }
}

@media screen and (max-width: 850px) {
    .navigation-bg {
        background-size: cover;
        position: relative;
        z-index: 9999;
    }

    .navigation-mobile:has(#toggle:checked) + .navigation-butt-mobile {
      display: grid;
      columns: 1;
      text-align: center;
      justify-content: center;
      gap: 17%;
      padding-top: 10%;
    }

    .navigation {
      display: none;
    }

    .navigation-mobile {
      display: flex;
      width: 100vw;
      justify-self: center;
      align-items: center;
      position: relative;
    }

    .navigation-butt-mobile {
      position: relative;
      z-index: 9999;
    }

    .home-butt-mobile {
      width:70vw;
    }

    .menu-butt-mobile {
      width:25vw;
    }

  .modal-content {
    text-align: right;
  }

    .click-me-modal {
      display: block;
      position: fixed;
      z-index: 99999;
      background-color: black;
      margin-right: 7vh;
      margin-left: 7vh;
      margin-top: 20vh;
      padding: 1vw;
      padding-bottom: 10vw;
      border: solid #4488cf 2px;
      border-radius: 20px;
    }

    button.close-modal {
      border:none;
      box-shadow: none;
      background: transparent;
      width: 15vw;
      font-family:  "Press Start 2P", system-ui;
      font-size: 10pt;
      color: #fefcc1;
      text-decoration: underline;
    }

    .click-me-p {
      padding-top: 1vw;
      text-align: center;
      color:#4488cf;
    }
}

/* home page */

.mission {
    width: 70vw;
}

.marquee {
    padding-top: 1%;
}

.marquee-text {
    animation: marquee-move-text 15s linear infinite;
}

@keyframes marquee-move-text {
    to {
        transform: translateX(-100%);
    }
}


@media screen and (max-width: 850px) {
    .mission {
        padding-top: 4%;
        width: 100vw;
    }
}

/* events

.event-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    position: absolute;
  }

  .upcoming-events {
    width: 50vw;
  }
  
 .grid-2 {
  width: 50vw;
 }

.event-info {
  height: 30vh;
  text-align: center;
  background-image: url(/graphics/buttons/submit-li-butt.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.1s;
  align-content: center;
}

 */

/* event page v2*/

.event-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 100vw;
  gap: 7%;
  margin-right: 7%;
  margin-left: 7%;
  margin-top: 2%;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.event-poster {
  width: 100%;
  transition: 0.25s;
}

.event-poster:hover {
  transform: rotate(5deg);
  cursor: pointer;
}

.event-upcoming-poster {
  width: 100%;
  transition: 0.25s;
}

.event-upcoming-poster:hover {
  transform: rotate(-5deg);
  cursor: pointer;
  align-self: center;
  justify-self: center;
}

.event-date {
  padding-top: 7%;
}

.event-upcoming-date {
  padding-top: 7%;
  color: #0099ff;
}

.event-poster-indv {
  width: 100%;
  transition:0.25s;
}

.event-poster-indv:hover {
  transform: rotate(-2deg)
}

.event-info {
padding-bottom: 10%;
}

.event-img-grid {
  /* display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5%;
  row-gap: 10%;;*/
  overflow: hidden;
}

.marquee-block {
  --total-marquee-items:3;
  height: 150px;
  width: calc(37% * (var(--total-marquee-items)));
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  padding: 0 0;
}

.marquee-right {
  animation: marqueeRight 10s linear infinite;
  position: absolute;
  width:200%;
}

span {
  width: 50%;
  float: left;
}

@keyframes marqueeRight{
  0% { 
    right: 0%; 
  }
  100% {
   right: -100%; 
  }
}

.marquee-left {
  animation: marqueeLeft 10s linear infinite;
  position: absolute;
  width:200%;
}

@keyframes marqueeLeft{
  0% { 
    left: 0%; 
  }
  100% {
   left: -100%; 
  }
}

.event-img {
  width: 230px;
 display: inline-block;
 transition: all .2s ease-out;
}



.event-grid-indv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10%;
  margin-left: 7%;
  margin-right: 7%;
  padding-top: 2%;
  text-align: center;
  align-items: center;
}

@media screen and (max-width: 850px) {
  .event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 100vw;
    gap: 5%;
    margin-right: 3%;
    margin-left: 3%;
    margin-top: 2%;
    align-items: center;
    justify-items: center;
    text-align: center;
  }

}

/* EVENT PAGE V1
  .past-events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 47vw;
    gap: 2%;
    align-items: center;
  }

  .bouncing-canvas {
    position: absolute;
    width: 100%;
    height: 100%
  }

  .event {
    position: relative;
  }

  .past-event-img {
    width: 100%;
    transition: 0.25s;
  }

  .past-event-img:hover {
    transform: rotate(3deg);
  }

  .event-title {
    padding-top: 2%;
    padding-bottom: 5%;
    color: #4488cf;
  }

  .event-info-text {
    font-weight: 300;
    position: relative;
  }

  .event-img {
    width: 70%;
    transition: 0.25s;
  }
  .event-img:hover {
    transform: rotate(-5deg);
  }

  .egg-spin {
    padding-top: 3%;
    padding-bottom: 5%;
    width: 30%;
  }
*/

/* read */

.title-newest-issue {
      color:#4488cf;
      justify-self: center;
}
  
.title-newest-issue-read {
      color:#4488cf;
      justify-self: center;
}
  
.title-download {
      color:#4488cf;
      justify-self: center;
}
  
.zine-holder {
      height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw
  }
  
.zine {
      position: relative;
      width: 550px;
      height: 550px;
      transition: transform 0.5s;
      z-index: 1;
}
  
.paper {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      perspective: 1500px;
}
  
.front,
.back {
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left;
    transition: transform 0.5s;
}
  
.front {
    z-index: 1;
    backface-visibility: hidden;
}
  
.back {
    z-index: 0;
}
  
.front-content,
.back-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.back-content {
    transform: rotateY(180deg)
}
  
  /* Paper ORDER */
  #p1 {
      z-index: 13;
    }
    
    #p2 {
      z-index: 12;
    }
    
    #p3 {
      z-index: 11;
    }
    
    #p4 {
      z-index: 10;
    }
    
    #p5 {
      z-index: 9;
    }
    
    #p6 {
      z-index: 8;
    }
    
    #p7 {
      z-index: 7;
    }
    
    #p8 {
      z-index: 6;
    }
    
    #p9 {
      z-index: 5;
    }
    
    #p10 {
      z-index: 4;
    }
    
    #p11 {
      z-index: 3;
    }
    
    #p12 {
      z-index: 2;
    }
    
    #p13 {
      z-index: 1;
    }
    
    /* Paper FLIP */
.flipped .front,
.flipped .back {
      transform: rotateY(-180deg);
    }
  
.inbook-img {
  width: 550px;
  height: 550px;
  object-fit: cover;
}
    
    /* Arrow Buttons */
  
    
.left-arrow-button {
      color: #4488cf;
      font-weight: bold;
      font-size: 30pt;
      position: relative;
      right: 20vw;
}
  
    
.right-arrow-button {
      color: #4488cf;
      font-weight: bold;
      font-size: 30pt;
      position: relative;
      left: 20vw;
}

.right-arrow-button:hover, .left-arrow-button:hover {
    cursor: pointer;
}

.read-list {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    margin-left: 15%;
    margin-right: 15%;
    padding-bottom: 2%;
}

.read-list a:visited {
    color: #fefcc1;
}

.read-list a:link {
    color: #fefcc1;
}

.read-list a:hover {
    color: #4488cf;
}


@media screen and (max-width: 850px) {
  .zine-holder {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw
  }

  .zine {
      position: relative;
      width: 150px;
      height: 150px;
      transition: transform 0.5s;
      z-index: 1;
  }

  .inbook-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
  }
}

/*  submit */

.submit {
    display: block;
}

.submission-li {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5%;
    justify-self: center;
    justify-content: center;
    padding-top: 0%;
    padding-bottom: 5%;
    width: 100vw;
    height: 20vh;
}

.submission-li-butt {
    text-align: center;
    align-content: center;
    width: 30vw;
    background-image: url(graphics/buttons/submit-li-butt.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition:0.1s;
}

.submission-li-butt:hover {
    background-image: url(graphics/buttons/submit-li-buttactive.webp);
}


.title-how-to {
    justify-self: center;
    color: #4488cf;
    position: relative;

}

.how-to {
    margin-left: 5%;
    margin-right: 5%;
    font-weight: 300;
    position: relative;
}

@media screen and (max-width: 850px) {
    .submission-li {
      display: block;
      position: relative;
      z-index: 0;
    }

    .submission-li-butt {
        width: 100vw;
        height: 20vh;
    }

    .title-how-to {
        padding-top: 40vh;
    }
}

/* donate */

.video-ad {
    padding-top: 2%;
    position: relative;
    width: 100vw;
    text-align: center;
  }
  
  .kofi-li {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 25pt;
  }
  
  @media screen and (max-width: 850px) {
    a.kofi-li {
      font-size: 15pt;
      top: 35%;
      left: 50%;
      transform: translateX(-50%);
    }

    .merch-descrp {
      text-align: center;
      font-weight: 300;
      width: 80vw;
      align-self: center;
      justify-self: center;
    }

    .merch-ad {
      width: 100%;
      
    }

  }
  
  .merch-title {
    padding-top: 2%;
    text-align: center;
    color: #4488cf;
  }
  
  .merch-indv {
    padding-top: 2%;
    position: relative;
    text-align: center;
  }
  
  .merch-descrp {
    text-align: center;
    font-weight: 300;
    padding-bottom: 
  }
  
  .merch {
  
  }
  
  .merch-indv-2 {
    padding-top: 24%;
    padding-bottom: 2%;
    position: relative;
    text-align: center;
  }
  
  .merch-indv-3 {
    padding-top: 24%;
    padding-bottom: 2%;
    position: relative;
    text-align: center;
  }
  
  .merch-indv-4 {
    padding-top: 18%;
    padding-bottom: 2%;
    position: relative;
    text-align: center;
  }
  
  .merch-price {
    text-align: center;
    font-weight: 300;
    padding-bottom: 2%;
  }

  .pins-img {
    width: 50vw;
  }
  
  /* Img carousels */
  /*underwear*/
  .underwear {
    position: relative;
    width: 100vw;
    height: ;
    margin: 0 auto;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  
  .underwear-img {
    width: 100%;
  }
  .underwear-track-cont {
    text-align:center;
    grid-column: 2 / 4;
  }
  
  .underwear-track {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .underwear-slide {
    grid-column: 2 / 4;
    position: absolute;
    opacity: 0;
    text-align:center;
    object-fit: contain;
  }
  
  .underwear-slide[data-active] {
    opacity: 1;
  }
  
  .underwear-butt--right {
    position: relative;
    color:#4488cf;
    font-size: 30pt;
    padding-top:65%;
  }
  
  .underwear-butt--left {
    position: relative;
    color: #4488cf;
    font-size: 30pt;
    padding-top: 65%;
  }
  
  /*tshirt2*/
  .tshirt2 {
    position: relative;
    width: 100vw;
    height: ;
    margin: 0 auto;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  
  .tshirt2-img {
    width: 100%;
  }
  .tshirt2-track-cont {
    text-align:center;
    grid-column: 2 / 4;
  }
  
  .tshirt2-track {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .tshirt2-slide {
    grid-column: 2 / 4;
    position: absolute;
    opacity: 0;
    text-align: center;
    object-fit: contain;
  }
  
  .tshirt2-slide[data-active] {
    opacity: 1;
  }
  
  .tshirt2-butt--right {
    position: relative;
    color:#4488cf;
    font-size: 30pt;
    padding-top:65%;
  }
  
  .tshirt2-butt--left {
    position: relative;
    color: #4488cf;
    font-size: 30pt;
    padding-top: 65%;
  }
  
  /*tshirt1*/
  
  .tshirt1 {
    position: relative;
    width: 100vw;
    height: ;
    margin: 0 auto;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  
  .tshirt1-img {
    width: 100%;
  }
  .tshirt1-track-cont {
    text-align:center;
    grid-column: 2 / 4;
  }
  
  .tshirt1-track {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .tshirt1-slide {
    grid-column: 2 / 4;
    position: absolute;
    opacity: 0;
    text-align: center;
    object-fit: contain;
  }
  
  .tshirt1-slide[data-active] {
    opacity: 1;
  }
  
  .tshirt1-butt--right {
    position: relative;
    color:#4488cf;
    font-size: 30pt;
    padding-top:50%;
  }
  
  .tshirt1-butt--left {
    position: relative;
    color: #4488cf;
    font-size: 30pt;
    padding-top: 50%;
  }
  
  .underwear-butt--left:hover, .underwear-butt--right:hover,
  .tshirt1-butt--left:hover, .tshirt1-butt--right:hover,
  .tshirt2-butt--left:hover, .tshirt2-butt--right:hover {
    cursor: pointer;
  }

  
/* Contact*/

.contact-body {
    justify-self: center;
    align-self: center;
    justify-items: center;
    align-items: center;
    width: 100vw;
  }
  
  .contact-text {
    font-weight: 300;
  }
  
  .socialmedia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 50%;
    justify-self: center;
    align-self: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding-top: 2%;
  }
  .social-div {
    display:flex;
    width:70%;
    align-self: center;
    justify-self: center;
    align-self: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    animation: colorRotate 1s linear 0s infinite;
  }
  
  .social-li {
    width: 70%;
    align-self: center;
    justify-self: center;
    transition: 0.25s;
  }
  
  .social-li:hover {
    width:80%;
  }
  
  .the-eggs {
  justify-self: center;
  padding-top: 3%;
  }
  
  .the-eggs-img {
    justify-self: center;
    align-self: center;
    width: 20vw;
  }
  
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-left: 5%;
    margin-right:5%;
    align-items: center;
    justify-items: center;
    gap:2%;
  }
  
  .contact-indv {
  }
  
  .contact-img {
    width:100%;
    transition: 0.5s;
  }
  
  .contact-img:hover {
    width:95%;
  }
  
  .contact-info {
    width:100%;
  }
  
  .join {
    padding-top: 20%;
    padding-bottom: 10%;
    text-align: center;
  }

@media screen and (max-width: 850px) {
  .the-eggs-img {
    justify-self: center;
    align-self: center;
    width: 70vw;
  }
  
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin-left: 5%;
    margin-right:5%;
    align-items: center;
    justify-items: center;
    gap:0.5%;
  }
  .join {
    padding-top: 140%;
    padding-bottom: 10%;
    text-align: center;
    justify-self: center;
    align-self: center;
    justify-items: center;
    align-items: center;
    width: 80vw;
  }

  .contact-body {
    justify-self: center;
    align-self: center;
    justify-items: center;
    align-items: center;
    width: 80vw;
  }
  .socialmedia {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: 50%;
    justify-self: center;
    align-self: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding-top: 3%;
  }
}