@import "layout.css";

/* https://paletton.com/#uid=73i1b0kgLjefzV3eYu+jj9Xmu1k */

:root {
    --color-white: #ffffff;
    --color-c-gray: #cccccc;
    --color-9-gray: #999999;
    --color-6-gray: #666666;
    --color-3-gray: #333333;
    --color-black: #000000;

    --color-primary-0: #2C5C5C;	/* Main Primary color */
    --color-primary-1: #79ECEC;
    --color-primary-2: #4F9494;
    --color-primary-3: #133030;
    --color-primary-4: #020606;
    
    --color-secondary-1-0: #4C3668;	/* Main Secondary color (1) */
    --color-secondary-1-1: #B385F0;
    --color-secondary-1-2: #7F60A8;
    --color-secondary-1-3: #251836;
    --color-secondary-1-4: #040307;
    
    --color-secondary-2-0: #999249;	/* Main Secondary color (2) */
    --color-secondary-2-1: #FFF483;
    --color-secondary-2-2: #F7ED84;
    --color-secondary-2-3: #4F4B1F;
    --color-secondary-2-4: #0A0A03;
    
    --color-complement-0: #996D49;	/* Main Complement color */
    --color-complement-1: #FFBB83;
    --color-complement-2: #F7B884;
    --color-complement-3: #4F351F;
    --color-complement-4: #0A0603;
}

a {
    color: var(--color-secondary-1-0);
}

a:hover {
    color: var(--color-secondary-1-1);
}

body {
    background-image: linear-gradient(var(--color-primary-4) , var(--color-secondary-1-4) );
    color: var(--color-primary-2);
} 

img {
    border-color: var(--color-9-gray);
}

#content {
    background-color: var(--color-complement-3);
}

#pagetitle {
    background-color: var(--color-primary-3);
}

#pagetitle h1, #pagetitle h1 a {
    color: var(--color-secondary-2-2);
}

#pagetitle h3 {
    color: var(--color-complement-2);
}

#menu {
    color: var(--color-complement-1);
    background-color: var(--color-secondary-1-3);
}

#menu label {
    color: var(--color-complement-1);
}

.menubutton{
    border-color: var(--color-primary-1);
}

.menubutton a {
    color: var(--color-c-gray);
}

.menubutton:hover {
    color: var(--color-3-gray);
    background-color: var(--color-complement-1);
    border-color: var(--color-primary-0);
}

.menubutton:hover a {
    color: var(--color-3-gray);
}
#posts {
    background-color: var(--color-complement-3);
}

div.dateheader {
    color: var(--color-secondary-1-1);
    border-left-color: var(--color-primary-1);
    border-bottom-color: var(--color-primary-1);
}

.post {
    background-image: linear-gradient(rgba(255,255,255,0.6),rgba(192,192,192,0.3));
}

div.minecraft {
    background-color: var(--color-primary-2);
}

div.rocketleague {
    background-color: var(--color-complement-2);
}

div.music {
    background-color: var(--color-secondary-1-2);
}

.posttitle {
    color: var(--color-primary-4);
    border-left-color: var(--color-primary-1);
}

.postbody {
    color: var(--color-black);
}

.postbody h3 {
    color: var(--color-secondary-1-3);
}

.postfoot {
    border-color: var(--color-primary-2);
}

.postfoot .links {
    border-color: var(--color-primary-2);
    color: var(--color-primary-2);
    background-color: var(--color-primary-3);
}

.postfoot .links a {
    color: var(--color-complement-1);
}

.postfoot .links a:hover {
    color: var(--color-secondary-2-1);
}

#pagefoot {
    background-color: var(--color-secondary-1-3);
}

#pagefoot a {
    color: var(--color-3-gray);
}