/*COLOR PALETTE
DARK BLUE BACKGROUND - #081825
DARK PURPLE BACKFROUND - #1f121f;
*/


/*FONTS SETUP*/

@font-face {
    font-family: EXEPixelPerfect;
    src: url(/fonts/exepixelperfect/EXEPixelPerfect.ttf);
  }

  @font-face {
    font-family: Joystix;
    src: url(/fonts/joystix/joystix\ monospace.otf);
  }

  @font-face {
    font-family: Invasion2000;
    src: url(/fonts/invasion2000/INVASION2000.TTF);
  }

/*TEXT FORMATS*/
p {
    font-family: EXEPixelPerfect;
    font-size: 30px;
  }

  h1{
    font-family: Joystix;
    font-size: 48px;
  }

  h2{
    font-family: Joystix;
    font-size: 28px;
  }

  h3{
    font-family: Invasion2000;
  }

  .splash{
    font-family: ExePixelPerfect;
    font-size: 36px;
    color:#ffc7d8
  }

  .splash2{
    font-family: ExePixelPerfect;
    font-size: 36px;
    
  }
/* CONTENT COMPONENTS */

body{
    background-image: url(assets/background-image.jpg);
    background-size: cover;
  }

.wrapper{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.home-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 165px;
  row-gap: 1%;
  column-gap: 1%;
}

.home-grid-2{
  display: grid;
  grid-template-columns: 3;
  grid-template-rows: 5;
  margin-top: 165px;
  row-gap: 1%;
  column-gap: 1%;
}

.footer{
  font-family: EXEPixelPerfect;
  font-size: 24px;
  color: white;
  opacity: 30%;
  padding-top: 25px;
  padding-bottom: 15px;
  text-align: center;
  justify-self: center;
}

#navBar{
  justify-content: space-between;
}


/*GALLERY GRID COMPONENTS */

  /* Masonry gallery container */
  .masonry-gallery {
    margin-top: 165px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Create flexible columns */
    gap: 16px; /* Space between images */
    grid-row: auto; /* Automatically adjust the row height */
    justify-items: center; /* Center images within each grid cell */
  }

  /* Style for images */
  .masonry-gallery img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* comic gallery container */
  .comic-gallery {
    margin-top: 165px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Create flexible columns */
    gap: 16px; /* Space between images */
    grid-row: auto; /* Automatically adjust the row height */
    justify-items: center; /* Center images within each grid cell */
  }

  /* Style for images */
  .comic-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .div-comic-cover{
      font-family: Invasion2000;
      font-size: 24px;
      color: #1f121f;
      border-style: ridge;
      padding: 3%;
      object-fit: cover;
      height: 100%;
      width: 200px;
      background-color: rgb(94, 73, 140); 
      border-color:rgb(86, 49, 115);
        
  }

  /*CONTENT CONTAINERS*/ 
  .container-purple{
    background-color :#bf86dba5;
    border-style: solid;
    border-color: #bf86db95;
    border-radius: 5px;
    max-width: inherit;

  }
  .container-pink{
    background-color :#bc6da2e1;
    border-style: solid;
    border-color: #e795cbce;
    border-radius: 5px;
  }

  .container-teal{
    background-color :#4ef0e8a8;
    border-style: solid;
    border-color: #78f1ebb5;
    border-radius: 5px;
  }

  .container-blue{
    background-color :#9edfffd4;
    border-style: solid;
    border-color: #def4ffd4;
    border-radius: 5px;
  }

  .container-green{
    background-color :#86db96a5;
    border-style: solid;
    border-color: #9bdca7a5;
    border-radius: 5px;
    max-width: inherit;

  }

/*Specialized Containers*/

/*Recent Updates Container*/

  #recentUpdates{
    grid-column-start: 1; 
    grid-column-end: 2;
  }

  .log-entry{
    margin-bottom: 4%;
    padding: 2%;
    background-color: #0d302e;
    border-color: #e9f1f0;
    border-style: solid;
    border-radius: 5px;
    color: white;
   
  }

  .log-entry p{
    font-size: 20px;
  }

  .log-entry h1{
    font-size: 20px;
    font-weight: bolder;
  }

  .log-entry ul{
    font-family: EXEPixelPerfect;
    font-size: 20px;
    margin-left: 2%;
  }

  /*Currently Litening */

  audio::-webkit-media-controls-panel {
    background-color: #c0e3f5d4;
  }

  audio::-webkit-media-controls-current-time-display{
    font-family: EXEPixelPerfect;
    font-size: 24px;
    color: black;
  }

  audio::-webkit-media-controls-time-remaining-display{
    font-family: EXEPixelPerfect;
    font-size: 24px;
    color: black;
  }

  /*Blog*/

  #blogFrame{
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .blog-scroll{
    overflow-y: scroll;
  }

  .blog-entry{
    margin-bottom: 4%;
    padding: 2%;
    background-color: #0e0d30;
    border-color: #e9f1f0;
    border-style: solid;
    border-radius: 5px;
    color: white;
  }

  .blog-entry p{
    font-size: 20px;
  }

  .blog-entry h3{
    font-size: 20px;
    font-weight: bolder;
  }

  .favorite-entry{
    border-bottom-style:dashed;
    border-bottom-width:1%;
    padding: 1%;
    border-bottom-color: #46081b6d;
    display: flex;
    flex-direction: row;
    font-family: EXEPixelPerfect;
    font-size: 18px;
    
  }

  .favorite-entry img{
    border-radius: 5%;
    margin:7%;
  }

  .favorite-entry h1{
    font-family: Invasion2000;
    font-size: 24px;
  }

  .favorite-entry p{
    font-size: 20px;
  }

  .wips-entry{
    border-bottom-style:dashed;
    border-bottom-width:1%;
    padding: 1%;
    border-bottom-color: #084642b0;
    background-color :#75ede7a8;
    font-family: EXEPixelPerfect;
    font-size: 18px;
    
  }

  .wips-entry img{
    border-radius: 5%;
    margin:7%;
  }

  .wips-entry h1{
    font-family: Invasion2000;
    font-size: 24px;
  }

  .wips-entry p{
    font-size: 20px;
  }

  /*EXTRAS*/

  #timeTravel{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
  }

  .SFAlpha{
    padding: 2%;
    background-color: #081825;
    color:#5f9b77;
    border: solid #5f9b77 4px;
    border-radius: 4px;
    margin-bottom: 2%;
  }

  .SFAlpha-btn{
    color:#000000;
    border: solid #5f9b77;
    background-color:#5f9b77;
    border-radius: 5px;
    font-family: EXEPixelPerfect;
    border-color: #9b5f83;
    padding:2%;
    font-size: xx-large;
  }

  .SFAlpha:hover{
    cursor: pointer;
  }

  .SFAlpha-btn:active{
    border-style: inset;
  }

  .SF-2{
    padding: 2%;
    background-color:#7197aa;
    color: black;
    margin-bottom: 2%;
    border-style: inset;
    border-color:#7197aa
  }

  .SF-3{
    padding: 2%;
    background-color :#543464e3;
    border-style: solid;
    border-color: #bf86db95;
    color: black;
    margin-bottom: 2%;
  }

  #sparrowsAndFish{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    font-family: EXEPixelPerfect;
    font-size: 20px;
  }

  #founder{
    font-family: EXEPixelPerfect;
    font-size: 20px;
  }

  #founder p {
    font-family: EXEPixelPerfect;
    font-size: 20px;
    margin-left: 2%;
  }

  #guestbook{
    height: 500px;
  }


    /*FLEX CONTAINERS*/
    .row-container{
        display: flex;
        flex-direction: row;
      }
    
      .column-container{
        display: flex;
        flex-direction: column;
      }
    /*NAV BAR*/
    .nav-container{
        width: 100%;
        position: fixed;
        top: 0;
        background-image:linear-gradient(rgba(255, 255, 255, 0.084),rgb(18, 136, 136));
        border-style: hidden;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    
      }
    
      .header{
        background-image:url(/assets/header-banner-2-cropped.jpg);
        background-size: cover;
        height: 100px;
      }

    /*BUTTONS */

    .button-link{
        text-decoration: none;
          padding: none;
          margin: none;
          height: fit-content;
          width: fit-content;
          color: black;
    }

    .btn{
        font-family: Invasion2000;
        font-size: 24px;
        background-color:#717aaa ;
        border-color: #838cc3;
        padding:10px;
        border-style: outset;
        
      }
    
      .btn:hover{
        border-style: ridge;
        cursor: pointer;
      }
    
      .btn:active{
        border-style: inset;
        background:#46081B;
        color: #717aaa ;
        cursor: pointer;
      }

      /*COMIC FLIPBOOK COMPONENTS*/

      .comic-container{
        display: flex;
        flex-direction: row;
      }

      #comicContainer img { /*remember to use the JS id and not the CSS element class while doing this */
        width: 45%;
        height: auto;
        padding: 1%;
      }

      /*LIBRARY LISTING STYLE*/
      .library-frame{
        grid-column-start: 1;
        grid-column-end: 3;
        display: flex;
        flex-direction: column;
        width: inherit;
      
      }
      .listing{
        background-color :#bf86db9c;
        border-style: solid;
        border-color: #bf86db95;
        padding: 2%;
        margin: 1%;
        border-radius: 5px;
      }

      .publication{
        font-family: EXEpixelperfect;
        font-size: 20px;
      }

      .tags{
        font-family: EXEpixelperfect;
        font-size: 24px;
      }

      .story-link{
        color :#390006;
      }

      .library-dashboard{
        grid-column-start: 3;
        height: 300px;
      }

      @media (max-width: 768px) {

        .wrapper {
            flex-direction: column;
            width: 95vw;
        }

        #navBar{
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-evenly;
          justify-content:center;
        }

        #coverGif{
          display: none;
        }

        #comicContainer{
          flex-direction: column;
        }

        .home-grid{
          margin-top: 220px;
        }

        .masonry-gallery{
          margin-top: 220px;
        }

        .comic-gallery {
          margin-top: 220px;
        }

        .comic-container{
          flex-direction: column;
        }

        .splash{
          display: none;
        }

        #comicContainer img {
          width: 100%;
          height: auto;
        }

        #recentUpdates{
          grid-column-start: 1; 
          grid-column-end: 4;
        }

        #supportStation{
          grid-column-start: 1; 
          grid-column-end: 4;
        }
        
        #currentlyListening{
          grid-column-start: 1; 
          grid-column-end: 4;
        }
        
        .library-frame{
         grid-column-start: 1;
         grid-column-end: 4;
      }

        #wipsContainer{
          display: none;
        }

        #blogFrame{
          grid-column-start: 1;
         grid-column-end: 4;
        }

        #favoritesContainer{
          grid-column-start: 1;
         grid-column-end: 4;
        }

        #timeTravel{
          display: none;
        }

        #sparrowsAndFish{
          grid-column-start: 1;
          grid-column-end: 4;
          font-family: EXEPixelPerfect;
          font-size: 20px;
        }
      
        #founder{
          grid-column-start: 1;
          grid-column-end: 4;
          font-family: EXEPixelPerfect;
          font-size: 20px;
        }

        #guestbook{
          height: 500px;
        }

        h1{
          font-family: Joystix;
          font-size: xx-large;
        }
    }