/* ==UserStyle==
@name           Duopedia
@namespace      github.com/5qc
@version        1.0.0
@description    Converts the English Wikipedia into a Duolingo-themed site.
@author         5qc
@preprocessor   stylus

@var checkbox font    "📝 Duolingo Font"           1
@var checkbox cursor  "🖱️ Default Cursor"           1
==/UserStyle== */

@-moz-document domain("en.wikipedia.org") {
    @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap");

    @font-face {
        font-family: din-round;
        font-style: normal;
        font-weight: 500;
        src: url("https://cdn.glitch.me/069b27cc-dc75-4cbb-8109-ed47593639c5%2Fdin-round-500.woff2?v=1634352058595");
    }
    @font-face {
        font-family: din-round;
        font-style: normal;
        font-weight: 700;
        src: url("https://cdn.glitch.me/069b27cc-dc75-4cbb-8109-ed47593639c5%2Fdin-round-700.woff2?v=1634352028117");
    }
    @font-face {
        font-family: feather;
        font-style: normal;
        font-weight: 700;
        src: url("//cdn.glitch.global/eb49ccc8-ffaa-44bb-8f04-39053cb25379/Feather-Bold.woff?v=1649298905577") format("woff"),
             url("//cdn.glitch.global/eb49ccc8-ffaa-44bb-8f04-39053cb25379/Feather-Bold.woff2?v=1649298920838") format("woff2");
    }

    :root {
        --font: din-round, sans-serif;
        --title-font: var(--font);
        --code-font: "Roboto Mono", monospace;
        --border: 2px solid #e5e5e5;
        --trans: transparent;
        --bg: #fff;
        --br: 15px;
        --color: #4c4c4c;
        --black: #000;
        --red: #ff4b4b;
        --fs: 17px;

        --search-bg: #f7f7f7;

        --link-color: #1cb0f6;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background: var(--bg);
        color: var(--color);
        font-size: var(--fs);
        if cursor == 1 {
            cursor: default;
        } else {
            cursor: auto;
        }
    }
    
    if bgImage == 1 {
        .mw-parser-output img:first-of-type:not(.flagicon > * > img, .flagicon > img, img[alt="flag"], .mbox-image > * > * > img, img[alt="Stub icon"], .mbox-image > img,  img.wmamapbutton, .id > img, .mbox-image > div > img, img[alt="Disambiguation icon"], img[alt="edit"]) {
            position: fixed !important;
            height: 100vh !important;
            width: 100vw !important;
            top: 0;
            left: 0;
            opacity: .5;
            z-index: -99999 !important;
            pointer-events: none;
            filter: blur(5px);
            object-fit: cover;
            background-size: cover !important;
        }
    }

    * {
        if font == 1 {
            font-family: var(--font);
        } else {
            font-family: sans-serif;   
        }
    }

    hr {
        border: 0 !important;
        border-top: var(--border) !important;
        height: 0;
        margin: 20px 0;
        background: none;
    }

    .mw-parser-output {
        font-size: var(--fs);
    }

    a {
        color: var(--link-color);
        text-decoration: none;
        
        &:link, &:hover, &:visited, &:active {
            text-decoration: none;
        }
        &:visited, &:active {
            color: var(--link-color);
        }
        
        &.new, &.new:visited, &.new:active {
            color: var(--red) !important;
            text-decoration: none;
        }
        &.external, &.external:visited, &.external:active, &.extiw {
            color: var(--link-color) !important;
            text-decoration: none;
        }
    }
    
    abbr {
        color: inherit !important;
        
        &:hover {
            cursor: default;
        }
        &[title] {
            border-bottom: none;
            text-decoration: underline dotted;
        }
    }

    code *,
    pre * {
        font-size: 95% !important;
        font-family: monospace !important;
    }

    .mw-body {
        border: none;
    }
    #mw-toc-heading {
        font-family: var(--font) !important;
    }

    /*** Stuff ***/
    .firstHeading,
    .infobox-title,
    .mw-headline,
    body.ns-14 h2:first-of-type {
        if font == 1 {
            font-family: var(--title-font) !important;
            font-weight: bold;
        } else {
            font-family: "Times New Roman", serif;
        }
    }

    h1, h2, h3, h4, h5, h6 {
        if font == 1 {
            font-family: var(--title-font) !important;
        } else {
            font-family: "Times New Roman", serif;
        }
        border: none !important;
    }
    *:not(.infobox) {
        h1 {
            &:not(.firstHeading) {
                font-size: 24px !important;
                color: var(--color);
                font-weight: bold;
            }
        }
        h2 {
            &:not(#mw-toc-heading) {
                font-size: 24px !important;
                color: var(--color);
                font-weight: 500 !important;
            }
        }
        h3 {
            font-size: 15px !important;
            color: var(--color);
            font-weight: bold;
            text-transform: uppercase;
        }
        h4 {
            font-size: 18px !important;
            color: var(--color);
            font-weight: bold;
        }
        h5 {
            font-size: 15px !important;
            color: var(--color);
            font-weight: bold;
        }
        h6 {
            font-size: 13px !important;
            color: #999;
            font-weight: bold;
            text-transform: uppercase;
        }
    }
    
    .mw-editsection {
        display: inline-block;
        overflow: hidden;
        content: "" !important;
        text-transform: lowercase;
        
        &-bracket {
            display: none;
        }
        a::before {
            height: 100%;
            content: "✏️ ";
            position: relative;
            font-size: 11px;
        }
    }
    
    .thumbcaption {
        text-align: center !important;
    }

    #mw-panel {
        position: static;
    }

    .oo-ui-actionFieldLayout-input ~ .oo-ui-actionFieldLayout-button {
        padding-left: 5px !important;
    }

    .firstHeading,
    h1 {
        border: none;
        margin: 0 !important;
    }

    .tsingle,
    .trow,
    .thumbimage,
    .image {
        border: none !important;
    }
    .thumbimage {
        width: fit-content !important;
        height: fit-content !important;
        margin: 0 !important;
    }
    .oo-ui-buttonElement ~ .oo-ui-buttonElement {
        margin-left: 5px !important;
    }
    .oo-ui-buttonElement:hover {
        cursor: pointer !important;
    }

    :not(.mw-collapsible-content) > .ambox,
    .mbox-small,
    .toc,
    .portal-bar,
    .catlinks,
    .thumbinner,
    .dmbox,
    .portalbox,
    .navbox,
    .sidebar,
    .imbox,
    .ombox,
    #filetoc,
    .module-shortcutboxplain,
    .cmbox,
    .toccolours,
    .mbox-small-left,
    .userboxes,
    .wikipediauserbox {
        background: var(--bg);
        border: var(--border);
        border-radius: var(--br);
    }
    .wikipediauserbox > table {
        border-radius: var(--br) !important;
    }
    .wikipediauserbox > table > tbody > tr:first-child > td {
        background: var(--trans) !important;
    }
    .wikipediauserbox > table > tbody > tr:first-child > td:first-child {
        border-radius: var(--br) 0px 0px var(--br) !important;
    }
    .wikipediauserbox > table > tbody > tr:first-child > td:first-child > a > img {
        border-radius: var(--br) 0px 0px var(--br) !important;
    }
    #filetoc, .catlinks {
        width: fit-content;
        margin: auto;
        
        li {
            &:last-child {
                padding-right: 0 !important;
                margin-right: 0 !important;
            }
        }
    }
    .portalbox ul {
        padding: 2.5px !important;
        background: var(--trans) !important;
    }
    .ambox ~ .ambox {
        margin-top: 5px !important;
    }
    
    delete = ambox-delete, ambox-speedy
    for delete in delete {
        .{delete} {
            background: var(--red) !important;
            border: 2px solid var(--red) !important;
            color: white;
        }
        .{delete} a,
        .{delete} a.external {
            color: white;
            text-decoration: underline;
        }
        .{delete} a:hover,
        .{delete} a.external:hover {
            text-decoration: none;
        }
    }

    .thumbinner img {
        transform: scale(0.925);
    }

    .portal-bar {
        margin-bottom: 5px !important;
        border: var(--border) !important;
    }

    #content {
        padding: 0px;
        margin: 100px auto 0px auto;
        width: 75%;
    }

    #mw-page-base,
    [id^="ca-nstab-"],
    #ca-view,
    #ca-watch,
    #p-cactions,
    #p-logo,
    #ca-nstab-user,
    #ca-unwatch,
    #n-contents,
    #n-currentevents,
    #n-aboutsite,
    #n-contactpage,
    #n-sitesupport,
    #p-interaction,
    #p-coll-print_export,
    #p-wikibase-otherprojects,
    #t-whatlinkshere,
    #t-recentchangeslinked,
    #t-upload,
    #t-specialpages,
    #t-permalink,
    #t-cite,
    #t-wikibase,
    #p-tb-label,
    #t-print,
    #p-electronpdfservice-sidebar-portlet-heading
    .cx-campaign-contributionsmenu {
        display: none !important;
    }
    .vector-menu-tabs {
        background: none;
    }

    .vector-search-box-input,
    .oo-ui-tagMultiselectWidget-handle,
    .oo-ui-inputWidget-input {
        background-color: var(--search-bg) !important;
        border: var(--border) !important;
        border-radi...