/* ==================================================
   BRAINMOSS SITE STYLESHEET
   ==================================================

   HTML = structure/content
   CSS = appearance/styling

   Most customization can be done in the VARIABLES
   section below.

   ================================================== */


/* ==================================================
   VARIABLES
   ==================================================

   Change values here to update the entire site.
*/

:root {

    /* ------------------------------
       IMAGES
       ------------------------------ */

    /* Banner image at the top of the page */
    --header-image: url('https://pbs.twimg.com/media/HJhAnazWgAEZKnQ?format=jpg&name=4096x4096');

    /* Optional repeating page background image */
    --body-bg-image: url('');




    /* ------------------------------
       COLORS
       ------------------------------ */
       
    /* Text colors */
    --color-main-text: black;
    --color-sidebar-text: black;
    --color-footer-text: black;
  
        /* Section headers (h2, h3) */
        --color-heading: black;
        
        /* Large page title (h1) and bold text */
        --color-title: black;

        /* Regular hyperlinks */
        --color-link: darkgray;
    
        /* Navbar links */
        --color-nav-link: #5f182a;
    
        /* Navbar hover state */
        --color-nav-hover: gray;


    /* Entire page background */
    --color-page-bg: #444178;

    /* Main content area */
    --color-main-bg: #8687b4;
    --color-main-border: #6876a6;

    /* Left and right sidebars */
    --color-sidebar-bg: #4b5c95;

    /* Navbar */
    --color-navbar: #8d7c9d;
    
    /* Footer */
    --color-footer: #8d7c9d;

    /* Sidebar boxes */
    --color-box-bg: #cfc0c7;
    --color-box-border: black;



    /* ------------------------------
       TYPOGRAPHY
       ------------------------------ */  
    /* Main body font */
    --font-main: 'Roboto Mono', monospace;
    
    /* Title font */
    --font-title: 'UnifrakturMaguntia', cursive;

    /* Headings / decorative font */
    --font-heading: 'Bitcount Prop Single', system-ui;
    
    /* Footer font */
    --font-footer: 'Coral Pixels', serif;
    
    /* Navbar font */
    --font-navbar: 'Bitcount Prop Single', system-ui;
    
    /* Default text size */
    --font-size-body: 16px;
    
    /* Sidebar text */
    --font-size-sidebar: 14px;
    
    /* Main page title */
    --font-size-title: 30px;
    
    /* Section headers */
    --font-size-h2: 20px;
    --font-size-h3: 16px;
    
    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-bold: 650;
    --font-weight-navbar: 500;
    
    
    /* ------------------------------
       SPACING
       ------------------------------ */
    
    /* Small spacing (lists, footer, boxes) */
    --spacing-small: 10px;
    
    /* Standard spacing for content areas */
    --spacing-medium: 10px;
    
    /* Large spacing for future use */
    --spacing-large: 30px;
    
    
    /* ------------------------------
       DIMENSIONS
       ------------------------------ */

    /* Total site width */
    --site-width: 800px;

    /* Header/banner height */
    --header-height: 300px;

    /* Navigation bar height */
    --navbar-height: 40px;

    /* Footer height */
    --footer-height: 40px;

    /* Sidebar width */
    --sidebar-width: 200px;

    /* Padding inside content areas */
    --content-padding: 15px;
    
    /* Main section width */
    --main-column-width: 500px;
    
    /* Main section border width */
    --main-border-width: 2px;

    /* Mobile breakpoint */
    --mobile-breakpoint: 840px;
    
    /* Stamp dimensions */
    --stamp-width: 100px;
    --stamp-height: 50px;
    
    /* Button dimensions */
    --button-width: 100px;
    --button-height: 50px;
    
    /* Space between stamps */
    --stamp-gap: 2px;
}




/* ==================================================
   CUSTOM FONT
   ================================================== */

@font-face {
    font-family: 'Vanosky';
    src: url('fonts/Vanosky/Vanosky.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Vanosky';
    src: url('fonts/Vanosky/Vanosky-Thin.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Vanosky';
    src: url('fonts/Vanosky/Vanosky-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}


/* ==================================================
   GLOBAL SETTINGS
   ================================================== */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


/* ==================================================
   BODY
   ==================================================

   Controls the appearance of the entire page.
*/

body {
    font-family: var(--font-main);
    font-size: var(--font-size-body);

    margin: 0;

    background-color: var(--color-page-bg);
    background-image: var(--body-bg-image);
    background-size: 65px;

    color: var(--color-main-text);
}


/* ==================================================
   MAIN PAGE CONTAINER
   ==================================================

   Controls the maximum width of the website.
*/

#container {
    width: min(100%, var(--site-width));
    max-width: var(--site-width);
    margin: 0 auto;
    padding-inline: var(--spacing-small);
}


/* ==================================================
   GENERAL LINKS
   ==================================================

   Affects links everywhere except the navbar.
*/

#container a {
    color: var(--color-link);
    font-weight: var(--font-weight-bold);
}


/* ==================================================
   HEADER
   ==================================================

   Top banner image area.
*/

#header {
    width: min(100%, 500px);
    height: clamp(180px, 35vw, var(--header-height));

    margin: 0 auto;

    
    background-image: var(--header-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

/* Shows if image fails to load */
    background-color: var(--color-page-bg);    

}


/* ==================================================
   NAVIGATION BAR
   ==================================================

   Horizontal menu directly under header.
*/

#navbar {
    width: 100%;
    min-height: var(--navbar-height);
    font-family: var(--font-navbar);
    background-color: var(--color-navbar);
    margin-bottom: 0;
    padding-inline: var(--spacing-small);
}

#navbar ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-small);

    margin: 0;
    padding: 0;

    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-block: var(--spacing-small);
}

#navbar li a {

    /* Navigation text color */
    color: var(--color-nav-link);
    font-family: var(--font-navbar);
    font-weight: var(--font-weight-navbar);
    text-decoration: none;
}

#navbar li a:hover {

    /* Color shown when mouse hovers */
    color: var(--color-nav-hover);

    text-decoration: underline;
}


/* ==================================================
   THREE COLUMN LAYOUT
   ==================================================

   Left Sidebar | Main Content | Right Sidebar
*/

#flex {
    display: flex;
    gap: var(--spacing-small);
    align-items: flex-start;
}


/* ==================================================
   SIDEBARS
   ==================================================

   Controls BOTH sidebars.
*/

aside {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    min-width: 0;

    padding: var(--content-padding);

    background-color: var(--color-sidebar-bg);

    font-size: var(--font-size-sidebar);

    color: var(--color-sidebar-text);
}

/* Left sidebar positioning */
#leftSidebar {
    order: 1;
}

/* Right sidebar positioning */
#rightSidebar {
    order: 3;
}


/* Sidebar lists */

.sidebar-list {
    padding-left: var(--spacing-small);
}


/* ==================================================
   MAIN CONTENT AREA
   ==================================================

   Center column where most page content goes.
*/

main {
    flex: 1 1 0;
    order: 2;
    min-width: 0;

    padding: var(--content-padding);
    padding-top: 0px;

    background-color: var(--color-main-bg);

    color: var(--color-main-text);
    
    border: var(--main-border-width) solid var(--color-main-border);
}


/* ==================================================
   FOOTER
   ==================================================

   Bottom section of the site.
*/

footer {
    width: 100%;
    height: var(--footer-height);

    padding: var(--spacing-small);

    background-color: var(--color-footer);
    color: var(--color-footer-text);

    font-family: var(--font-footer);

    text-align: center;
}


/* ==================================================
   HEADINGS
   ================================================== */

/* Main page title */
h1 {
    font-family: var(--font-title);
    font-size: var(--font-size-title);
    color: var(--color-title);
}

/* Section headers */
h2,
h3 {
    font-family: var(--font-heading);
    color: var(--color-heading);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}


/* ==================================================
   BOLD TEXT
   ==================================================

   Anything wrapped in <strong>.
*/

strong {
    color: var(--color-title);
    font-weight: var(--font-weight-bold);
}


/* ==================================================
   SIDEBAR BOXES
   ==================================================

   Reusable boxes used in sidebars.
*/

.box {
    padding: var(--spacing-small);

    background-color: var(--color-box-bg);

    border: 1px solid var(--color-box-border);
}


/* ==================================================
   OPTIONAL TOP BAR
   ==================================================

   Included from original template.
   Currently unused.
*/

#topBar {
    width: 100%;
    height: 30px;

    padding: var(--spacing-small);

    font-size: var(--font-size-sidebar);

    background-color: var(--color-navbar);
}

/* ==================================================
   STAMPS AND BUTTONS
   ==================================================

   Used for collections of 88x31 buttons and
   99x56 stamps.
*/

.stamp-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    line-height: 0;

    gap: var(--stamp-gap);

    justify-content: center;
}

.stamp {
    width: auto !important;
    height: auto !important;
    max-width: var(--stamp-width);
    max-height: var(--stamp-height);

    display: inline-block;

    image-rendering: pixelated;
    vertical-align: middle;
}

.stamp:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.button {
    width: auto !important;
    height: auto !important;
    max-width: var(--button-width);
    max-height: var(--button-height);
    
    display: inline-block;
    image-rendering: pixelated;
    vertical-align: middle;
    
}

.button:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

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

/* ==================================================
   MOBILE RESPONSIVENESS
   ==================================================

   Activates when screen width is below
   the breakpoint defined in :root.

   NOTE:
    Keep the 840px value below synchronized with
   --mobile-breakpoint in :root.
*/

@media only screen and (max-width: 840px) {

    #header {
        height: clamp(160px, 45vw, var(--header-height));
    }

    main img,
    aside img {
        height: auto !important;
        max-width: 100% !important;
    }

    #flex {
        flex-direction: column;
    }

    aside {
        width: 100%;
        flex: 0 0 auto;
    }

    main {
        order: 1;
        width: 100%;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        justify-content: center;
    }
}