:root {
    /* sizes */
    --width: 900px;
    --basefont: "Nunito";
    --border-radius: 10px;

    /* general colors */
    --websitebackgroundcolor: #879d6d;
    --backgroundimage: url(../websiteassets/background.png);
    --headerimage: url(../websiteassets/websiteBanner.png);
    --titlecolor: white;

    --pagecontentmaincolor: #e9ecdb;
    --pagecontentaccentcolor: #4e6137;
    --pagecontentfontonaccentcolor: #ffffff;
    --pageoutline: rgba(74, 118, 58, 0.46);

    --navbuttoncolor: #bbcda5;
    --navbuttonhovercolor: #ffffff;
    --navbuttontext: #000000;

    --textcolor: #16190f;
    --linkhovercolor: #475407;
    --linkcolor: #9a5b1a;

    /* collecting page header/deck colors */
    --collectingcolor-red: #ffdbdb;
    --collectingcolor-red-link: #613333;

    --collectingcolor-orange: #ffeee2;
    --collectingcolor-orange-link: #65432b;

    --collectingcolor-yellow: #fcfade;
    --collectingcolor-yellow-link: #58431a;

    --collectingcolor-green: #e2fce6;
    --collectingcolor-green-link: #2f6922;

    --collectingcolor-blue: #dff2fd;
    --collectingcolor-blue-link: #19445d;

    --collectingcolor-purple: #e3e3ff;
    --collectingcolor-purple-link: #2c1c5f;

    --collectingcolor-brown: #e9d4b7;
    --collectingcolor-brown-link: #3d2d14;

    --collectingcolor-gray: #d4d4d4;
    --collectingcolor-gray-link: #616161;

    --collectingcolor-special: white;
    --collectingcolor-special-link: #4f4b47;

    --creditslink: #fff575;

    @media (prefers-color-scheme: dark) {
        /* general colors */
        --websitebackgroundcolor: #211f1f;
        --pagecontentmaincolor: #191717;
        --pagecontentaccentcolor: #778d60;
        --pagecontentfontonaccentcolor: #000000;
        --pageoutline: rgba(74, 118, 58, 0.15);

        --navbuttoncolor: #778d60;
        --navbuttonhovercolor: #73a535;
        --navbuttontext: #000000;

        --textcolor: #f4f4f4;
        --linkhovercolor: #e2ae50;
        --linkcolor: #a8d38d;

        /* collecting page header/deck colors */
        --collectingcolor-red: #3b2e2e;
        --collectingcolor-red-link: #d09c9c;

        --collectingcolor-orange: #433b35;
        --collectingcolor-orange-link: #ccb3a1;

        --collectingcolor-yellow: #595634;
        --collectingcolor-yellow-link: #cbc36c;

        --collectingcolor-green: #3a5c40;
        --collectingcolor-green-link: #81ce8e;

        --collectingcolor-blue: #2b4452;
        --collectingcolor-blue-link: #71b4da;

        --collectingcolor-purple: #29294c;
        --collectingcolor-purple-link: #ababff;

        --collectingcolor-brown: #312718;
        --collectingcolor-brown-link: #dbae69;

        --collectingcolor-gray: #333333;
        --collectingcolor-gray-link: #e5e5e5;

        --collectingcolor-special: #0f0f0f;
        --collectingcolor-special-link: #979797;

        --creditslink: #9a5b1a;
    }
}

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

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

/* DO NOT CHANGE BELOW UNLESS YOU KNOW WHAT YOU'RE DOING */

/* -------------------------------------------------------- */
/* GENERAL SETUP */
/* -------------------------------------------------------- */
html {
    position: relative;
}

html,
body {
    padding: 0;
    margin: 0;
}

body {
    background-color: var(--websitebackgroundcolor);
    font-family: var(--basefont);
    font-size: 1rem;
    color: var(--textcolor);
    /* background image instead of color */
    background-image: var(--backgroundimage);
    background-attachment: fixed;
    background-repeat: repeat;
    line-height: 1.5em;
}

* {
    box-sizing: border-box;
    margin: 0;

    &:focus-visible {
        outline-color: skyblue !important;
        outline-offset: -1px !important;
        outline-style: solid !important;
        outline-width: 3px !important;
        border-color: transparent;
    }
}

a img:focus {
    opacity: 0.8;
    filter: none;
    -webkit-filter: grayscale(50%);
    -moz-filter: grayscale(50%);
    -ms-filter: grayscale(50%);
    -o-filter: grayscale(50%);
}

#sitecontainer {
    width: var(--width);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 100px;
}

section {
    margin-bottom: 30px;
}

section:last-of-type {
    margin-bottom: 0;
}

/* --------------------------------------------------s------ */
/* SCROLL TO TOP */
/* -------------------------------------------------------- */
#backscroll {
    position: fixed; /* Fixed/sticky position */
    bottom: 13px; /* Place the button at the bottom of the page */
    right: 10px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    background-color: var(--pagecontentaccentcolor);
    color: var(--pagecontentfontonaccentcolor);
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px 20px; /* Some padding */
    border-radius: var(--border-radius); /* Rounded corners */
    font-size: 1.1rem; /* Increase font size */
    transition: 0.5s;
    text-decoration: none;

    &:hover {
        background-color: var(--linkhovercolor);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
        transform: translateY(-3px);
    }
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY, DO NOT REMOVE */
/* -------------------------------------------------------- */
#skip a {
    position: absolute;
    display: inline-block;
    left: 0;
    top: -1000px;
    overflow: hidden;
    transition: top 0.5s ease;
    background: var(--pagecontentmaincolor);
    color: var(--linkcolor);
    z-index: 1000;
    padding: 10px;
}

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

/* -------------------------------------------------------- */
/* STYLING */
/* -------------------------------------------------------- */
p {
    margin: 0;
    margin-left: 5px;
    margin-right: 5px;
    padding: 0;
    margin-bottom: 8px;
}

p:last-child {
    margin-bottom: 0;
}

h1 {
    color: var(--titlecolor);
    margin-bottom: 10px;
}

h2 {
    background-color: var(--pagecontentaccentcolor);
    color: var(--pagecontentfontonaccentcolor);
    padding: 10px 0;
    border-radius: var(--border-radius);
    margin: 10px 0;
    text-transform: capitalize;
}

h2:first-of-type {
    margin-top: 0;
}

h3 {
    color: var(--pagecontentaccentcolor);
    margin: 5px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Dosis";
}

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

u,
underline {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--pagecontentaccentcolor);
}

a {
    color: var(--linkcolor);
    transition: 0.5s;
}
a:hover {
    color: var(--linkhovercolor);
    text-decoration-thickness: 2px;
}

hr {
    border: none;
    border-bottom: 1px dotted var(--pagecontentaccentcolor);
    margin-top: 10px;
}

ul {
    text-align: left;
    list-style-image: url("/img/decos/pastel_bullet.gif");
}

ul li {
    margin-bottom: 5px;
}

ul li:last-child {
    margin-bottom: 0;
}

textarea {
    background-color: var(--pagecontentmaincolor);
    color: var(--textcolor);
    border-radius: var(--border-radius);
    padding: 5px;
    border-color: var(--pagecontentaccentcolor);
    width: 50%;
    height: 70px;
}

button.sectionlink {
    height: 30px;
}

/* -------------------------------------------------------- */
/* HELPER CLASSES */
/* -------------------------------------------------------- */
.flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}
.fcol {
    flex-direction: column;
}
.center {
    justify-content: center;
    align-items: center;
    margin: auto;
}
.spaceevenly {
    justify-content: space-evenly;
}
.tleft {
    text-align: left;
}
.section {
    margin: 5px;
}
.marginimage {
    margin: 5px;
}
.cardimage {
    margin: 0;
}

/* -------------------------------------------------------- */
/* BODY */
/* -------------------------------------------------------- */
#middle {
    min-height: 500px;
    width: 100%;
    padding: 10px;
    padding-bottom: 25px;
    background-color: var(--pagecontentmaincolor);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius);
    box-shadow: 6px 6px 0 var(--pageoutline);
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */
#websiteheader {
    margin-bottom: 20px;
    background-color: white;
    padding: 20px 0;
    border-radius: var(--border-radius);
    background-image: var(--headerimage);
    outline: 3px solid var(--pagecontentaccentcolor);
}

#navbar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.navbutton {
    color: var(--navbuttontext);
    background-color: var(--navbuttoncolor);
    text-decoration: none;
    padding: 7px 10px;
    font-weight: bold;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.navbutton:hover {
    color: var(--navbuttontext);
    background-color: var(--navbuttonhovercolor);
    transform: translateY(-3px);
}

/* -------------------------------------------------------- */
/* HOME PAGE */
/* -------------------------------------------------------- */
#avatar {
    width: 80px;
}
.portfoliobutton {
    border: none;
    background-color: transparent;
    color: var(--pagecontentaccentcolor);
    font-weight: bold;
}
.portfoliohidden {
    background-color: var(--pagecontentmaincolor);
    width: max-content;
    border: 1px solid var(--pagecontentaccentcolor);
    position: absolute;
    display: none;
    text-align: left;
}
.pendingsection {
    margin: 5px;
    margin-top: 0;
}
#crayonscontainer {
    display: flex;
    width: 200px;
    justify-content: space-evenly;
}
.crayoncount {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-right: 5px;
}
#quicklinks a,
button,
article > nav a {
    background-color: var(--navbuttoncolor);
    color: var(--navbuttontext);
    border-radius: var(--border-radius);
    padding: 2px 16px;
    margin: 2px;
    text-decoration: none;
    border: none;
    transition: 0.5s;
}
#quicklinks a:hover,
article > nav a:hover,
button:hover {
    color: var(--navbuttontext);
    background-color: var(--navbuttonhovercolor);
    transform: translateY(-3px);
}
article > nav {
    margin: 10px 0;
}
#intro {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

#intro img {
    max-width: 150px;
}

/* -------------------------------------------------------- */
/* COLLECTING PAGE */
/* -------------------------------------------------------- */
.deckred {
    background-color: var(--collectingcolor-red);
}
.deckred a {
    color: var(--collectingcolor-red-link);
}
.deckorange {
    background-color: var(--collectingcolor-orange);
}
.deckorange a {
    color: var(--collectingcolor-orange-link);
}
.deckyellow {
    background-color: var(--collectingcolor-yellow);
}
.deckyellow a {
    color: var(--collectingcolor-yellow-link);
}
.deckgreen {
    background-color: var(--collectingcolor-green);
}
.deckgreen a {
    color: var(--collectingcolor-green-link);
}
.deckblue {
    background-color: var(--collectingcolor-blue);
}
.deckblue a {
    color: var(--collectingcolor-blue-link);
}
.deckpurple {
    background-color: var(--collectingcolor-purple);
}
.deckpurple a {
    color: var(--collectingcolor-purple-link);
}
.deckbrown {
    background-color: var(--collectingcolor-brown);
}
.deckbrown a {
    color: var(--collectingcolor-brown-link);
}
.deckgray {
    background-color: var(--collectingcolor-gray);
}
.deckgray a {
    color: var(--collectingcolor-gray-link);
}
.deckspecial {
    background-color: var(--collectingcolor-special);
}
.deckspecial a {
    color: var(--collectingcolor-special-link);
}
.deckCOLORNOTFOUND {
    background-color: none;
}
.deckred a:hover,
.deckorange a:hover,
.deckyellow a:hover,
.deckgreen a:hover,
.deckblue a:hover,
.deckpurple a:hover,
.deckbrown a:hover,
.deckgray a:hover,
.deckspecial a:hover {
    color: var(--linkhovercolor);
}
.deckdiv .deckred,
.deckdiv .deckorange,
.deckdiv .deckyellow,
.deckdiv .deckgreen,
.deckdiv .deckblue,
.deckdiv .deckpurple,
.deckdiv .deckbrown,
.deckdiv .deckgray,
.deckdiv .deckspecial {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.deckred,
.deckorange,
.deckyellow,
.deckgreen,
.deckblue,
.deckpurple,
.deckbrown,
.deckgray,
.deckspecial {
    border-radius: var(--border-radius);
}
.deckdiv {
    display: inline-block;
    margin: 5px;
}
.deckimgdiv {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 275px;
}
.deckheader {
    text-align: center;
    font-size: 15px;
    margin: 0;
    padding: 5px;
}
.decklink {
    text-align: center;
    font-size: 15px;
    margin: 0;
}
.neededdeckcolumn {
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 10px;
    min-width: 90px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 5px 15px;
}

#fullsetisocontainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

#singlecardscontainer,
#neededdeckscontainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

/* -------------------------------------------------------- */
/* CREDITS */
/* -------------------------------------------------------- */
#creditscontainer {
    margin-top: 20px;
    font-size: 0.8em;
}

#creditscontainer a {
    color: var(--creditslink);
}

#creditscontainer a:hover {
    color: var(--linkhovercolor);
}

/* -------------------------------------------------------- */
/* CARD DISPLAY FLEX FIX + OTHER FIXES */
/* -------------------------------------------------------- */
#newcardscontainer,
#fullcollectioncontainer > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-content: center;
}

.searchbar {
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
}

/* -------------------------------------------------------- */
/* FULL COLLECTION */
/* -------------------------------------------------------- */
#fullcollectioncontainer > div {
    margin-top: 10px;
}

.mastery {
    display: flex;
    flex-direction: row-reverse;
    height: auto;
    gap: 5px;
    text-align: left;
    padding: 10px;
    align-items: center;
}

.masteryinfo {
    flex: 40%;
}

.masteryinfo img {
    object-fit: contain;
}

.masterycards {
    text-align: center;
    align-self: center;
    justify-content: center;
    flex: 100%;
}

#masteriescontainer,
.pendingsection > div,
#signaturescontainer {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------------------- */
/* LOGS */
/* -------------------------------------------------------- */
time {
    color: var(--pagecontentaccentcolor);
    text-decoration: underline;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    line-height: 3em;
}

/* -------------------------------------------------------- */
/* Image Shadow */
/* -------------------------------------------------------- */
.imageshadow {
    filter: drop-shadow(3px 3px 0 var(--pagecontentaccentcolor));
}

/* TOOLKIT FIX */
.toolkit textarea {
    width: 100%;
}
.toolkitinputs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}

.imagetagsinputbuttons button {
    background-color: var(--navbuttoncolor);
    color: var(--navbuttontext);
    border-radius: var(--border-radius);
    border: none;
    padding: 2px 16px;
    margin: 2px;
    text-decoration: none;
    transition: 0.5s;
}

.imagetagsinputbuttons button:hover {
    color: var(--navbuttontext);
    background-color: var(--navbuttonhovercolor);
    transform: translateY(-3px);
}

input {
    background-color: var(--pagecontentmaincolor);
    color: var(--textcolor);
    border-radius: var(--border-radius);
    padding: 5px;
    border-color: var(--pagecontentaccentcolor);
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVENESS */
/* -------------------------------------------------------- */

@media screen and (max-width: 900px) {
    #sitecontainer {
        width: 100%;
        padding: 10px;
        margin-top: 10px;
    }

    #intro {
        flex-direction: column;
    }

    #intro img {
        max-width: 30%;
    }

    #quicklinks a {
        width: 30%;
        height: 3rem;
        line-height: 1.1em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mastery {
        flex-direction: column;
        align-content: center;
        justify-content: center;
        gap: 10px;
    }

    .masteryinfo {
        display: flex;
        gap: 20px;
    }

    .toolkitinputs {
        flex-direction: column;
    }
}