/* 

hi, i'm jester and this is my css stylesheet for nekotokage.neocities.org! 
i have no problems with you snooping around here, just be warned that i am a hobbyist and my code isn't super consistent! i really don't recommend copying what i do, but that's more for your own sake than mine ':3c you're free to email me and ask about what you see here, but be aware that sometimes i won't have an answer as to why i've done a certain thing!

project start: nov 22 2023 @ 2:30PM

description: a total overhaul of my neocities site to make it not only more accessible, but more in line with what /i/ want out of my website.

02/15/2024 : fixed mobile menu issue [hopefully]...

current issue: 02/17/2024: mobile menu does not appear on any page except home page...
*/



/* consistent names for colors and layout padding/margins :) call them using the var(--name) format */
:root {
    --white: #fcfbfb;
    --blue: #99d1fa;
    --orange: #ff951a;
    --black: #1f1a27;
    --mainmargin: 25px;
    --diamond: '◆';
}

/* dont ask me to describe this one, but it makes stuff look nice. it is applied to ALL elements on the page */
* {box-sizing:border-box;}

img {
    max-width: 100%;
    height: auto;
}

@font-face {
    font-family: pokemon;
    src: url("/fonts/pokemon.TTF") format("truetype");
}

@font-face {
  font-family: yoster;
  src: url("/fonts/yoster.ttf") format("truetype");
}

@font-face {
  font-family: bubble;
  src: url("/fonts/BubblePix.ttf") format("truetype");
}

/* initially turns off mobile menu */
#mobilenav {display:none;}

/* BELOW ARE ALL YOUR TOP-LEVEL CSS ATTRIBUTES [PREDEFINED ELEMENTS] */


/* sets colors for the whole page without having to fuck around with the body, as well as a bit of style that will apply everywhere */
html {
    background-color: var(--black);
    font-size: 14px;
    font-family: Verdana;
    color: var(--white);
    line-height: 20px;
    max-width: 100%;
    margin: auto;
}


/* body settings */
body {
    border: 1px solid;
    border-radius: 3px;
    margin: var(--mainmargin);
}

/* sets link color and no underline */
a {
    color: var(--orange);
    text-decoration: none;
}

/* changes link color when hovered over. again no underline */
a:hover {
    color: var(--blue);
    text-decoration: none;
}

/* sets all headings to the center, can be overridden on an as-needed basis */
h1, h2, h3, h4, h5, h6 {
    text-align: center;
    font-family: yoster;
}

/* just gives all your block-level text a margin and sets the fonts/sizes */
p, ol, ul {
  margin: var(--mainmargin);
  font-family: bubble;
  font-size: 13px;
}

  /* makes this link id blue to stand out against the rest of the sites orange links */
#bluelink {color: var(--blue);}

/* TOP-LEVEL ATTRIBUTES END */



/* BELOW ARE ALL YOUR CLASS ATTRIBUTES */


/* this controls ALL buttons on any webpage with this stylesheet */
.button {
    margin: 10px auto;
    border: none;
    text-align: center;
    color: var(--black);
    font-family: pokemon;
    font-size: 18px;
}

/* this just makes sure the button text stays black unless further overwritten :) */
.button:hover {color: var(--black);}

/* controls buttons on the index page, they are stacked into columns and are 60 percent of the bodys width*/
.buttonMain {
    display: flex;
    flex-flow: column;
    width: 60%;
    padding: 25px;
}

/* makes your button blue */
.buttonBlue {background-color: var(--blue);}

/* makes your button orange */
.buttonOrange {background-color: var(--orange);}


/* changes button color to white when hovered */
.buttonBlue:hover, .buttonOrange:hover {background-color: var(--white);}

.buttonGroup {padding: 25px;}


/* END CLASS ATTRIBUTES */



/* BELOW ARE ALL YOUR ID ATTRIBUTES */


/* top navigation bar */
#topnav {
    border-bottom: 1px solid var(--white);
    text-align: center;
    font-size: 18px;
    font-family: pokemon;
    padding: 5px 5px 5px 5px;
}

#topnav a::after {
    color: var(--white);
    content: var(--diamond);
    text-align: center;
    margin: var(--mainmargin);
}

#topnav::before {
    color: var(--white);
    content: var(--diamond);
    text-align: center;
    margin: var(--mainmargin);
}
/* end top navigation bar */

/* footer */
#footer {
    border-top: 1px solid; 
    padding: 0px;
    font-family: pokemon;
    text-align: center;
    margin: 0px;
}

#footer div::before {content: var(--diamond);}
#footer div::after {content: var(--diamond);}

/* end footer */


/* ID ATTRIBUTES END */



/* MOBILE RESPONSIVENESS. THIS IS LONG AND BE WANRED: **I DO NOT KNOW WHAT I'M DOING HERE** THIS MAY OR MAY NOT BREAK IF YOU CHANGE THINGS... YOU HAVE BEEN WARNED.*/

/* if the screen is less than 786px, the mobile layout will display */
@media only screen and (max-width: 786px) {
    /* hides the desktop nav bar */
    #topnav {display: none;}
    /* changes body margins to give more space to content */
    body {margin: 10px;}
    /*displays aaaaall the mobile stuff... */
    #mobile, #footer, #mobilenav, .mobileMenu {display:block;}
    /* ...except the menu items lol. these will be displayed when the menu button is clicked */
    #menuContent {display:none;}
    /* gunna be real: don't know how necessary this is, but i don't feel like fixing it */
    .mobilemenu {
        max-width: 100%;
        margin: auto;
        text-align: center;
    }
    /* styles the box that the dropdown list And button reside in */
    #mobile {
      border-bottom: 2px solid var(--white);
      width: 100%;
    }
    /* styles the mobile menus links */
    #menuContent a{
        font-family: pokemon;
        font-size: 18px;
        text-align: center;
        z-index: 998;
        display: block;
        width: 100%;
    }
    /* styles the menu button itself (this one stretches across the whole "mobile" id!) */
    .menuButton {
        background-color: var(--white);
        color: var(--black);
        text-align: center;
        font-size: 20px;
        font-family: pokemon;
        display: block;
        z-index: 999;
        height: 45px;
        width: 100%;
        border: none;
    }
    /* styles the dividers between menu links :) */
    hr {
        border: solid 1px var(--white);
        max-width: 15%;
    }
    .buttonGroup {padding: 10px;}
    ul {list-style-type: none;}
		
	.buttonMain {
		max-width: 65%;
	}
}

/* END MOBILE MENU CSS */