/* Color scheme for light mode: */
html { 
	--text-color: rgb(44, 42, 40);
    --negative-text-color: rgb(230, 224, 224);

  	--background-image: url(trees.png);
    --variant-background-color: rgb(216, 212, 208);

    --accent-blue: rgb(26, 46, 112);
    --accent-green: rgb(21, 70, 11);
    --accent-orange: rgb(85, 48, 0);
}

/* Check out this blog post for how to add a java-script theme-toggle to the site:  https://derekkedziora.com/blog/dark-mode-revisited*/
/* */
* { 
    margin: 0; 
    padding: 0; 
}

/* Body*/
body {
    background-image: url(https://files.catbox.moe/77xyuw.png); /* <-- Replace space background here! */
    color: var(--text-color);

    font-family: "Sometype Mono", monospace; /* <-- Change font here. (If you change the font you can remove line 10-12 from the html) */

    display: flex;
    flex-flow: wrap;

    max-width: 1040px; /* <-- Size of the site. Can be changed to anything from '220px' to '8000px' or removed completely- Try it! */

    margin: auto;
    padding: 20px 0px 50px 0px;
}
/* */
/* Header*/
header {
    background-image: url(https://files.catbox.moe/g44lej.png);  /* <-- Replace header here! */

    min-width: 0rem;    

    order: 1;    
    flex-grow: 4;
    flex-basis: 100%;

    padding: 100px 0px 0px 0px;
}
header h2 {
    color: rgb(220, 228, 221);

    font-weight: 100;

    font-size: 2rem;
    line-height: 1.4rem;

    padding: 10px 20px 10px 20px;
}
/* */
/* Navigation bar */
nav {
    background-color: var(--background-color);

    border-bottom: solid 2px var(--text-color);

    min-width: 0rem;    

    order: 2;
    flex-grow: 4;
    flex-basis: 100%;
    
    padding: 10px 10px 10px 20px;
}
nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;

    gap: 11px  11px;

    margin: 0;    
}
nav li {
    background-color: var(--variant-background-color);

    list-style: none;
    width: 155px;

    border-left: solid 2px ;

    padding: 05px 06px 06px 14px;
}
nav li a {
    color: var(--text-color);
    
    text-decoration: none;
}
nav li a:visited {
    color: var(--text-color);
}
nav img {
    margin: 0px 07px -08px -05px;
}
/*  */
/* Main!*/
main {
    background-color: var(--background-color);

    order: 3;
    flex-grow: 6;
    width: 35rem;

    padding: 20px 20px 30px 20px;    
}
/* */
/* Side bar */
aside {
    background-color: var(--variant-background-color);

    border-top: solid 2px var(--text-color);
    border-left: solid 2px var(--text-color);

    order: 4;
    flex-grow: 1;
    width: 07rem;


    margin: -02px 0px 0px -02px;
    padding: 20px 20px 30px 20px;        
}
/* */
/* Footer */
footer {
    background-color: var(--background-color);

    border-top: solid 2px var(--text-color);

    min-width: 0rem;

    order: 99;
    flex-grow: 4;
    flex-basis: 100%;
    align-self: flex-end;

    padding: 10px 10px 10px 20px; 
    }
footer p {
    font-weight: 100;

    font-size: .8rem;
    line-height: 1rem;    
}
footer a {
    font-weight: 500;

    font-size: .8rem;
    line-height: 1rem;    
}
/* */
/* Text formatting */
h1 {
    font-weight: 700;

    font-size: 2.5rem;
    line-height: 2.8rem;
}
h2 {
    font-weight: 500;

    font-size: 2rem;
    line-height: 2.1rem;
}
h3 {
    font-weight: 500;

    font-size: 1.9rem;
    line-height: 2.1rem;
}
h4 {
    font-weight: 400;

    font-size: 1.7rem;
    line-height: 1.9rem;
}
h5 {
    font-weight: 400;

    font-size: 1.5rem;
    line-height: 1.7rem;
}
p {
    font-weight: 100;

    line-height: 1.4rem;

    margin: 20px 20px 20px 0px;    
}
strong {
    font-weight: 700;  
}
cite {
    font-weight: 100;
    font-style: italic;

    line-height: 1.2rem;

    border-left: solid 2px var(--text-color);

    padding: 0px 0px 0px 10px;     
    margin: 20px 20px 20px 0px;     
}
a {
    color: var(--accent-blue);

    line-height: 1.4rem;   
}
a:visited {
    color: var(--accent-orange);
}
a:hover, a:focus {
    color: var(--accent-green);
    text-decoration: overline;
}
ul {
    margin: 20px 20px 20px 30px;   
}
li {
    list-style: square;

    line-height: 1.4rem;
}

/* */

img {
    max-width: 100%;
}

/*skip to content button. 
You can style it how you like. But please don't remove it.*/
#skip-to-content a:focus {
    top: 0;
}
#skip-to-content a {
    background-color: var(--background-color);
    color: var(--text-color);

    position:absolute;
    top:-100px;

    padding: 15px 15px 15px 15px;    
}