@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@font-face {
    font-family: "Cafeta";
    src: url("assets/fonts/Cafeta.ttf");
}

@font-face {
    font-family: "BigNoodle";
    src: url("assets/fonts/BigNoodle.ttf");
}

@font-face {
    font-family: "MuseoSans";
    src: url("assets/fonts/MuseoSans.ttf");
}

@font-face {
    font-family: "Ordner";
    src: url("assets/fonts/Ordner.ttf");
}

@font-face {
    font-family: "City";
    src: url("assets/fonts/City.ttf");
}

:root {
    --primary-hue: 320;
    --primary-sat: 40%;
    
    --secondary-hue: 0;
    --secondary-sat: 0%;
    
    --accent-hue: 125;
    --accent-sat: 88%;
    
    --danger-sat: 60%;
    
    --code-color: #f384ff;
    
    --primary-lighter: hsl(var(--primary-hue), var(--primary-sat), 55%);
    --primary-light: hsl(var(--primary-hue), var(--primary-sat), 45%);
    --primary-base: hsl(var(--primary-hue), var(--primary-sat), 35%);
    --primary-dark: hsl(var(--primary-hue), var(--primary-sat), 25%);
    --primary-darker: hsl(var(--primary-hue), var(--primary-sat), 15%);
    
    --secondary-lighter: hsl(var(--secondary-hue), var(--secondary-sat), 55%);
    --secondary-light: hsl(var(--secondary-hue), var(--secondary-sat), 45%);
    --secondary-base: hsl(var(--secondary-hue), var(--secondary-sat), 35%);
    --secondary-dark: hsl(var(--secondary-hue), var(--secondary-sat), 25%);
    --secondary-darker: hsl(var(--secondary-hue), var(--secondary-sat), 15%);
    --secondary-darkest: hsl(var(--secondary-hue), var(--secondary-sat), 5%);
    
    --danger-lighter: hsl(0, var(--danger-sat), 55%);
    --danger-light: hsl(0, var(--danger-sat), 45%);
    --danger-base: hsl(0, var(--danger-sat), 35%);
    --danger-dark: hsl(0, var(--danger-sat), 25%);
    --danger-darker: hsl(0, var(--danger-sat), 15%);
    --danger-darkest: hsl(0, var(--danger-sat), 5%);
    
    --accent-lightest: hsl(var(--accent-hue), var(--accent-sat), 80%);
    --accent-lighter: hsl(var(--accent-hue), var(--accent-sat), 70%);
    --accent-light: hsl(var(--accent-hue), var(--accent-sat), 60%);
    --accent-base: hsl(var(--accent-hue), var(--accent-sat), 50%);
    --accent-dark: hsl(var(--accent-hue), var(--accent-sat), 40%);
    --accent-darker: hsl(var(--accent-hue), var(--accent-sat), 30%);
    --accent-darkest: hsl(var(--accent-hue), var(--accent-sat), 20%);
    
    --primary-text: #ffffff;
    --secondary-text: #cccccc;
}

a, a:active, a:visited, .accent-link, .accent-link:active, -accent-link:visited { color: var(--accent-base); }
a:hover, .accent-link:hover { color: var(--accent-lightest); text-decoration: none; }

.btn-success {
    background-color: var(--accent-dark);
    border-color: var(--accent-darker);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-success:hover {
    background-color: var(--accent-darker);
    border-color: var(--accent-darkest);
}

.btn-secondary, .btn-secondary:focus {
    background-color: var(--secondary-base);
    border-color: var(--secondary-dark);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-secondary:hover {
    background-color: var(--secondary-light);
    border-color: var(--secondary-base);
}

.show>.btn-secondary.dropdown-toggle {
    background-color: var(--secondary-light);
    border-color: var(--secondary-base);
}

.show>.btn-secondary.dropdown-toggle:hover {
    background-color: var(--secondary-lighter);
    border-color: var(--secondary-light);
}

.dropdown-secondary {
    background: rgb(64,64,64);
    background: linear-gradient(0deg, rgba(48, 48, 48,1) 0%, rgba(64,64,64,1) 2%, rgba(64,64,64,1) 98%, rgba(48, 48, 48,1) 100%);
    box-shadow: 0px 0px 4px black;
    
    border-top: 2px solid rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}

.dropdown-secondary > .dropdown-item { color: var(--secondary-text); }
.dropdown-secondary > .dropdown-header { 
    color: var(--secondary-text); 
    background-color: var(--secondary-base); 
    margin-bottom: 0.5em;
    border-top: 1px solid var(--secondary-light);
    border-bottom: 1px solid var(--secondary-darker);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.dropdown-secondary > a { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
.dropdown-secondary > a:hover { 
    color: var(--accent-base); 
    background-color: var(--secondary-darker);
}

/* -------------------------------------------------- */

.user-avatar { background: black; }

.user-avatar img { 
    box-shadow: 0px 0px 4px black; 
    border-right: 1px solid var(--secondary-base);
    border-bottom: 1px solid var(--secondary-base);
    border-left: 1px solid var(--secondary-darker);
    border-top: 1px solid var(--secondary-darker);
}

.user-info-rank {
    margin-left: auto;
    font-family: 'Ordner';
    font-size: 14pt;
}

/* -------------------------------------------------- */

.cafeta { font-family: 'BigNoodle'; }
.microgramma { font-family: 'Ordner'; }
.headache { font-family: 'MuseoSans'; }

/* -------------------------------------------------- */

#blurrer-small, #blurrer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

#blurrer-small { z-index: -5; }
#blurrer { z-index: -4; display: none; }

/* -------------------------------------------------- */

.comment-holder {
    background-color: var(--secondary-dark);
    padding: 0.5em;
    margin: 0.5em;
    margin-top: 1.0em;
    margin-bottom: 1.0em;
    border-radius: 0.25em;
    
    border-left: 1px solid var(--secondary-light);
    border-top: 1px solid var(--secondary-light);
    border-right: 1px solid var(--secondary-darker);
    border-bottom: 1px solid var(--secondary-darker);
    
    position: relative;
}

.comment-deleted {
    opacity: 0.25;
}

.comment-author-holder {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
    padding: 0.25em;
    background-color: var(--secondary-base);
    text-shadow: 1px 1px 2px black;
    font-family: 'Cafeta';
    font-size: 16pt;
    border-radius: 0.25em;
    
    border-right: 1px solid var(--secondary-light);
    border-bottom: 1px solid var(--secondary-light);
    border-left: 1px solid var(--secondary-darker);
    border-top: 1px solid var(--secondary-darker);
}

.comment-date {
    opacity: 0.5;
    font-size: 10pt;
    text-align: right;
    margin-top: 1.0em;
    background-color: var(--secondary-darker);
    padding: 0.25em;
    border-radius: 0.25em;
}

.comment-text {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 11pt;
}

.comment-entry-holder {
    padding-bottom: .5em;
    border-bottom: 1px solid var(--secondary-base);
}

.comment-entry-holder > form > textarea {
    width: 100%;
    resize: none;
    background-color: var(--secondary-light);
    color: var(--text-primary);
    padding: 0.5em;
    border-right: 1px solid var(--secondary-lighter);
    border-bottom: 1px solid var(--secondary-lighter);
    border-left: 1px solid var(--secondary-darker);
    border-top: 1px solid var(--secondary-darker);
    outline: none;
    font-size: 11pt;
}

.comment-entry-holder > form > textarea::placeholder { color: var(--text-primary); opacity: 0.5; }
.comment-entry-holder > form > .btn { padding: .2rem 1rem; }

.comment-delete {
    padding: 0.0rem 0.3rem;
    position: absolute;
    right: 0.3em;
    top: 0.3em;
    border-radius: 1em;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25);
}

/* -------------------------------------------------- */

.progress-bar-block { 
    border-radius: 1em !important; 
    padding: 0.5em !important;
    -webkit-animation: fade-me-in 1.0s;
    animation: fade-me-in 1.0s;
    position: relative;
 }
.progress { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); border-radius: 1em !important; background-color: rgba(255, 255, 255, 0.1); position: relative; }
.progress-bar { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); border-radius: 1em !important; box-shadow: 0px 0px 8px lime; }
.progress-text-display
{
    position: absolute;
    left: 0;
    height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-star {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    color: var(--accent-base);
}

.progress-star img { 
    filter: drop-shadow( 0px 0px 4px rgba(0, 0, 0, .7)); 
    -webkit-animation: wheel-spin 1s infinite linear; 
    width: 2em;
    height: 2em;
}

/* -------------------------------------------------- */

.photoview-holder {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    padding-bottom: 4em;
    padding-left: 12.5vw;
    padding-right: 12.5vw;
    padding-top: 9em;
    backdrop-filter: blur(4px);
    -webkit-animation: fade-me-in 0.5s;
    animation: fade-me-in 0.25s;
}

.photoview-container {
    background: linear-gradient(180deg, var(--primary-base) 0%, var(--primary-dark) 100%);
    width: 100%;
    height: 100%;
    border-radius: 1em;
    box-shadow: 0px 0px 1em var(--primary-dark);
    border-top: 2px solid var(--primary-light);
    border-left: 2px solid var(--primary-light);
    padding: 0.5em;
    display: flex;
    flex-direction: column;
}

.photoview-main {
    width: 100%;
    background-color: black;
    flex-grow: 1;
    border-radius: 0.5em 0.5em 0 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-right: 2px solid var(--primary-light);
    border-bottom: 2px solid var(--primary-light);
    border-left: 2px solid var(--primary-dark);
    border-top: 2px solid var(--primary-dark);
    box-shadow: inset 0px 0px 2em black;
}

.photoview-info {
    color: rgba(255, 255, 255, 0.5);
    background-color: var(--secondary-darker);
    color: var(--primary-text);
    text-align: center;
    margin-top: 0.25em;
    border-radius: 0 0 0.5em 0.5em;
    padding: 0.25em;
    border-right: 1px solid var(--primary-light);
    border-bottom: 1px solid var(--primary-light);
    border-left: 1px solid var(--primary-darker);
    border-top: 1px solid var(--primary-darker);
}

/* -------------------------------------------------- */

.tabs-root {
}

.tabs-item {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.5em 0.5em 0 0;
    border-left: 1px solid var(--secondary-light);
    border-top: 1px solid var(--secondary-light);
    border-right: 1px solid var(--secondary-dark);
    transition:  background-color 0.2s ease-in;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    opacity: 0.6;
    padding: 0.5em;
    padding-left: 0.75em;
    padding-right: 0.75em;
}

.tabs-item-active {
    opacity: 1.0;
}

.tabs-item:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transition: background-color 0.2s ease-in;
    cursor: pointer;
}

.tabs-content {
    display: block;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1em;
    border-radius: 0 0.25em 0.25em 0.25em;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------- */

.nav-item-right { margin-left: 1em; display: inline-block; }
.nav-link { color: rgba(255, 255, 255, 0.8) !important; transition: all 0.2s ease-in; }
.nav-link:hover { color: rgba(255, 255, 255, 1.0) !important; transition: all 0.2s ease-in; }
.navbar-brand { opacity: 0.8; transition: all 0.2s ease-in; }
.navbar-brand:hover { opacity: 1.0; transition: all 0.2s ease-in; }
.navbar { border-bottom: 1px solid rgba(255, 255, 255, 0.5); }

.centered-check {
    display: flex;
    align-items: center;
}

.centered-check .form-check-input { margin-top: 0; }

code { 
    margin-left: 0.25em; 
    margin-right: 0.25em; 
    color: var(--code-color);
}

.code-block {
    margin-left: 0.25em; 
    margin-right: 0.25em; 
    padding: 0.6em;
    border-radius: 0.5em;
    background-color: rgba(0, 0, 0, 0.25);
    font-family: Monospace;
    font-size: 10pt;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.fake-li { display: inline-block; }
.fake-li > div { display: list-item; list-style-type: "•"; padding-left: 0.45em; padding-top: 0.1em; padding-bottom: 0.1em; }

.fake-h { 
    display: inline-block; 
    width: 100%;
    margin-bottom: 0.2em; 
    font-family: 'Cafeta';
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.fake-h.h3 { border-bottom: none; }

h1, h2, h3, h4 { font-family: 'BigNoodle'; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
.styled-description h1, .styled-description h2, .styled-description h3, .styled-description h4 { font-family: 'MuseoSans'; text-transform: none; }
.styled-description a > img { max-width: 100%; }

.align-center { text-align: center; display: inline-block; width: 100%; }

.main-container {
    padding: 2em;
    margin-top: 2em;
    margin-bottom: 2em;
    
    color: var(--primary-text);
    
    background-image: url("assets/grunge_speck.png");
    
    border-radius: 1em;
    position: relative;
}

.main-container-detail {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    border-radius: 1em;
    box-shadow: 0em 0em 2em var(--primary-dark);
    background: linear-gradient(180deg, var(--primary-base) 0%, var(--primary-dark) 100%);
    border: 3px solid rgba(255, 255, 255, 0.25);
    z-index: -1;
}

@-moz-keyframes wheel-spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes wheel-spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes wheel-spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.loading-text-centered, .loading-wheel {
    margin-left: auto;
    margin-right: auto;

    position: absolute;
}

.loading-wheel {
    left: 30px; 
    top: 30px; 
    -webkit-animation: wheel-spin 1s infinite linear;
}

.loading-text-centered {
    color: #ffffff;
    font-weight: bold;
    opacity: 0.5;
    font-size: 14pt;
    text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.5);
    text-align: center;
    width: 100%;
    top: 45%;
    left: 0;
}

.thaw-label-bar { 
    background: rgb(17,17,17);
    background: linear-gradient(90deg, rgba(45,45,45,1) 0%, rgba(75,75,75,1) 10%, rgba(85,85,85,1) 50%, rgba(75,75,75,1) 90%, rgba(45,45,45,1) 100%);
}

.text-sh { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); }

.item-thumbnail, .item-info-block {
    background-color: var(--secondary-darker);
    
    border-bottom: 1px solid var(--secondary-darkest);
    border-right: 1px solid var(--secondary-darkest);
    border-left: 1px solid var(--secondary-dark);
    border-top: 1px solid var(--secondary-dark);
    
    background-image: url("assets/grunge_speck.png");
    background-size: 50% auto;
    background-blend-mode: soft-light;
}

.item-thumbnail-holder { min-width: 400px; }
.item-thumbnail-description { padding-left: 1em; padding-right: 1em; }
.item-thumbnail-title, .item-thumbnail-image, .item-thumbnail-author, .item-thumbnail-description { width: 100%; text-align: center;  }
.item-thumbnail-title { border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 24pt; text-transform: uppercase; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); background-color: var(--secondary-dark); border-radius: 0.25em 0.25em 0 0; box-shadow: 0px 2px 4px black; }
.item-thumbnail-title-small { font-size: 20pt; }
.item-thumbnail-title a { color: var(--primary-text); }
.item-thumbnail-title a:hover { color: var(--primary-text); }
.item-thumbnail-author { 
    font-size: 12pt; 
    opacity: 0.6; 
    font-family: 'MuseoSans'; 
    display: flex;
    align-items: center;
    padding: 0.5em;
    background-color: var(--secondary-darkest);
    border-radius: 0 0 0.5em 0.5em;
    box-shadow: 0px 2px 0px black;
    margin-bottom: 0.5em;
}
.item-thumbnail-rating {
    font-family: sans-serif;
    display: flex;
}
.item-thumbnail-info {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    text-align: right;
}
.item-thumbnail-downloads {
    margin-top: 0.25em;
    font-size: 10pt;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
    position: relative;
}

.gg-software-download {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  width: 16px;
  height: 6px;
  border: 2px solid;
  border-top: 0;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  margin-top: 8px;
  margin-right: 4px;
  top: 2px;
  opacity: 0.75;
}

.gg-software-download::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 8px;
  height: 8px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(-45deg);
  left: 2px;
  bottom: 4px;
}

.gg-software-download::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-radius: 3px;
  width: 2px;
  height: 10px;
  background: currentColor;
  left: 5px;
  bottom: 5px;
}

.item-thumbnail-image { position: relative; }
.item-thumbnail-image img { width: 100%; }
.item-thumbnail-image img:hover {
  opacity: 1.0;
  transition: all 0.2s ease-in;
}
.item-thumbnail-image img {
  opacity: 0.9;
  transition: all 0.2s ease-in;
}

.item-thumbnail-title { font-family: 'City'; overflow-x: clip; }

.previewer-holder, .previewer-primary, .previewer-scroller { width: 100%; }
.previewer-holder { 
    background-color: var(--secondary-darkest); 
    border: 2px solid black;
}
.previewer-primary { 
    height: 30em; 
    background-color: var(--secondary-darker); 
    border-bottom: 1px solid var(--secondary-dark); 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.5);
}

@keyframes fade-me-in {
    from {opacity: 0.0;}
    to {opacity: 1.0;}
}

.fade-in-slowerest { opacity: 0.0; -webkit-animation: fade-me-in 4.0s; animation-fill-mode: forwards; }
.fade-in-slowest { opacity: 0.0; -webkit-animation: fade-me-in 2.0s; animation-fill-mode: forwards; }
.fade-in-slower { opacity: 0.0; -webkit-animation: fade-me-in 1.5s; animation-fill-mode: forwards; }
.fade-in-slow { opacity: 0.0; -webkit-animation: fade-me-in 1.0s; animation-fill-mode: forwards; }
.fade-in { opacity: 0.0; -webkit-animation: fade-me-in 0.5s; animation-fill-mode: forwards; }
.fade-in-fast { opacity: 0.0; -webkit-animation: fade-me-in 0.25s; animation-fill-mode: forwards; }

.anim-delay-025s { animation-delay: 0.25s; }
.anim-delay-05s { animation-delay: 0.5s; }
.anim-delay-1s { animation-delay: 1.0s; }
.anim-delay-2s { animation-delay: 2.0s; }

.dropdown-menu.show { -webkit-animation: fade-me-in 0.25s; }
.scrollable-menu { max-height: 300px; overflow-x: hidden; }

.scrollable-menu::-webkit-scrollbar-track {
  background: rgb(0,0,0);
  background: linear-gradient(180deg, var(--secondary-darkest) 0%, var(--secondary-darker) 100%);
  border-left: 1px solid black;
}

.scrollable-menu::-webkit-scrollbar {
  width: 0.7em;
}

.scrollable-menu::-webkit-scrollbar-thumb {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
  
  background: rgb(103,103,103);
  background: radial-gradient(circle, var(--secondary-light) 23%, var(--secondary-base) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid black;
}

.scrollable-menu::-webkit-scrollbar-thumb:hover {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
  
  background: rgb(103,103,103);
  background: radial-gradient(circle, var(--secondary-lighter) 23%, var(--secondary-light) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 1px solid black;
}

/* -------------------------------------------------- */

.item-search, .total-mod-count {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-left: -2em;
    margin-right: -2em;
    padding-left: 2em;
    padding-right: 2em;
}

.item-search .input-group { border-radius: 0.25rem; }

.item-search-box { color: rgba(255, 255, 255, 0.7); background-color: var(--secondary-dark); }
.item-search-box:focus { color: rgba(255, 255, 255, 1.0);  border: 1px solid var(--secondary-lighter); border-color: var(--secondary-lighter); box-shadow: 0px 0px 4px var(--secondary-lighter); background-color: var(--secondary-dark); }

.item-search-box {
    background-color: var(--secondary-dark);
    border: 1px solid var(--secondary-light);
    border-radius: .25rem 0 0 .25rem;
    transition: color .15s ease-in-out, box-shadow .15s ease-in-out, border .15s ease-in-out, border-color .15s ease-in-out;
}

.item-search-append {
    background-color: var(--secondary-base);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--secondary-light);
    border-radius: 0 .25rem .25rem 0;
    transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out;
}

.item-search-append:hover {
    background-color: var(--secondary-light);
    color: rgba(255, 255, 255, 1.0);
    border: 1px solid var(--secondary-lighter);
    cursor: pointer;
}

.item-search-append svg { filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5)); }

/* -------------------------------------------------- */

.total-mod-count {
    text-shadow: 1px 1px 2px black;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    color: rgba(255, 255, 255, 0.5);
}

.header-ribbon {
    backdrop-filter: blur(2px);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    margin-left: -2em;
    margin-right: -2em;
    padding-left: 2.0em;
    padding-right: 2.0em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 0;
    box-shadow: 0px 0px 4px var(--primary-base);
    background-color: rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.header-ribbon .breadcrumb { background: none; }

.breadcrumb-dropdown {
    display: inline-block;
}

.previewer-primary-image { 
    width: 100%; 
    height: 100%; 
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-animation: fade-me-in 0.5s;
    animation: fade-me-in 0.5s;
}
.previewer-image { display: inline-block; position: relative; padding: 0.5em; opacity: 0.5; height: 100%; }
.previewer-image { opacity: 0.5; transition: all 0.1s ease-in; }
.previewer-image-active { opacity: 1.0 !important; transition: all 0.1s ease-in; }
.previewer-image-active img.loader { box-shadow: 0px 0px 2px rgba(255, 255, 255, 1.0); }
.previewer-image img { height: 100%; }
.previewer-scroller { overflow-y: hidden; display: flex; height: 10em; background-color: var(--secondary-darker); }

.previewer-scroller::-webkit-scrollbar-track {
  background: rgb(0,0,0);
  background: linear-gradient(180deg, var(--secondary-darkest) 0%, var(--secondary-darker) 100%);
}

.previewer-scroller::-webkit-scrollbar {
  width: 1em;
}

.previewer-scroller::-webkit-scrollbar-thumb {
  border-radius: 0.5em 0.5em 0.25em 0.25em;
  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
  
  background: rgb(103,103,103);
  background: radial-gradient(circle, var(--secondary-light) 23%, var(--secondary-base) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.previewer-scroller::-webkit-scrollbar-thumb:hover {
  border-radius: 0.5em 0.5em 0.25em 0.25em;
  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
  
  background: rgb(103,103,103);
  background: radial-gradient(circle, var(--secondary-lighter) 23%, var(--secondary-light) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.top-left-x
{
    left: 8px;
    top: 8px;
    position: absolute;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.item-info-block {
    padding: 1em;

    border-radius: 0.25em;
}

.item-info-avatar {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-color: black;
}

.item-info-avatar-small {
    width: 40px;
    height: 40px;
    background-size: cover;
    background-color: black;
}

.item-info-by {
    font-family: 'Cafeta';
    font-size: 20pt;
    text-shadow: 2px 2px 4px black;
}

.item-info-block-header {
    font-family: 'Ordner';
    text-transform: uppercase;
    margin-bottom: 0.5em;
    font-size: 16pt;
    padding-bottom: 0.25em;
    border-bottom: 1px solid var(--secondary-base);
    width: 100%;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
}

.item-info-block-content {
    padding-left: 1em;
    padding-right: 1em;
}

.item-info-placeholder {
    margin-left: auto;
    display: inline-block;
    opacity: 0.5;
    font-family: 'MuseoSans';
    text-transform: none;
    font-size: 12pt;
}

.item-info-main-header {
    padding: 0.5em;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    font-family: 'City';
    text-transform: uppercase;
    font-size: 24pt;
    text-shadow: 2px 2px 4px black;
    box-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.5);
    
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    margin-left: -1em;
    margin-right: -1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
}

.item-info-download-sub { color: var(--primary-text); opacity: 0.5; font-size: 90%; }
.item-info-rating { display: flex; align-items: center; }
.item-info-rate-holder { 
    text-align: center; 
    background-color: var(--secondary-darker); 
    padding: 0.5em; 
    margin-top: 1em; 
    border-radius: 0.25em; 
    border-right: 1px solid var(--secondary-base);
    border-bottom: 1px solid var(--secondary-base);
}
.item-info-rate-holder > div { font-size: 10pt; opacity: 0.5; }
.item-info-rating-stats { margin-top: 1em; }

.rating-good { color: var(--accent-base); display: inline-block; }
.rating-bad { color: var(--secondary-light); display: inline-block; opacity: 0.5; }

.ratings-bar-row { display: flex; align-items: center; font-family: monospace; font-weight: bold; font-size: 10pt; }
.ratings-bar-bg { 
    width: 100%; 
    height: 8px; 
    background-color: rgba(0, 0, 0, 0.5); 
    display: inline-block; 
    margin-left: 1em; 
    border-radius: 4px;
    border-right: 1px solid var(--secondary-base);
    border-bottom: 1px solid var(--secondary-base);
    padding: 1px;
}

@keyframes scale-me-up {
    from {transform: scaleX(0.0) scaleY(0.5); transform-origin: left center;}
    to {transform: scaleX(1.0) scaleY(1.0); transform-origin: left center;}
}

.ratings-bar-fg { 
    height: 100%; 
    background: rgb(6,36,0);
background: linear-gradient(0deg, var(--accent-darker) 0%, var(--accent-dark) 35%, var(--accent-base) 82%, var(--accent-dark) 100%);
    border-radius: 4px; 
    -webkit-animation: scale-me-up 0.5s ease;
    animation: scale-me-up 0.5s ease;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.rate-me-good, .rate-me-bad, .rate-me-null { font-size: 20pt; background: none; border: none; padding: 0; }
.rate-me-good { color: var(--accent-base); }
.rate-me-good:hover { color: white; }
.rate-me-bad { color: var(--accent-darkest); }
.rate-me-bad:hover { color: var(--accent-darker); }
.rate-me-null { color: var(--secondary-base); }
.rate-me-null:hover { color: var(--secondary-lighter); }

.page-select-item a { color: var(--primary-text); }
.page-select-item a:active { color: var(--primary-text); }
.page-select-item a:hover { color: var(--primary-text); }
.page-select-item { display: inline-block; opacity: 0.5; font-size: 14pt; }
.page-select-item-active { opacity: 1.0; font-weight: bold; }

.top-navbar { position: fixed; width: 100%; top: 0; z-index: 5000; }

.bg-primary-lighter { background-color: var(--primary-lighter) !important; }
.bg-primary-light { background-color: var(--primary-light) !important; }
.bg-primary { background-color: var(--primary-base) !important; }
.bg-primary-dark { background-color: var(--primary-dark) !important; }
.bg-primary-darker { background-color: var(--primary-darker) !important; }

.bg-secondary-lighter { background-color: var(--secondary-lighter) !important; }
.bg-secondary-light { background-color: var(--secondary-light) !important; }
.bg-secondary { background-color: var(--secondary-base) !important; }
.bg-secondary-dark { background-color: var(--secondary-dark) !important; }
.bg-secondary-darker { background-color: var(--secondary-darker) !important; }

.secondary-embed {
    border-bottom: 1px solid var(--secondary-darker);
    border-right: 1px solid var(--secondary-darker);
    border-left: 1px solid var(--secondary-dark);
    border-top: 1px solid var(--secondary-dark);
}

.secondary-embed-down {
    border-left: 1px solid var(--secondary-darker);
    border-top: 1px solid var(--secondary-darker);
    border-bottom: 1px solid var(--secondary-dark);
    border-right: 1px solid var(--secondary-dark);
}

.bg-secondary-gradient {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, var(--secondary-base) 0%, var(--secondary-dark) 35%, var(--secondary-darker) 100%);
}

.text-primary { color: var(--primary-text) !important; }
.text-secondary { color: var(--secondary-text) !important; }
.text-accent { color: var(--accent-base) !important; }

.round-05 { border-radius: 0.5em; }
.round-10 { border-radius: 1em; }

.glow-black-025 { box-shadow: 0px 0px 0.25em black; }
.glow-black-05 { box-shadow: 0px 0px 0.5em black; }
.glow-black-10 { box-shadow: 0px 0px 1.0em black; }

.glow-white-05 { box-shadow: 0px 0px 0.5em white; }
.glow-white-10 { box-shadow: 0px 0px 1.0em white; }

.glow-primary-base-05 { box-shadow: 0px 0px 0.5em var(--primary-base); }
.glow-primary-base-10 { box-shadow: 0px 0px 1.0em var(--primary-base); }