/* Import our colors */
@import url("/static/css/macchiato-colors.css");

/* Set the fonts to use */
@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}
@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
    font-style: bold;
}
@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}
@font-face {
    font-family: blackLetter;
    src: url('/static/fonts/Blackletter.TTF');
}
@font-face {
    font-family: lobster;
    src: url('/static/fonts/Lobster.otf');
}
@font-face {
    font-family: wildeast;
    src: url('/static/fonts/The\ Wildeast.ttf');
}
@font-face {
    font-family: cinzel;
    src: url('/static/fonts/Cinzel-Regular.otf');
}
@font-face {
    font-family: cinema;
    src: url('/static/fonts/cinema_st.ttf');
}
@font-face {
    font-family: cinematografica;
    src: url('/static/fonts/Cinematografica-Regular-trial.ttf');
}

/* This sets general styling, background image, default font, etc */
body {
    color: var(--catppuchin-text);
    font-family: 'Nunito', sans-serif;
    background-color: var(--catppuchin-base);
    background-image: url('/static/imgs/stars2.png');
}

/* This is the primary container that holds everything in it */
#main-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--catppuchin-crust);
}

/* Navbar settings */
#navbar {
    height: 40px;
    background-color: var(--catppuchin-surface0);
    width: 100%;
}
/* Style the navbar list */
#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}
#navbar li {
    padding-top: 10px;
}
#navbar li a {
    /* Link style settings */
    color: var(--catppuchin-sapphire);
    font-weight: 800;
    text-decoration: none;
}

/* Styling for the header */
#header {
    width: 100%;
    background-image: url('/static/imgs/gay_little_cloak.webp');
    background-size: cover;
    border: 2px solid var(--catppuchin-lavender);
    border-radius: 5px;
    margin-bottom: 10px;
}
#header h1 {
    font-size: 50px;
    font-family: lobster;
    color: var(--catppuchin-maroon);
    text-align: center;
    filter: drop-shadow(5px 5px var(--catppuchin-crust));
}

#content {
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* This styles the main content body */
#content ul {
  list-style-image: url('/static/imgs/monkey-15.gif');
}
#content h1 {
    color: var(--catppuchin-sky)
}
#content h2 {
    color: var(--catppuchin-sky)
}
.flex-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
    padding-bottom: 10px; 
}
#buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 5px;
    padding-left: 5px;
    max-width: 300px;
}

#floating-ad {
    position: fixed;
    bottom: 0;
}
#side-pictures img {
    position: fixed;
    max-width: 300px;
    height: auto;
    z-index: -1;
}
#bottom-blinkies {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding-bottom: 10px;
}