@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

/* Phones */
@media screen and (max-width:767px) {

  /* Body --> Handles Scrollability */
  body {
    overflow-y: scroll;
    margin: 0;
    overflow-x: hidden;
    font-family: 'Fredoka One';
  }

  /*Removes Tiny Underscore from all links*/
  a {
    text-decoration: none;
  }

  /*Footer*/
  .footer {
    position: relative;
    background: rgb(43, 43, 43);
    width: 100%;
    font-family: 'Fredoka One';
    color: rgb(236, 236, 236);
    z-index: 2000000000;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: smaller;
    box-sizing: border-box;
    text-align: center;


  }

  /* HeaderDiv is set to no display for Mobile Since its replaced with a different header system. */
  .headerDiv {
    display: none;

  }

  /* Styles Images in the Footer */
  img.socials {
    height: 45px;
    width: 45px;
    transition-duration: .1s;
    padding-left: 5px;
    padding-right: 5px;
    image-rendering: crisp-edges;

  }

  /* Grays out the image currently over */
  img.socials:hover {
    filter: grayscale(.25);
    -webkit-filter: grayscale(.25);
  }

  /* Handles Background Collage */
  .bodyDiv {
    width: 100%;
    position: relative;
    height: 100%;
    /* background-image: url("../IMAGES/bubbles_pop_mobile.png");
    background-size: cover;
    background-repeat: repeat; */

  }

  /* Handles Actual Body Content */
  .bodyContentDiv {
    box-shadow: 10px 20px 65px -16px rgb(0, 0, 0), -10px 20px 65px -16px rgb(0, 0, 0);
    /* box-shadow: 0 0 50px #000000; */
    /* font-family: 'Fredoka One'; */
    font-size: smaller;
    height: 100%;
    width: 87%;
    position: relative;
    margin: auto;
    padding: 5%;
    background-color: #FEFEFE;
  }


  /*Navigation Menu */
  /* Hides the Desktop Navigation, allowing us to use the Mobile One Instead */
  .desktopNav {
    display: none;
  }

  /* Header */
  .mobileNav {
    background-color: white;
    box-shadow: 0 15px 18px -16px #111;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9
  }

  /* Logo --> If Using Text */
  .logo {
    font-family: 'Fredoka One';
    display: inline-block;
    color: white;
    font-size: 20px;
    margin-left: 20px;
    margin-top: 15px;
    margin-bottom: 15px;


  }

  /* Logo --> If Using an Image */
  .headLogo {
    width: 240px;
    height: 54px;
  }

  /* Nav menu */
  .nav {
    width: 50%;
    height: 100%;
    position: static;
    background-color: white;
    overflow: hidden;
    z-index: 10;
    font-family: 'Fredoka One';
  }

  /* ID Used for Graying out the current page */
  #mainPage {
    color: rgb(204, 204, 204);
  }

  #mainPage:hover {
    letter-spacing: normal;
  }

  /* Menu Class Editor #1 --> Controls List-Content (Gets Rid of those Ugly Bullets!) */
  .menu {
    list-style: none;
  }

  /* Styles all links in the menu, and sets up their animation akin to that of the desktop, with less exxageration.
  May never be seen by most mobile users, but it'll animated for those with a smaller window on Desktop/Those using touchpad on a smaller device */
  .menu a {
    display: block;
    padding: 20px;
    color: black;
    text-decoration: none;
    transform: translate(-10%, -10%);
    transition-duration: .1s;

  }

  /* Styles and Creates Letter Spacing for Non-Current Page Menu Options */
  .menu a:hover {
    color: rgb(180, 0, 0);
    letter-spacing: 1px;
  }



  /* Navigation Animation (Speed it takes for the Navigation to Open is Not Set, but put XXs in between max-height and the animation type if youd like. */
  .nav {
    max-height: 0;
    transition: max-height ease-out;
    -webkit-transition: max-height ease-out;
    -moz-transition: max-height ease-out;
    -ms-transition: max-height ease-out;
    -o-transition: max-height ease-out;
  }

  /* Menu Icon */
  .hamb {
    cursor: pointer;
    float: right;
    padding: 40px 20px;
  }

  .hamb-line {
    background: black;
    display: block;
    height: 2px;
    position: relative;
    width: 24px;

  }

  .hamb-line::before,
  .hamb-line::after {
    background: black;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }

  .hamb-line::before {
    top: 5px;
  }

  .hamb-line::after {
    top: -5px;
  }

  .side-menu {
    display: none;
  }

  /* Toggle menu icon */

  .side-menu:checked~nav {
    max-height: 100%;
  }

  .side-menu:checked~.hamb .hamb-line {
    background: transparent;
  }

  .side-menu:checked~.hamb .hamb-line::before {
    transform: rotate(-45deg);
    top: 0;

  }

  .side-menu:checked~.hamb .hamb-line::after {
    transform: rotate(45deg);
    top: 0;
  }

  /* Below is just old styling tools */
  /* nav {
        background-color: #FEFEFE;
        box-shadow: 0 15px 18px -16px #111;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
        width: 100%;
        z-index:1;
        /* Pay special attention here! */
  /* position: sticky;
        top: 0px;
        font-family: 'Fredoka One';
        font-size: 20px;
        margin: 0;
        
      }
      
      nav a {
        color: black;
        text-decoration: none;
        margin: 0px 10px;
        
      }
      
      nav a:hover {
        text-decoration: underline;
      }
      
      @media
      (prefers-reduced-motion: no-preference) {
        html {
          scroll-behavior: smooth;
        }
      } */


  /*BODY*/
  /*Displaying of the Mobile Comic Slideshow */
  .newestComic {
    justify-content: center;
    max-width: 800px;
    height: auto;
    display: block;
    position: relative;
    margin: auto;
    /* border: 5px solid #111; */
    margin-bottom: 30px;
  }

  .bodyContentDiv h1 {
    font-size: 26px;
    font-family: 'Fredoka One';
    margin-bottom: 5px;
    margin-top: 0;
  }

  .bodyContentDiv p {
    font-size: 16px;
    font-family: 'Fredoka One';
    margin-top: 0;
  }


  .comicDesc {
    text-align: center;
  }

  .comicDesc p {
    margin-bottom: 30px;
  }

  .comicButtons {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
  }

  .pageButtons {
    display: inline;
    margin-left: auto;
    margin-right: auto;
    /* height: 90px;
    width: 160px; */
    height: auto;
    width: 30%;
    margin-right: 2%;
  }

  img.comicNavigation {
    height: 45px;
    width: 45px;
    padding-left: 10px;
    padding-right: 10px;
    image-rendering: crisp-edges;
  }

  .welcomeContent {
    text-align: center;
  }

  .homeContent {
    display: flex;
    /* align-items: center; */
    align-items: top;
    justify-content: center;
  }


  .homeDecoration {
    width: 25%;
    display: none;
  }

  .newsContent {
    display: inline-block;
    text-align: left;

  }

  .newsContentImage {
    padding-right: 15px;
    width: 100%;
  }

  .newsPost {
    padding-bottom: 30px;
  }

  .characters {
    text-align: center;
  }

  .portrait {
    width: 75%;
    height: auto;
    margin-bottom: 40px;

  }

  .bio {
    text-align: left;
    width: 100%;
  }

  .doodles {
    height: auto;
    width: 80%;
    margin: 10px;
  }

  .collection {
    margin: auto;
    text-align: center;
    max-width: 500px;
    /* min-width: 800px; */
  }

  .comicThumbnail {
    /* margin: auto; */
    height: auto;
    padding-right: 2%;
    padding-left: 2%;
    margin-bottom: 10px;
    width: 175px;
    /* padding: 10px; */
    display: inline-block;
    vertical-align: top;
  }

  .comicThumbnail h2 {
    font-size: 18px;
  }

  .videoCollection {
    margin: auto;
    text-align: center;
    max-width: 800px;
    /* min-width: 800px; */
  }

  .videoThumbnail {
    /* margin: auto; */
    height: auto;
    padding-right: 2%;
    padding-left: 2%;
    margin-bottom: 10px;
    width: 45%;
    /* padding: 10px; */
    display: inline-block;
    vertical-align: top;
  }

  .videoThumbnail h2 {
    font-size: 18px;

  }

  .video {
    display: block;
    margin: 0 auto;
    padding: 15px;
    max-width: 800px;
  }

  .legacy {
    color: rgba(216, 0, 0, 0.836);
    transform: translate(-50%, -50%);
    transition-duration: .1s;
    font-size: medium;
  }

  a:hover.legacy {
    letter-spacing: 1px;
  }

  a h2 {
    color: black;
  }


}





















/* Desktops */
@media screen and (min-width:768px) {
  body {
    overflow-y: scroll;
    /* overflow-x: hidden; */
    margin: 0;
    overflow-x: hidden;
    font-family: 'Fredoka One';
  }

  /*Footer*/
  .footer {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb(43, 43, 43);
    width: 100%;
    font-family: 'Fredoka One';
    color: rgb(236, 236, 236);
    z-index: 10;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;
    text-align: center;
  }



  /* Styles images in footer */
  img.socials {
    height: 50px;
    width: 50px;
    transition-duration: .1s;
    padding-left: 10px;
    padding-right: 10px;
    image-rendering: crisp-edges;
  }

  /* Grays out the image currently over */
  img.socials:hover {
    filter: grayscale(.25);
    -webkit-filter: grayscale(.25);
  }

  /* Omits the MobileNav from Being Seen on Desktop */
  .mobileNav {
    display: none;
  }

  /* Omits the Second Pair of List Elements*/
  #menu {
    display: none;
  }

  /*Styles Desktop Header Div (Neccesary Because only the NavBar is sticky. */
  .headerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;

  }

  /*Sets up Collage in BG */
  .bodyDiv {
    height: 100%;
    width: 100%;
    position: relative;
    background-image: url("../IMAGES/lp.png");
    background-size: auto;
    background-repeat: repeat;
    resize: both;
  }

  /*Main-Website Content */
  .bodyContentDiv {
    /* box-shadow configuration for left, right and bottom*/
    box-shadow: 20px 20px 65px -16px rgb(0, 0, 0), -20px 20px 65px -16px rgb(0, 0, 0);
    /* font-family: 'Fredoka One'; */
    height: 100%;
    width: 75%;
    position: relative;
    margin: auto;
    padding: 2%;
    padding-right: 50px;
    padding-left: 50px;
    background-color: #FEFEFE;

  }


  /*Navigation Menu */

  /*Removes Tiny Underscore from all links*/
  a {
    text-decoration: none;
  }

  /*Logo */
  img.header {
    width: 360px;
    height: 80px;
    image-rendering: crisp-edges;

  }

  /*Identitifies the Current Page */
  #mainPage {
    color: rgb(204, 204, 204);
  }

  /*Styles Desktop NavBar with padding and such  */
  nav.desktopNav {
    background-color: #FEFEFE;
    margin: 0;
    box-shadow: 0 15px 18px -16px #111;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    width: 100%;
    z-index: 1;
    /* Pay special attention here! */
    position: sticky;
    top: 0px;
    font-family: 'Fredoka One';
    font-size: large;
  }

  /*Stylizes Links and Sets up Animation for Non-Current Page */
  nav a {
    color: black;
    text-decoration: none;
    margin: 0px 10px;
    transform: translate(-50%, -50%);
    transition-duration: .1s;

  }

  /*Hover Letter-Spacing and Color */
  nav a:hover.otherPage {
    /* text-decoration: underline; */
    color: rgb(180, 0, 0);
    letter-spacing: 3px;

  }

  /* beats me :/ */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }


  /*BODY*/
  .newestComic {
    justify-content: center;
    max-width: 900px;
    height: auto;
    display: block;
    position: relative;
    margin: auto;
    /* border: 5px solid #111; */
    margin-bottom: 30px;
  }

  .bodyContentDiv h1 {
    font-size: 30px;
    font-family: 'Fredoka One';
    margin-bottom: 5px;
    margin-top: 0;
  }

  .bodyContentDiv p {
    font-size: 18px;
    font-family: 'Fredoka One';
    margin-top: 0;
  }


  .comicDesc {
    text-align: center;
  }

  .comicDesc p {
    margin-bottom: 30px;
  }

  .comicButtons {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
  }

  .pageButtons {
    display: inline;
    margin-left: auto;
    margin-right: auto;
    /* height: 135px;
    width: 240px; */
    height: auto;
    width: 30%;
    margin-right: 2%;
  }

  img.comicNavigation {
    height: 50px;
    width: 50px;
    padding-left: 10px;
    padding-right: 10px;
    image-rendering: crisp-edges;
  }

  .welcomeContent {
    text-align: center;
  }

  .homeContent {
    display: flex;
    /* align-items: center; */
    align-items: top;
    justify-content: center;
  }


  .homeDecoration {
    width: 25%;
    display: inline-block;
  }

  .newsContent {
    width: 65%;
    display: inline-block;
    padding-right: 10%;
  }

  .newsContentImage {
    padding-right: 15px;
    width: 30%;
  }

  .newsPost {
    padding-bottom: 30px;
  }

  .characters {
    max-width: 1000px;
    margin: auto;
  }

  .portrait {
    display: inline-block;
    max-width: 300px;
    width: 30%;
    height: auto;
    vertical-align: middle;
    margin-right: 5%;

  }

  .bio {
    display: inline-block;
    vertical-align: middle;
    width: 60%;
  }

  .doodles {
    height: auto;
    width: 27%;
    margin: 15px;
  }

  .collection {
    margin: auto;
    text-align: center;
    max-width: 1200px;
    /* min-width: 800px; */
  }

  .comicThumbnail {
    /* margin: auto; */
    height: auto;
    padding-right: 2%;
    padding-left: 2%;
    margin-bottom: 10px;
    width: 225px;
    /* padding: 10px; */
    display: inline-block;
    vertical-align: top;
  }

  .comicThumbnail h2 {
    font-size: 18px;

  }

  .videoCollection {
    margin: auto;
    text-align: center;
    max-width: 1500px;
    /* min-width: 800px; */
  }

  .videoThumbnail {
    /* margin: auto; */
    height: auto;
    padding-right: 2%;
    padding-left: 2%;
    margin-bottom: 10px;
    width: 45%;
    /* padding: 10px; */
    display: inline-block;
    vertical-align: top;
  }

  .videoThumbnail h2 {
    font-size: 18px;

  }

  .video {
    display: block;
    margin: 0 auto;
    padding: 30px;
    max-width: 1600px;
  }

  .legacy {
    color: rgba(216, 0, 0, 0.836);
    transform: translate(-50%, -50%);
    transition-duration: .1s;
    font-size: medium;
  }

  a:hover.legacy {
    letter-spacing: 1px;
  }

  a h2 {
    color: black;
  }


}