/* CUSTOM THEME
   Edit these variables to change the color scheme.
   You can use color names (e.g. "red"), hex codes (#ff0000), or rgb/hsl values.
*/
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');


:root {
    /* Background of the whole page */
    --main-surface-color: #e0e0e0;
    --main-bg-color: #FFFFFF;
    
    /* Main text color */
    --main-fg-color: #000000;
    
    /* Used for blockquotes, code blocks, and accents */
    --main-highlight-color: #f0f0f0;
    
    /* Color for headers (h1, h2, etc.) */
    --main-header-color: #000000;
    
    /* Color for links */
    --main-link-color: #52d18b;
    
    /* Color when hovering over links */
    --hover-link-color: #ffacac;
    
    /* Color for active/clicked links */
    --active-link-color: #00ffff;
    
    /* Color for bullets in nested lists */
    --nested-ul-color: #555555;
}

/* 
   Below is the CSS that applies these colors. 
   You can add your own custom CSS here to change fonts, borders, spacing, etc.
*/

html {
    scrollbar-color: var(--main-fg-color) var(--main-bg-color);
}

body {
    background-color: var(--main-surface-color);
    color: var(--main-fg-color);
    font-family: 'PT Sans', serif;
    line-height: 1.6;
    /* Using a linear-gradient overlay to make the image less opaque (fainter). 
       Change the 0.8 value to adjust opacity (0.0 = full image, 1.0 = full color) */
    /* background-image: linear-gradient(rgba(224, 224, 224, 0.7), rgba(224, 224, 224, 0.7)), url('/assets/images/textures/tnnl_crt1.png'); */
}

/* Layout Containers */
nav,
main,
footer {
    border: 1px solid var(--main-fg-color); /* Simple border */
    background-color: var(--main-bg-color);
    padding: 1rem;
    margin-bottom: 1rem;
}

nav {
    /* background-image: url('/assets/images/textures/c2a4_pan4.png'); */
    background-repeat: repeat;
}

main {
    
}

/* Links */
a {
    color: var(--main-link-color);
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: var(--hover-link-color);
    text-decoration: line-through;
}

a:active {
    color: var(--active-link-color);
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
    color: var(--main-header-color);
}

/* Blockquotes */
blockquote {
    background-color: var(--main-highlight-color);
    background-image: url('/assets/images/textures/fiber_paper.png');
    border-left: 1px solid var(--main-fg-color);
    margin: 0.5em 0;
    padding: 0.05em 0.5em;
}

/* Horizontal Rule */
hr {
    border: none;
    height: 6px; /* Adjust this to control how "squished" it is */
    background-image: url('/assets/images/textures/navbar-babtech9d.png');
    background-repeat: repeat-x;
    background-size: auto 100%; /* Forces the image to fit the height */
    margin: 1.5rem 0;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto; /* Centers the image */
}