body {
    --header-font: Iosevka Slab Web, monospace;
    --body-font: Atkinson Hyperlegible, sans-serif;
    --symbols-font: Symbols Nerd Font;

    --accent-color: #FF0064;

    background-image: url("/image/carpet_textured.png");
    background-color: #302650;
    background-attachment: fixed;
    background-size: auto;


    font-family: var(--body-font);
    font-size: 18px
}

.background-gradient {
    background: linear-gradient(0deg,rgba(6, 0, 23, 0.8) 0%, rgba(9, 7, 11, 0.8) 30%, rgba(17, 14, 22, 0.6) 70%, rgb(51, 0, 255, 0.3) 90%);
    background-attachment: scroll;
    background-size: cover;
    position: fixed; /* Sit on top of the page content */
    display: block;
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: -1; /* Specify a stack order in case you're using a different order for other elements */
}

.label-text {
    font-family: Iosevka Slab Web, monospace; 
    font-weight: 500;
    text-shadow: 1px 1px var(--text-color-inverted);
}

.markdown-p {
    line-height: 1.4em;
    margin-bottom: 1em; /* between paragraphs */
    -webkit-text-stroke: 6px var(--text-stroke);
    paint-order: stroke fill;
}

:is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--header-font);
    font-weight: bold;
    text-shadow: 1px 1px var(--text-color-inverted);
}

.markdown-h1 {
    display: inline-block; 
    background: var(--accent-main-dark);
    padding: 0.1em 0.25em;
    box-shadow: -2px 3px 5px #0b001bb6 inset;
    border: 4px solid;
    border-color: var(--text-background-dark) var(--text-background-dark) var(--text-background-light) var(--text-background-light);
    border-radius: 7px;
}

.tab {
    background-image: linear-gradient(0deg,var(--accent-main-dark) 0%, var(--accent-main-color) 30%);
    transition: 75ms;
    border: 5px solid;
    border-bottom: 0;
    margin-top: 5px;
    border-color: var(--accent-main-lighter) var(--accent-main-lighter) var(--accent-main-dark) var(--accent-main-dark);
    border-radius: 7px 7px 0px 0px;
}

.tab:hover {
    background-image: linear-gradient(0deg,var(--accent-main-color) 0%, var(--accent-main-light) 30%);
    margin-top: 0px;
}

.active-tab {
    background-image: linear-gradient(0deg,var(--accent-main-darker) 0%, var(--accent-main-dark) 20%);
    border: 5px solid;
    border-color: var(--accent-main-darker) var(--accent-main-darker) var(--accent-main-color) var(--accent-main-color);
    position: relative;
    margin-top: 12px;
    border-radius: 7px 7px 0px 0px;
    border-bottom: 0;
}

.main-text {
    box-shadow: -2em 2em 7em var(--text-background-lighter) inset, 0em 6px 12px #000000;
    color: var(--text-color);
    backdrop-filter: blur(7px);
    border: 5px solid;
    border-color: var(--text-background-lightest) var(--text-background-lightest) var(--text-background-lighter) var(--text-background-lighter) ;
}

.panel-button {
    display: inline-block; 
    background-image: linear-gradient(0deg, var(--text-background-light) 0%, var(--text-background-lighter) 100%);
    box-shadow: 0px 5px 10px #00000082;
    border-radius: 7px;
    top: 0px;
    position: relative;
    transition: top ease 100ms;
    transition: 75ms;
}
.panel-button:hover {
    background-image: linear-gradient(0deg, var(--text-background-lighter) 0%, var(--text-background-blacklight) 100%);
    box-shadow: 0px 10px 15px #00000082;
    cursor:pointer;
    top: -5px;
}
.panel-button:disabled {
    background-image: linear-gradient(0deg, var(--text-background-dark) 0%, var(--text-background-darker) 100%);
    box-shadow: 0px 10px 15px #00000082;
    opacity: 50%;
    cursor:unset;
    top: 0px;
}

.inline-img {
    position: relative;
    right: -1em;
    float: right;
    width: 15em;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0px 5px 10px #00000082;
}

.panel-header {
    background-image: linear-gradient(0deg, var(--text-background-dark) 0%, var(--text-background-color) 100%);
    box-shadow: 0px 5px 10px #00000082;
    border-radius: 7px;
    top: 0px;
}
.panel {
    display: inline-block; 
    background-image: linear-gradient(0deg, var(--text-background-light) 0%, var(--text-background-lighter) 100%);
    box-shadow: 0px 5px 10px #00000082;
    border-radius: 7px;
    top: 0px;
}