/* 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." */

/*HONK CSS TEST*/

/*FONTS!!*/


@font-face {
  font-family: "Alice_In_Wonderland_3";
  src: url("https://honkinjester.neocities.org/Alice_in_Wonderland_3.ttf");
}


/*This is the body! basically the main 'body' of the website.*/
body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    background-color: #08031A;
    /* you can delete the line below if you'd prefer to not use an image */
    background-size: 500px;
    color: #fceaff; 
    background-image: var(--body-bg-image);
}


/* DA ROOT- this works basically as a way link images without putting the link into the actual place itself, thus saving space. */
:root {
    --header-image: url('https://i.postimg.cc/kGqvdb74/placeholder.png');
    --body-bg-image: url('https://i.postimg.cc/66Pn6nHP/tumblr-7800ff667b45f072b1813f05f2d3b788-b474fb08-400.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    --punkline1: url("https://honkinjester.neocities.org/honk_images/honkine1.jpg");
    --content: #ffcb81;
    
    }
    
    
/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
#container {
    max-width: 1000px;
    /* this is the width of your layout! */
    /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
    margin: 0 auto;
    /* this centers the entire page */
}    

/* this is for the checkered pattern. */
#punk_line {
  background-image: var(--punkline1);
  height: 54px;
}


/*navigation section*/

.navbar{
  background-color:#000000;
  width:100%;
  /*position:fixed;*/
}

.main{
  position:center;
  margin-top:500px;
}
#navbar {
    height: 80px;
    /* navbar color */
    width: 80%;
    outline: 5px;
    margin-left:100px;
    margin-bottom:20px;
    padding-top:100px;
    padding-bottom:40px;
    border: 4px color:#9f06ff;
    font-size:25px;
    background-color:#00000;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
    
}

#navbar ul li a {
  padding: 10px;
    color: #ffffff;
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    /* this removes the underline */
    border: 9px solid #9f06ff;
    background-color: #000000;
    border-radius:20px;
}


/* navigation link when a link is hovered over */
#navbar ul li a:hover {
    color: #9f06ff;
    border: 9px solid #582ffc;
    background-color: #71f8c2; 
    border-radius:20px;
}




#navbarimg{
  width:250px;
  height:200px;
  margin-left:90px;
  Margin-top:30px;
  float:left;
}


/*BOX STUFF: in here you can contain info n other things*/

.box {
    background-color: #c8e0fe;
    padding: 10px;
    max-width: 100%;
    border-radius: 15px;
    margin-bottom: 20px;
    position: center;
    width:500px;
    padding:50px;
    color: #000000;
    
}

.chara-gallery {
    border: none;
    padding: 15px;
    width: 95%;
    height: 450px;
    border-top: none;
    background-color: #000000;
    border: 4px solid #ffffff;
    border-radius: 30px 0px 0px 0px;
    position:center;
    overflow: auto;
 
    
}

.gallery {
  
    border-radius: 10px;
    border: 3px dashed #582ffc;
    margin-top: 60px;
    width: 200px;
    height: 200px;
    margin: 10px;
}

.gallery2 {
  
    border-radius: 10px;
    border: 3px dashed #582ffc;
    margin-top: 60px;
    width: 400px;
    height: 400px;
    margin: 10px;
}

/*THIS IS FOR THE SCROLLBAR!! You can edit the color*/

    /* width */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      }

    /* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}
 
    /* Handle */
   ::-webkit-scrollbar-thumb {
   background: #ffffff; 
   border-radius: 10px;
}

   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
  background: #ffcb81; 
}