@font-face {
    font-family: "Fake Receipt";
    src: url("fonts/fake\ receipt.otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MS Gothic";
    src: url("fonts/MSGOTHIC.TTF");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Freeroad";
    src: url("fonts/freeroad.regular.ttf");
    font-weight: normal;
    font-style: none;
}

@font-face {
    font-family: "Arial Narrow";
    src: url("fonts/arialnarrow.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Arial Narrow";
    src: url("fonts/arialnarrow_italic.ttf");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Arial Narrow";
    src: url("fonts/arialnarrow_bold.ttf");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Arial Narrow";
    src: url("fonts/arialnarrow_bolditalic.ttf");
    font-weight: 600;
    font-style: italic;
}

:root {
    /*--COLORS. DO NOT REF DIRECTLY--*/
    --WHITE: #DEDED3;
    --YELLOW: #F9E15B;
    --ORANGE: #E59950;
    --RED: #A61610;
    --RED2: #982525;
    --BLACK: #1F2128;
    --BLUE: #1D3968;
    --BLUE2: #0184BF;
    --GREEN: #A9DC68;
    --GREEN-T: #AADC68A9;
    --GREY: #878D89;

    --text-color: var(--WHITE);
    --text-color2: var(--BLACK);
    --updates-color: var(--ORANGE);
    --background: var(--GREEN);
    --background-image: url("assets/bg.png");
    --nav-bg: BLACK;
    --side-title-bg: var(--RED);
    --sidebox-bg: var(--BLUE);
    --main-bg: "assets/paper010BG.png"; 
    --foot-bg: var(--YELLOW);
    --border-style: 2px solid var(--BLUE2);
    --shadow-style: 5px 5px var(--BLACK);
    --shadow-style-S: 2px 2px var(--BLACK);
    --em-color: var(--GREEN-T);
    --visited: var(--ORANGE);
    --hover: var(--YELLOW);
    --transparent: #00000000;


}

html, body {
    box-sizing: border-box;
    cursor: url("assets/cursor.png"), auto;
}

.main {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    font-family: "Arial Narrow";
    font-size: 100%;
    color: var(--WHITE);
    /*background-color: var(--background);*/
    background-image: var(--background-image);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5px;
}

h1 {
    font-family: "Fake Receipt";
}

h1::after {
    content: "";
    display: block;
    border-bottom: 4px dotted var(--WHITE);
    width: 98%;
    margin-left: auto;
    margin-right: -10px;
}

h2 {
    font-family: "Fake Receipt";
    width: 95%;
    margin-left: auto;
    font-style: normal;
}

h2::after {
    content: "";
    display: block;
    border-bottom: 3px dashed var(--BLUE2);
    width: 50%;
    margin-right: -15px;
}

h3 {
    font-size: 110%;
    line-height: 0.8;
    margin: 0;
}

h4 {
    width: 95%;
    margin-left: auto;
    font-style: italic;
}

h5 {
    display: block;
    padding: 10px 20px;
    width: max-content;
    max-width: 100%;
    background-color: var(--RED);
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    border: 3px dotted var(--WHITE);
    text-transform: uppercase;
}

h5 a {
    text-decoration: none;
}

h5:hover {
    transform: translateY(-2.5px);
    transition: all 0.3s;
    filter: brightness(120%) drop-shadow(0 3.5px var(--BLACK));
}

.header {
    width: 100%;
    max-width: 700px;
}

.mainnav {
    margin-left: auto;
    margin-right: auto;
    font-family: "Arial Narrow";
    display: block;
    position: sticky;
    top: 10px;
    width: 90%;
    color: var(--RED);
    /*background-color: var(--WHITE);*/
    z-index: 0.99;
}

.mainnav a {
    /*padding: 5px 10px;*/
    text-decoration: none;
    color: var(--RED);
}

.mainnav a:hover {
    color: var(--BLUE);
}

.moveup {
    filter: drop-shadow(0 1px 0.2em var(--BLUE));
}

.moveup:hover {
    filter: brightness(120%) drop-shadow(0 3.5px 0.2em var(--BLUE));
    transform: translateY(-2.5px);

    transition: all 0.3s;
}

.mainnav hr {
    color: var(--BLUE2);
}

.navbar a, .sidebox1 a, main a{
    color: var(--WHITE)
}

.navbar a:hover, .sidebox1 a:hover, main a:hover .navbar a:hover:visited, .sidebox1 a:hover:visited, main a:hover:visited{
    color: var(--hover);
}

.navbar a:visited, .sidebox1 a:visited, main a:visited{
    color: var(--visited);
}

.flex {
    display: flex;
}

.sidebar {
    width: 30%;
    margin-right: 10px;
    
}

.sideTitle {
    background-color: var(--side-title-bg);
    padding: 10px;
    border: var(--border-style);
    border-radius: 10px;
}

.sidebox1, .sidebox2, .sidebox3 {
    background-color: var(--sidebox-bg);
    padding: 5px 10px;
    border: var(--border-style);
    margin-bottom: 5px;
    border-radius: 10px;
    
    
}

.sideTitle, .sidebox1, .sidebox2, .sidebox3{
    box-shadow: var(--shadow-style);
}

.sidebox1 nav {
    /*margin-bottom: 0px;*/
    /*padding: 10px;*/
    text-align: center;
    
}

.sidebox1 a {
    text-decoration: none;
}

.sidebox1 a img:hover {
    filter: brightness(75%);
}

.sidebox2 {
    max-height: 300px;
    overflow-y: scroll;
    /*margin-bottom: 0px;*/
}

.sidebox2 ul {
    padding-left: 25px;
}

.sidebox3 {
    padding: 10px;
}

.sidebox3 img {
    max-width: 100%;
}

.updatesShort {
    list-style-type: "★ ";
}

.upLatest {
    color: var(--updates-color);
}

main {
    background-image: url("assets/paper010BG.png");
    background-repeat: repeat-y;
    background-size: auto;
    background-origin: content-box - 15;
    padding: 5px 10px;
    width: 100%;
    border: var(--border-style);
    margin-bottom: 5px;
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow-style);
}

em {
    background-image: linear-gradient(var(--transparent), var(--em-color));
    padding: 2px;
    font-size: 120%;
}

.navbar {
    font-family: "Fake Receipt";
    text-align: center;
}


.footer {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 120px;
    background-color: var(--foot-bg);
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 10px;
    color: var(--text-color2);
}

figure {
    /*max-width: min-content;*/
    background-image: url("assets/paper021yA.png");
    background-size: cover;
    padding: 10px;
}

.postflex {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.postflex figure {
    padding: 5px;
    background-color: cornsilk;
}

.postflex figure a img:hover {
    filter: brightness(75%);
}

.imgfilename {
    max-width: 100%;
    text-align: center;
    display: block;
    padding: 3px 5px;
}

a .imgfilename, a:visited .imgfilename {
    color: var(--BLUE);
}

a .imgfilename:hover, a:visited .imgfilename:hover {
    color: var(--RED);
}

.teneighty {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}


.stamp {
    box-shadow: 2px 2px 5px BLACK;

}

code {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    background-color: GREY;
    min-height: 100px;
    outline: greenyellow 2px;
}


/* mobile style */
@media screen and (max-width: 800px) {
    .main {
        max-width: 100%;
    }

    .flex {
        flex-wrap: wrap;
    }

    .sidebar {
        width: 100%;
        order: 2;
        margin-right: 0;
        display: block;
    }

    main {
        max-width: 100%;
        order: 1;
        display: block;
        margin-left: 0;
        margin-right: 0;
    }


}