@font-face {
  font-family: 'computerfont';
  src: url("/assets/fonts/BlackWolf.ttf") format("TrueType");
}


/*
Color palettes
-----------------------------
Eerie black:        201F20
Violet Blue:        354AA5
Emerald:            0CCE6B
Butterscotch:       E39C44
Anti-Flash white:   EFEFEF
-----------------------------

*/
:root {
    /* CSS HEX */
--butterscotch: #E39C44ff;
--mint-cream: #f7fff7ff;
--jet: #343434ff;
--delft-blue: #2f3061ff;
--air-superiority-blue: #6ca6c1ff;

/* CSS HEX */
--eerie-black: #201f20ff;
--violet-blue: #354aa5ff;
--emerald: #0cce6bff;
--butterscotch: #e39c44ff;
--antiflash-white: #efefefff;

--cardinal: #c51e3a;
--cardinal-dark: #872132;
--cerulean: #007ea7;
--cerulean-dark: #005977;
--sunglow: #ffc857;
--sunglow-dark: #7d6130;

--deep-black: #131b23;

--text-color: var(--antiflash-white);
 






* {
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    /* border: solid red 1px; */

}

a {
    color: var(--accent-color);
}

a:hover{
    color: var(--accent-color-dark)
}


body {

    background-color: var(--deep-black);
    background-image: url("/assets/img/dither_it_082.png");  
    background-blend-mode: multiply;
    color: var(--text-color);
    
}

.container {
    max-width: 800px;
    margin: auto;
    /* background-color: #131b23; */
    color: var(--text-color);
}

header {
    width: 100%;
    margin-bottom: 20px;
    margin-top: 10px;
}

#site-title {
    font-family: 'computerfont';
    font-size: 4em;
    text-decoration: none;
}

header img { 
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit:cover;
    border-bottom: solid var(--accent-color) 2px;
}

.scroller {
    padding: 5px;
    border-bottom: solid var(--accent-color) 2px;
}

nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
nav a {
    text-align: center;
    width: 100%;
    border-right: solid var(--antiflash-white) 2px;

    padding: 10px 0px 10px 0px;
    text-decoration: none;
    font-weight: bold;
}

nav a:last-child {
    border: none;
}




main {
    margin-bottom: 20px;
    width: 100%;
}

.row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 20px;
}

.fancybox {
    /* default */
    --accent-color: var(--antiflash-white);


    border: solid var(--accent-color) 2px;
    background-color: var(--deep-black);
    width: 100%;
    box-shadow: 5px 5px var(--accent-color);
    border-color: var(--accent-color);
}
.boxtitle {
    border-bottom: solid var(--accent-color) 2px;
    padding: 10px;
    font-weight: bold;
    text-decoration: underline;
}


.boxcontent {
    padding: 10px;
}

#blogbox {
    width: 30%;
}

.red {
    --accent-color: var(--cardinal);
    --accent-color-dark: var(--cardinal-dark);
}

.blue{
    --accent-color: var(--cerulean);
    --accent-color-dark: var(--cerulean-dark);

}

.yellow {
    --accent-color: var(--sunglow);
    --accent-color-dark: var(--sunglow-dark);
}