/* Change colors and fonts here */
:root {
    --burgericon: url(/img/burger.svg); /* Path to burger vector */
    --closeicon: url(/img/close.svg); /* Path to close vector */
    --headerimage: url(../img/deco/header_quimbee.png); /* Path to header icon */
    --border-radius: 5px;

    /*these next two colors are for when you highlight text on the page*/
    --selected-bg: #a36417;
    --selected-text: #ffffff;

    /* FONTS */
    --bodyfont: "atkinson";
    --headerfont: "ribeye";

    /* COLORS */
    --background: #e3c372; /*Main background color*/
    --backgroundpattern: #ddab6e; /*Secondary background color*/
    --color: #333; /*Body text color*/

    --header: #7d3f06; /*Header background color*/

    --bold: #ad541e; /*Bold color*/
    --italics: #9c5f18; /*Italics color*/

    /* CONTENT COLORS */
    --mainbg: #f5eee9; /*Content background color*/
    --linkcolor: #ab5603; /*Body link color*/
    --linkhover: #000000; /*Body link hover color*/

    --blockquote: rgba(50, 20, 12, 0.1); /*Blockquote*/
    --borders: #ea9128; /*Border accents*/

    --formbg: #eae1db; /*Background for text boxes/dropdown menus*/
    --formcolor: #77370a; /*Color for text boxes/dropdown menus*/
    --buttonbg: #eae1db; /*Background for submit buttons*/
    --buttonhoverbg: #e6a75d; /*Background hover for buttons*/
    --buttoncolor: #77370a; /*Color for submit buttons*/
    --buttonhovercolor: #6a4212; /*Color for submit buttons*/

    --scrollablebg: #eae1db; /*Scrollable area bg*/

    /* MENU COLORS */
    --navcolor: #333; /*Menu text color*/
    --navbg: #fbf6f2; /*Menu background color*/

    --navtextlink: #1e6070; /*Sidebar text link color*/
    --navtexthover: #ea9128; /*Sidebar text link hover*/

    --navlink: #794632; /*Menu link color*/
    --navlinkbg: #e6d9cb; /*Menu link background*/
    --navhover: #ea9128; /*Menu link hover color*/
    --navhoverbg: #fff; /*Menu link hover background*/

    --burger: #310808; /*Color for hamburger menu text/icons*/
    --overlay: rgb(0, 0, 0, 0.3); /*Color for overlay when hamburger menu is open*/

    /* FOOTER COLORS */
    --footercolor: #e0e0e0; /*Footer text color*/
    --footerbg: #7d3f06; /*Footer background color*/

    --footerlink: #ffd8b6; /*Footer link color*/
    --footerhover: #ea9128; /*Footer background color*/

    /* DARK MODE COLOURS */
    @media (prefers-color-scheme: dark) {
        /* COLORS */
        --background: #321b06; /*Main background color*/
        --backgroundpattern: #3e270c; /*Secondary background color*/
        --color: #ebebeb; /*Body text color*/

        --header: #7d3f06; /*Header background color*/

        --bold: #f3b189; /*Bold color*/
        --italics: #e8d5bf; /*Italics color*/

        /* CONTENT COLORS */
        --mainbg: #1d1c1b; /*Content background color*/
        --linkcolor: #ec9f55; /*Body link color*/
        --linkhover: #ffffff; /*Body link hover color*/

        --blockquote: rgba(255, 146, 117, 0.1); /*Blockquote*/
        --borders: #ea9128; /*Border accents*/

        --formbg: #262422; /*Background for text boxes/dropdown menus*/
        --formcolor: #ebb590; /*Color for text boxes/dropdown menus*/
        --buttonbg: #262422; /*Background for submit buttons*/
        --buttonhoverbg: #e6a75d; /*Background hover for buttons*/
        --buttoncolor: #ebb590; /*Color for submit buttons*/
        --buttonhovercolor: #6a4212; /*Color for submit buttons*/

        --scrollablebg: #35312f; /*Scrollable area bg*/

        /* MENU COLORS */
        --navcolor: #ecd9d9; /*Menu text color*/
        --navbg: #34271d; /*Menu background color*/

        --navtextlink: #1e6070; /*Sidebar text link color*/
        --navtexthover: #ea9128; /*Sidebar text link hover*/

        --navlink: #ecc6b8; /*Menu link color*/
        --navlinkbg: #542c00; /*Menu link background*/
        --navhover: #e2c49d; /*Menu link hover color*/
        --navhoverbg: #220404; /*Menu link hover background*/

        --burger: #e5ddd4; /*Color for hamburger menu text/icons*/
        --overlay: rgb(0, 0, 0, 0.3); /*Color for overlay when hamburger menu is open*/

        /* FOOTER COLORS */
        --footercolor: #e0e0e0; /*Footer text color*/
        --footerbg: #7d3f06; /*Footer background color*/

        --footerlink: #ffd8b6; /*Footer link color*/
        --footerhover: #ea9128; /*Footer background color*/
    }
}

@font-face {
    font-family: "atkinson";
    font-display: swap;
    src: url(../fonts/AtkinsonHyperlegible-Regular.ttf);
}

@font-face {
    font-family: "open dyslexic";
    font-display: swap;
    src: url(../fonts/OpenDyslexic-Regular.otf);
}

@font-face {
    font-family: "intel one";
    font-display: swap;
    src: url(../fonts/IntelOneMono-Regular.ttf);
}

@font-face {
    font-family: "ribeye";
    font-display: swap;
    src: url(../fonts/Ribeye-Regular.ttf);
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

::selection {
    background: var(--selected-bg);
    color: var(--selected-text);
}

body {
    font:
        1rem var(--bodyfont),
        sans-serif;
    color: var(--color);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background:
        radial-gradient(circle farthest-side at 0% 50%, var(--background) 23.5%, #0000 0) 25.2px 36px,
        radial-gradient(circle farthest-side at 0% 50%, var(--backgroundpattern) 24%, #0000 0) 22.8px 36px,
        linear-gradient(var(--background) 14%, #0000 0, #0000 85%, var(--background) 0) 0 0,
        linear-gradient(
                150deg,
                var(--background) 24%,
                var(--backgroundpattern) 0,
                var(--backgroundpattern) 26%,
                #0000 0,
                #0000 74%,
                var(--backgroundpattern) 0,
                var(--backgroundpattern) 76%,
                var(--background) 0
            )
            0 0,
        linear-gradient(
                30deg,
                var(--background) 24%,
                var(--backgroundpattern) 0,
                var(--backgroundpattern) 26%,
                #0000 0,
                #0000 74%,
                var(--backgroundpattern) 0,
                var(--backgroundpattern) 76%,
                var(--background) 0
            )
            0 0,
        linear-gradient(
                90deg,
                var(--backgroundpattern) 2%,
                var(--background) 0,
                var(--background) 98%,
                var(--backgroundpattern) 0%
            )
            0 0 var(--background);
    background-size: 48px 72px;
    background-color: var(--background);

    /*custom scrollbar colors~ i think it only works on some browsers tho...*/
    scrollbar-color: var(--background) var(--mainbg);
    scrollbar-width: thin;
}

/* Header styling */

header {
    width: 100%;
    height: 150px; /* You can change the height */
    border-radius: var(--border-radius);
    background: var(--headerimage) no-repeat center var(--header);
    background-size: cover;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end;
    text-align: center;
}

header p {
    padding-left: 19px;
    font-size: 2.5rem;
    font-family: "ribeye", sans-serif;
    color: white;
    text-shadow:
        -2px -2px 0 var(--header),
        2px -2px 0 var(--header),
        -2px 2px 0 var(--header),
        2px 2px 0 var(--header);
}

/* Container styling */

#container {
    width: 100%;
    max-width: 1100px;
    margin: auto;
    padding: 10px;
}

/* Wrapper for columns */

#columns {
    display: flex;
    flex-wrap: wrap;
}

/* Content styling */

main {
    width: calc(60% - 30px);
    padding: 15px;
    background: var(--mainbg);
    border-radius: var(--border-radius);
    margin: 0 10px 0 10px;
    border-width: 7px;
    border-style: solid;
    border-image: url("../img/deco/border.png") 7 round;
}

/* Remove the right portion of the sidebar */
.nosidebar {
    width: calc(80% - 44px);
}

main h1,
main .nosidebar h1 {
    font:
        1.8em var(--headerfont),
        sans-serif;
    border-bottom: 2px dashed var(--borders);
}

main h2 {
    font:
        1.6em var(--headerfont),
        sans-serif;
    border-bottom: 2px dashed var(--borders);
    margin: 5px 0 5px 0;
}

main h3 {
    font:
        1.4em var(--headerfont),
        sans-serif;
}

main h4 {
    font:
        1.3em var(--headerfont),
        sans-serif;
}

main h5 {
    font:
        1.2em var(--headerfont),
        sans-serif;
}

main h6 {
    font:
        1.1em var(--headerfont),
        sans-serif;
}

main hr {
    border: none;
    border-top: 2px dashed var(--borders);
}

main bold,
main strong,
main b {
    color: var(--bold);
}

main em,
main italics,
main i {
    color: var(--italics);
}

main abbr {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--borders) !important;
    cursor: pointer;
}

main underline,
main u {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--borders);
}

main s,
main del {
    text-decoration: line-through;
}

main mark {
    /* Text highlighted by using the <mark> element */
    text-shadow: 1px 1px 4px var(--borders);
    background-color: inherit;
    color: inherit;
}

main a,
main a:visited {
    color: var(--linkcolor);
    text-decoration: underline;
    transition: 0.2s;
}

main a:hover,
main a:focus {
    color: var(--linkhover);
    text-decoration-style: wavy;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
    margin: 0.75em 0;
}

main blockquote {
    background: var(--blockquote);
    padding: 15px;
    margin: 1em 0;
    border-radius: 10px;
}

main summary {
    background-color: var(--blockquote);
    padding: 10px;
    border-radius: var(--border-radius);
    margin: 0 -10px;
    transition: 0.2s;
}

main summary:hover {
    cursor: pointer;
    background-color: var(--borders);
}

main pre {
    margin: 1em 0 1.5em;
}

main code {
    text-transform: none;
}

main center {
    margin: 1em 0;
    padding: 0 1em;
}

/* Image Styling */

.image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.full-width-image {
    display: block;
    width: 100% !important;
    height: auto;
}

.images {
    display: flex;
    width: calc(100% + 5px + 5px);
    margin-left: -5px;
    margin-right: -5px;
}

.images img {
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 0;
    overflow: hidden;
}

/* Paragraphs and links */

p {
    margin: 10px 0 10px 0;
    line-height: 1.5;
}

main details {
    padding: 10px;
    background: var(--details);
    margin: 5px;
}

/* Form elements */

main input,
textarea,
select {
    color: var(--formcolor);
    background: var(--formbg);
    font: 1rem var(--bodyfont);
    border: 1px solid;
    padding: 5px;
}

main button,
#left button {
    color: var(--buttoncolor);
    background: var(--buttonbg);
    font: 1rem var(--bodyfont);
    border: 1px solid;
    padding: 5px;
    transition: 0.2s;
}

main button:hover,
#left button:hover {
    color: var(--buttonhovercolor);
    background: var(--buttonhoverbg);
}

/* Lists */

main ul,
main ol {
    padding-left: 20px;
    margin: 5px 0 5px 20px;
}

main li {
    margin: 7px 0 7px 0;
    line-height: 1.5;
    list-style-image: url(../img/deco/star_bullet.gif);
}

main li ul li {
    list-style-image: url(../img/deco/pixel_bee.gif);
}

main li::marker {
    color: var(--borders);
}

/* COLUMNS: */

.two-columns {
    display: flex;
}

.two-columns > * {
    flex: 1 1 0;
    margin: 0;
}

.two-columns > *:first-child {
    padding-right: 0.75em;
}

.two-columns > *:last-child {
    padding-left: 0.75em;
}

/* Styling for the sidebars */

.menu {
    padding: 5px;
    width: calc(20% - 30px);
    font-size: 0.9rem;
}

.menu section {
    margin-bottom: 10px;
    background: var(--mainbg);
    border-radius: var(--border-radius);
    padding: 10px;
    border-width: 7px;
    border-style: solid;
    border-color: var(--background);
    border-image: url("../img/deco/border.png") 7 round;
}

.menu .scrollable {
    background: var(--scrollablebg);
    border-radius: var(--border-radius);
    height: 200px;
    overflow: auto;
    padding: 10px;
}

.menu .text p {
    color: var(--navcolor);
    margin: 5px 0 5px 0;
    line-height: 1.4;
    font-size: 0.9rem;
}

.menu .text a {
    color: var(--navtextlink);
    text-decoration: none;
}

.menu .text a:hover {
    color: var(--navtexthover);
    text-decoration: underline;
}

.menu ul {
    list-style: none;
    margin: 0;
}

.menu li a {
    display: block;
    background: var(--navlinkbg);
    color: var(--navlink);
    margin: 0 0 2px 0;
    text-decoration: none;
    padding: 2px;
    transition: 0.2s;
    border-radius: var(--border-radius);
}

.menu li a:before {
    content: url(https://decohoard.carrd.co/assets/images/gallery120/9594d76f.gif);
    margin: 0 5px;
}

.menu li a:hover {
    background: var(--navhoverbg);
    color: var(--navhover);
    text-decoration: none;
}

.menu h2 {
    font: 1.3em var(--headerfont);
    color: var(--navcolor);
}

/* Site Button: */

.site-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.site-button textarea {
    font-family: monospace;
    font-size: 0.7em;
}

.site-button label,
.site-button button,
.site-button select {
    width: 100%;
}

/* Left Sidebar Styling */

#navLeftDiv {
    position: sticky;
    top: 10px;
}

#navLeftDiv .sidebar summary {
    background: var(--navlinkbg);
    color: var(--navlink);
    border-radius: var(--border-radius);
    margin: 0 0 2px 0;
    text-decoration: none;
    padding: 6px 16px;
}

#navLeftDiv .sidebar summary:hover {
    background: var(--navhoverbg);
    color: var(--navhover);
    text-decoration: none;
}

#navLeftDiv details ul li a {
    padding-left: 13px;
}

/* Footer styling */

footer {
    padding: 15px;
    text-align: center;
    margin: 10px 0 0 0;
    border-radius: var(--border-radius);
    background: var(--footerbg);
    color: var(--footercolor);
    font-size: 0.9em;
}

footer a {
    color: var(--footerlink);
    text-decoration: underline;
}

footer a:hover {
    color: var(--footerhover);
    text-decoration: none;
}

/* Hamburger menu */

#burger {
    display: none;
    width: 100%;
    position: fixed;
    top: 0;
}

#burger summary {
    list-style-type: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--burger);
    padding: 5px;
    background: var(--background);
    border-bottom: 3px solid var(--backgroundpattern);
}

#burger summary::before,
#burger[open] > summary::before {
    height: 40px;
    width: 40px;
    background: var(--burger);
}

#burger summary::-webkit-details-marker {
    display: none;
}

#burger summary::before {
    content: "";
    mask-image: var(--burgericon);
    -webkit-mask-image: var(--burgericon);
    mask-size: 40px;
    -webkit-mask-size: 40px;
}

#burger[open] > summary::before {
    content: "";
    mask-image: var(--closeicon);
    -webkit-mask-image: var(--closeicon);
    mask-size: 40px;
    -webkit-mask-size: 40px;
}

#burger[open] {
    position: fixed;
    background: var(--overlay);
}

.skip a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip a:focus {
    position: static;
    width: auto;
    height: auto;
}

#burger-menu {
    height: calc(100vh - 70px);
    overflow: auto;
    z-index: 1000;
    background: var(--navbg);
    width: 200px;
}

/* Fix links in mobile */

#burger-menu details summary {
    display: block;
    background: var(--navlinkbg);
    color: var(--navlink);
    margin: 0 0 2px 0;
    text-decoration: none;
    padding: 2px;
    padding-left: 32px;
    transition: 0.2s;
    border-radius: var(--border-radius);
    height: 20px;
    border-bottom: none;
}

#burger-menu details summary::before {
    content: auto;
}

#burger-menu details summary:hover {
    background: var(--navhoverbg);
    color: var(--navhover);
    text-decoration: none;
}

/* Accessibility stuff */

#skip a {
    position: absolute;
    display: inline-block;
    left: 0;
    top: -1000px;
    overflow: hidden;
    transition: top 0.5s ease;
    background: var(--mainbg);
    color: var(--link);
    z-index: 1100;
    padding: 5px;
}

#skip a:focus {
    top: 0;
    transition: top 0.5s ease;
}

.desktopmenulink {
    display: inline;
}
.mobilemenulink {
    display: none;
}

/* Specific */

.blinkies img,
.blinkies .ffcanvas img {
    height: 20px;
    width: 100%;
    max-width: 150px;
}

/* Generic Tools */

/*quick addon styles you can use in combination with anything*/
.center {
    text-align: center;
}
.small-text {
    font-size: smaller;
}
.no-border {
    border: none;
    padding: 0;
}

/*some parts of the layout can be hidden/shown depending on if you're on desktop or mobile*/
.mobile-only {
    display: none;
}
.pc-only {
    display: block;
}

/*this class makes stuff wrap around, very handy*/
.flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.center-img {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

.hover-grow a img {
    transition: transform 0.2s ease-in-out; /* Animation */
}

.hover-grow a img:hover {
    transform: scale(1.1);
}

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mobile */

@media screen and (max-width: 799px) {
    #container {
        width: calc(100% - 30px);
        margin-top: 50px;
        margin-left: 0;
    }

    #columns {
        display: block;
    }

    main {
        margin: auto;
        width: calc(100% - 30px);
    }

    .nosidebar {
        width: auto;
    }

    #left {
        display: none;
    }

    #burger {
        display: block;
    }

    #right {
        display: none;
    }

    .desktopmenulink {
        display: none;
    }
    .mobilemenulink {
        display: inline;
    }

    /*some parts of the layout can be hidden/shown depending on if you're on desktop or mobile*/
    .mobile-only {
        display: display;
    }
    .pc-only {
        display: none;
    }
}