html{
        --demo-colour: #D45959;
        --demo-colour93: #D4595993;
        --demo-white: #ffa8a8;
        --demo-link-white: #ffa8a8;
        --demo-header: #c051518e;
        --demo-header1: #D4595934;
        --brightness: 1;
        --darken: 1;
        --lighten: 0;
        --margins: 3px;
        --background: url(/wiki/background.png);
    }
    #darkmode:target{
        --demo-colour: #8d3c3c;
        --demo-colour93: #6b303093;
        --demo-white: #724b4b;
        --demo-link-white: #b67676;
        --demo-header: #8339398e;
        --demo-header1: #923e3e34;
        --brightness: 0.5;
        --darken: 0;
        --lighten: 1;
        --background: url(/wiki/background_dark.png);
    }
    *{
        font-family:'Courier New', Courier, monospace;
        color: white;
        margin: 0;
        transition: color 0.5s;
    }
    a.darken{
        width: calc(35px*var(--darken));
        height: calc(35px*var(--darken));
        overflow: clip;
        margin-right: 0;
        position: fixed;
        margin: 0;
    }
    a.lighten{
        width: calc(35px*var(--lighten));
        height: calc(35px*var(--lighten));
        overflow: clip;
        margin-left: 0;
        position: relative;
        margin: 0;
    }
    footer.darken{
        padding: calc(10px*var(--darken));
        width: calc(var(--darken) * calc(100% - 35px));
        height: calc(var(--darken) * 50px);
        overflow: clip;
        border-width: calc(2px*var(--darken));
    }
    footer.lighten{
        padding: calc(10px*var(--lighten));
        width: calc(var(--lighten) * calc(100% - 35px));
        height: calc(var(--lighten) * 50px);
        overflow: clip;
        border-width: calc(2px*var(--lighten));
    }
    footer.darken.arrows{
        padding: calc(10px*var(--darken));
        width: calc(var(--darken) * 40px);
        height: calc(var(--darken) * 40px);
        overflow: clip;
        border-width: calc(2px*var(--darken));
    }
    footer.lighten.arrows{
        padding: calc(10px*var(--lighten));
        width: calc(var(--lighten) * 40px);
        height: calc(var(--lighten) * 40px);
        overflow: clip;
        border-width: calc(2px*var(--lighten));
    }
    body{
        background-repeat: repeat;
        background-attachment: local;
        background-image: var(--background);
        background-size: auto;
        width: 100%;
        height: 100%;
        position: absolute;
    }
    header{
        background: var(--demo-header1);
        padding: 10px 5px;
        border-radius: 15px;
        backdrop-filter: blur(5px);
        border: var(--demo-header) solid 2px;
        top: 5px;
        position: sticky;
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        z-index: 999;
    }
    .contents{
        margin: 0 5px;
    }
    main{
        background: var(--demo-colour93);
        padding: 10px;
        border-radius: 15px;
        backdrop-filter: blur(5px);
        border: var(--demo-header) solid 2px;
        margin-top: calc(var(--margins) + 4px);
    }
    main>*{
        padding: 10px;
    }
    header>*{
        background: var(--demo-header);
        border-radius: 30px;
        width: 35px;
        height: 35px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
    }
    header>.heaader{
        display: unset;
    }
    header>.heaader>a{
        position: absolute;
        top: 7px;
    }
    header>.heaader>div{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
    }
    header>a, header>.heaader{
        transition: all 0.2s;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.178) inset;
    }
    header>a:hover, header>.heaader:hover{
        background: var(--demo-header);
        box-shadow: 0 -35px 0 0 rgba(255, 255, 255, 0.178) inset;
    }
    header>.darkmodebutton{
        transition: all 0.2s;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.178) inset;
    }
    header>.darkmodebutton:hover{
        background: var(--demo-header);
        box-shadow: 0 -35px 0 0 rgba(255, 255, 255, 0.178) inset;
    }
    #theme-toggle{
        cursor: pointer;
    }
    .title{
        background: #e4787893;
        border-radius: 15px;
        backdrop-filter: blur(5px);
        border: var(--demo-header) solid 2px;
        padding: 10px;
    }
    div>body{
        font-size: 15px;
    }
    table{
        background: var(--demo-colour93);
        padding: 10px;
        border-radius: 15px;
        backdrop-filter: blur(5px);
        border: var(--demo-header) solid 2px;
        margin-top: var(--margins);
        list-style: none;
        max-width: 350px;
        margin-left: 10px;
    }
    tr{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        align-items: center;
    }
    tr.title{
        padding: 10px;
        width: auto;
    }
    td{
        flex-grow: 1;
        max-width: 70%;
        margin: 0 15px;
    }
    td:last-child{
        flex-grow: 0;
    }
    .tabledivider{
        height: 3px;
        background-color: white;
        margin: 10px 25px;
        border-radius: 25px;
        width: auto;
    }
    details{
        transition: all 0.3s;
        background-color: #0000008e;
        border: #2e2e2e8e solid 2px;
        border-radius: 25px;
        padding: 10px;
        backdrop-filter: blur(5px);
        user-select: none;
        margin: 10px 0;
    }
    details>summary{
        transition: all 0.7s;
    }
    details:open>summary{
        color: transparent;
    }
    details>div{
        transition: all 1s;
        transform: translateY(-18px);
        position: fixed;
        margin-left: 16.941px;
    }
    details:open>div{
        position: unset;
    }
    details:open{
        background-color: var(--demo-colour93);
        border: var(--demo-header) solid 2px;
        user-select: auto;
    }
    ::-webkit-scrollbar{
        background-color: var(--demo-colour);
    }
    ::-webkit-scrollbar-thumb{
        background-color: var(--demo-white);
        border-radius: 25px;
        border: var(--demo-colour) solid 5px;
    }
    ::-webkit-scrollbar-thumb:hover{
        background-color: var(--demo-white);
        border-radius: 25px;
        border: var(--demo-colour) solid 3px;
    }
    div.infontable{
        display: flex;
        flex-direction: row;
    }
    .infontable>*{
        flex-grow: 1;
    }
    footer{
        background: var(--demo-colour93);
        padding: 10px;
        border-radius: 15px;
        backdrop-filter: blur(5px);
        border: var(--demo-header) solid 2px;
        margin-top: var(--margins);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }
    footer>*{
        padding: 0 5px;
        margin: 0 5px;
    }
    footer>a{
        transition: all 0.2s;
        text-decoration: none;
        border-bottom: 3px solid var(--demo-link-white);
        border-radius: 5px;
    }
    footer>a:hover{
        border-bottom: 0px solid var(--demo-link-white);
        background: var(--demo-link-white);
        color: var(--demo-colour);
    }
    #theme-toggle{
        position: absolute;
        width: 35px;
        height: 35px;
        opacity: 0;
    }
    footer.arrows{
        width: 40px;
        height: 40px;
    }
    footer.arrows>a{
        transition: all 0.2s;
        text-decoration: none;
        border-bottom: 3px solid var(--demo-link-white);
        border-radius: 5px;
        font-size: 30px;
    }
    .stamp{
        width: 200px;
        margin-bottom: 25px;
    }