* {
    margin: 0;
    padding: 0;
    font-family: "Comic Relief";
}

body {
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
    width: 90%;
    height: 90%;
    /*Remove just this line of CSS if you want to be able to scroll the site again instead of in a box  (You'll need to remove the scroll on the box to make it get longer, or make another box below it, etc)*/
    text-align: center;
    padding: 10px; 
}

h1 {
    margin-top: 15px;
    font-size: 4vh;
}

h2 {
    font-size: 3vh;
}


/* home 1 is the first box on the page that currently contains mothra. home 2 is the box at the bottom of the page below "Byeeee"
/* These two boxes are just set up so you can add whatever to them. */

.home1 {
    width: 65%;
    height: 20%;
    background-color: #BFEDA6;
    border: 1px solid #7C72D3;
    margin-left: auto;
    margin-right: auto;
    overflow-y: scroll;
    filter: drop-shadow(2px 2px 5px #AC72D3);
}

.home1 img {
  max-width: 400px;
}

.home1 img {
  max-width: 400px;
  text-align: center;
}

.home2 {
    width: 65%;
    height: 20%;
    background-color: #B3A6ED;
    border: 1px solid #7C72D3;
    margin-left: auto;
    margin-right: auto;
    overflow-y: scroll;
    filter: drop-shadow(2px 2px 5px #AC72D3);
}





/* #AC72D3 pueplw #7C72D3 blue*/


.shrines { /*Shrines is just what I'm calling your pages for rambles, its common on neocities */
    width: 65%;
    height: 20%;
    background-color: #000000;
    border: 1px solid #7C72D3;
    margin-left: auto;
    margin-right: auto;
    overflow-y: scroll;
    filter: drop-shadow(2px 2px 5px #AC72D3); /*this line makes the shrine box 'glow'. the first two numbers are x and y, 3rd number is glow. final is hex color code.*/

    margin-top: 1%;
    margin-bottom: 1%; /*These two lines just make it so that your boxes arent crammed on top of each other*/
}



/* Css for your navigation bar, you  can see what is being styled in nav/navbar.html file*/

.navbarcss {
    width: 65%;
    height: 20%;
    background-color: #000000;
    border: 1px solid #7C72D3;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(2px 2px 5px #AC72D3);
    font-family: "Comic Neue";
    font-size: 4vh;
}



/* Link Styling CSS Below */



 /* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: #AC72D3;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
} 




/* Font CSS Stuff for Google, don't delete these unless you are chaning ur font or know whats going on */

.comic-relief-regular {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
}

.comic-relief-bold {
  font-family: "Comic Relief", system-ui;
  font-weight: 700;
  font-style: normal;
}



.comic-neue-light {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: normal;
}

.comic-neue-regular {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: normal;
}

.comic-neue-bold {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: normal;
}

.comic-neue-light-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: italic;
}

.comic-neue-regular-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: italic;
}

.comic-neue-bold-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: italic;
}




 .coming-soon-regular {
  font-family: "Coming Soon", cursive;
  font-weight: 400;
  font-style: normal;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #03f1eb #080808;
    background-color:url('https://i.pinimg.com/736x/9c/f8/ca/9cf8ca230e94eb22252d52546f059eb4.jpg');
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #080808;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #03f1eb;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }