:root {
    --page-background: #83cabd;
    --page-background-accent: #d9e9e2ff;
    
    --layout-dark: #36807a; /* borders. */
    --layout-bright: #ecebe7; /* off-white for bright text & text backgrounds */
    --layout-accent: #e5828a; /* accent color. */
    
    --text-regular: #4a4a4a; /* regular text */
    --text-light: #8e8e8e; /* quotes */
    --text-dark: #000000; /* headers & text accents */
    
    --hyperlink-inactive: #2993cc; /* color of non-clicked hyperlinks */
    --hyperlink-visited: #8814b2; /* color of clicked hyperlinks */
    
    --banner-height: 7% /* height to go down from the top of the banner image in % */
}

/* This is the file which contains layout for the general website. 
 * Page specific layout, such as the sidebar with tags or posts, can be found in page-specific folders */


/* TEXT COLORS & STYLE */
article { color: var(--text-regular); }
h1, h2, h3, h4, h5, h6 { color: var(--text-dark); }
strong { color: var(--text-dark); }
a:link { color: var(--hyperlink-inactive); }
a:visited { color: var(--hyperlink-visited); }

.quote { 
    color: var(--text-light); 
    border-left: solid 3px var(--layout-accent);
    padding: 1px 0 1px 10px; margin: -1px 0;
}

/* BACKGROUND */
body { background-color: var(--page-background); }
.halftone {
    background: url("/assets/halftone.png");
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: block;
}

.layout-background { /* Dark border around elements */
    position: relative; display: block;
    background-color: var(--layout-dark);
    width: 100%; height: fit-content;
    padding: 20px; margin: 20px 0;
}

/* LAYOUT */
* { box-sizing: border-box; }
#flow { 
    position: relative; display: block; 
    left: 50%; transform: translateX(-50%);
}
@media (1100px < width) { #flow { width: 900px } }
@media ( width < 1100px ) { #flow { width: 95%; } html { font-size: 2em; } }

/* TOP MENU */
.menu { width: 100%; height: fit-content; position: relative; display: block; }

#navbar-image {
    position: relative; 
    width: 100%; height: 300px; background-color: black;
    
    background: url("/assets/banner.png"); background-size: cover; background-position: 0 var(--banner-height);
}
#navbar-image-title { 
    font-size: 50px; font-weight: bold; color: var(--page-background); margin: 0 20px;
    position: absolute; bottom: 0;
}

#navbar { position: relative; display: flex; flex-direction: row; width: 100%; gap: 20px; }
.navbar-button { background-color: var(--layout-accent); flex: auto; padding: 10px; cursor: pointer; }
.navbar-button a {
    text-decoration: none; font-weight: bold; text-align: center; 
    color: var(--layout-bright); width: 100%; display: inline-block;
}
.navbar-button:hover { background-color: var(--layout-bright); }
.navbar-button:hover a { color: var(--text-dark); }

/* INTERACTION WRAPPER */
#main-wrapper {
    display: flex; flex-direction: row; position: relative;
    width: 100%; gap: 20px;
    
}