@font-face {
    font-family: "SF New Republic Bold";
    src: url("assets/fonts/SF\ New\ Republic\ Bold.ttf");
}

:root {
    --global-color: #FF0000;
    --muted-global-color: #FF00007F;
    --topbar-bg-color: #262626;
    --background-color: black;
    --text-color: white;
    --logo-background-color: var(--topbar-bg-color);
    --border-radius: 0px;
}

.global_color {
    color: var(--global-color);
}

.global_color_bg {
    background-color: var(--global-color);
}

.global_color_border {
    border-color: red;
}

.topbar_bg_color {
    background-color: var(--topbar-bg-color);
}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    user-select: none;
}

div#stickytop {
    z-index: 1;
    /* backdrop-filter: blur(5px); */
}

ul#topbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: scroll;
    white-space: nowrap;
    height: 64px;
    background-color: var(--topbar-bg-color);
}

ul#topbar::-webkit-scrollbar {
    display: none;
}

ul#topbar li {
    display: inline-block;
}

ul#topbar li * {
    text-align: center;
    text-decoration: none;
}

img#logo {
    float: left;
    background-color: var(--logo-background-color);
    height: 64px;
}

ul#topbar li.lnk {
    line-height: 64px;
}

ul#topbar li.lnk a {
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    color: var(--text-color);
}

ul#topbar li.lnk.current {
    background-color: var(--global-color);
}

ul#topbar:hover li.lnk:not(.current):hover {
    background-color: var(--global-color);
}

ul#topbar:has(li.lnk:not(.current):hover) li.lnk.current {
    background-color: var(--muted-global-color);
    /* background-color: unset; */
}

div#topbar_underline {
    padding-top: 1px;
    padding-bottom: 1px;
    text-align: center;
    background-color: var(--global-color);
}

a {
    color: var(--global-color);
}

div#content {
    user-select: text;
    /* margin-top: 0px; */
    overflow: auto;
    z-index: 0;
}

div#content > * {
    max-width: 100%;
}

div#content > img {
    max-width: 95%;
    border-radius: var(--border-radius);
    border-width: 2px;
    border-style: solid;
    border-color: var(--global-color);
}

div#content > iframe {
    margin-top: 10px;
    margin-bottom: 10px;

    border-radius: var(--border-radius);
    border-width: 2px;
    border-style: solid;
    border-color: var(--global-color);
}

div#content .no_border {
    border: none;
}

div#content hr {
    margin-top: 5px;
    margin-bottom: 5px;

    border-color: var(--global-color);
    
}

div#content .card {
    background-color: var(--global-color);
    padding: 10px;
    font-size: 32px;
    font-weight: bold;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    width: fit-content;
    border-radius: var(--border-radius);
}

div#content form input[type=file] {
    background-color: var(--topbar-bg-color);
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
    border-radius: var(--border-radius);
}

div#content form input[type=file]::file-selector-button {
    border: none;
    background-color: var(--global-color);
    font-size: 32px;
    font-weight: bold;
    color: var(--text-color);
    border-radius: var(--border-radius);
}

div#content form input[type=submit] {
    border: none;
    background-color: var(--global-color);
    color: var(--text-color);
    padding: 10px;
    font-size: 32px;
    font-weight: bold;
    border-radius: var(--border-radius);
}

div#content form input[type=text] {
    padding-left: 15px;
    color: var(--text-color);
    font-size: 24px;
    font-weight: bold; 
    outline: none;
    border: none;
    border-radius: var(--border-radius);
}

div#content .disabled {
    pointer-events: none;
    opacity: 0.5;
}

div#content a.download_card {
    display: table;
    width: 100%;
    background-color: var(--global-color);
    color: var(--text-color);
    text-align: left;
    user-select: none;
    text-wrap: wrap;
    border-radius: var(--border-radius);
}

div#content a.download_card span {
    padding-left: 15px;
    text-align: left;
    width: 100%;
}

div#content a.download_card + a.download_card {
    margin-top: 5px;
}

div#content a.download_card.unavailable_download {
    background-color: grey;
    pointer-events: none;
    opacity: 0.5;
}

div#content a.download_card * {
    display: table-cell;
    vertical-align: middle;
}

div#content a.download_card img {
    height: 64px;
}

div#content div.popcard {
    width: fit-content;
}

div#content div.popcard + div.popcard {
    margin-top: 5px;
}

div#content div.popcard label.popcard_header {
    display: table;
    margin: auto;
    min-height: 64px;
    width: 100%;
    background-color: var(--global-color);

    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);

    cursor: pointer;
}

div#content div.popcard label.popcard_header * {
    display: table-cell;
    vertical-align: middle;
}

div#content div.popcard label.popcard_header input[type="checkbox"] {
    display: none;
}

div#content div.popcard label.popcard_header .popcard_title {
    padding-left: 15px;
    text-align: left;
    font-weight: bold;
}

div#content div.popcard label.popcard_header .popcard_header_dropdown_icon {
    margin-right: 15px;
    text-align: right;
    padding-left: 15px;
    padding-right: 15px;
    width: 5px;
}

div#content div.popcard label.popcard_header img.arrow {
    rotate: 0deg;
    color: var(--topbar-bg-color);
    height: 24px;
    user-select: none;

    transition: rotate 500ms;
}

div#content div.popcard label.popcard_header:has(input:checked) img.arrow {
    rotate: 90deg;
}

div#content div.popcard div.popcard_content_container {
    grid-template-rows: 0fr;
    transition: grid-template-rows 500ms;
    display: grid;
}

div#content div.popcard div.popcard_content_container div.popcard_content {
    overflow: hidden;
    background-color: var(--topbar-bg-color);

    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

div#content div.popcard:has(label.popcard_header input:checked) div.popcard_content_container {
    grid-template-rows: 1fr;
}