/*Font families*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Poppins:ital,wght@0,400;1,300&display=swap');
@font-face {
    font-family: burbank-big;
    src: url(../assets/fonts/burbank.otf);
}

@font-face {
    font-family: burbank-bold;
    src: url(../assets/fonts/burbank-bold.otf);
}

@font-face {
    font-family: headings-light;
    src: url(../assets/fonts/HeadingNow-68Heavy.ttf);
}

@font-face {
    font-family: headings-squash;
    src: url(../assets/fonts/HeadingNow-75Medium.ttf);
}

@font-face {
    font-family: headings-variable;
    src: url(../assets/fonts/HeadingNowVariable.woff2);
}

@font-face {
    font-family: headings-variable-italic;
    src: url(../assets/fonts/HeadingNowVariableItalic.woff2);
}

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

:root {
    --season-accent-1: #69a452;
    --season-accent-2: rgb(0, 49, 0);
    --crew-pack-position: 0;
    --theme-color: #101014;
    --border-color: #1b1b20;
    --card-background-color: #191a1d;
    --notice-component-background-color: rgb(33, 33, 33);
    --shop-images-transition-duration: .5s;
    --shop-images-transition-ease: ease-in-out;
    --default-font-family: 'Lato', 'Poppins', 'Franklin Gothic Medium', 'Arial Narrow', sans-serif, Arial;
    --nav-color: #18181cce;
    --modes-purple: #08043c;
    --floor-scale: 1;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-color);
    font-family: var(--default-font-family);
    color: white;
    overflow: overlay;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

ul:not(.classified) {
    list-style: none;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
html,
li,
p,
ul {
    margin: 0;
    color: #fff;
}

*::selection {
    background-color: var(--season-accent-1);
    color: var(--season-accent-2);
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    border-top-color: var(--border-color);
}

code {
    color: rgb(199, 199, 199);
    text-shadow: 1px 1px black;
}

a.d-link:-webkit-any-link {
    color: #539bf5;
}

a.gray-link:-webkit-any-link {
    color: gray;
}

a {
    color: white;
    transition: color .3s;
    text-decoration: none;
}

a:-webkit-any-link:not(.nav-logo,
.no-link):hover {
    color: var(--season-accent-1);
}

a.link-underline:hover {
    text-decoration: underline;
}

.header-text-light {
    font-family: headings-light;
}

.header-text-sequel {
    font-family: sequel95;
}

.header-text-bold {
    font-family: headings-squash;
}

.header-text-italic {
    font-style: italic;
}

.fn-dot-mask {
    background: rgba(0, 0, 0, 0);
}

.fn-season-video,
.fn-dot-mask {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

.video-controls {
    position: fixed;
    left: 0;
    height: 100px;
    background: rgb(16, 16, 16, .75);
    width: 30%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.vid-inner-controls {
    display: flex;
    align-items: center;
    justify-content: center;
}

.videos-counter {
    margin-left: 6rem;
    margin-right: 6rem;
    font-size: 20px;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(127, 127, 127, .5);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: background .5s ease-in-out;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

.links {
    transition: color .3s;
}

.links:hover {
    color: var(--season-accent-1);
    text-decoration: underline;
}

.season-video {
    z-index: -100;
    display: flex;
    justify-content: center;
}

.green {
    color: green;
}

.player-data {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.real-language {
    padding-left: 1rem;
    color: gray;
}

/*Top navbar*/

.nav-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    transition: transform .15s cubic-bezier(0.075, 0.82, 0.165, 1);
    /*padding: 2rem 5rem;*/
}

.navbar-top {
    align-items: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    -moz-backdrop-filter: blur(3px);
    -o-backdrop-filter: blur(3px);
    background-color: var(--nav-color);
    border-radius: 10px;
    margin: 2rem 5rem;
    /* position: relative; */
    display: flex;
    align-items: center;
}

.nav-buttons-items {
    display: flex;
}

.navigation {
    position: fixed;
    right: 0;
    top: 6rem;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    background-color: var(--nav-color);
}

.navigation-part {
    position: relative;
}

.navigation-part popup {
    position: absolute;
    right: 5rem;
    background-color: #101C40;
    padding: 1rem;
    border-radius: 15px;
    font-family: headings-squash;
    width: 150px;
}

.navbar-button,
.part-button, .shop-button {
    padding: .8rem 1rem;
    font-family: headings-variable;
    font-variation-settings: "wdth" 668, "wght" 700;
    font-size: 19px;
    margin: .2rem;
    transition: background-color .1s ease-out;
    border-radius: 10px;
    white-space: nowrap;
}

.part-button {
    padding: 0 .5rem;
}

.navigation-part .dropdown-menu {
    top: 4rem;
}

.navigation-icon {
    width: 30px;
    margin-top: 5px;
}

.navigation-part {
    padding: .7rem 0;
}

.shop-bar {
    display: flex; justify-content: center; align-items: center;
}

.navigation {
    position: fixed;
    right: 0;
    top: var(--top-margin);
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    background-color: var(--nav-color);
    margin: 2rem 0;
}

.shop-part {
    padding: 1rem 0;
}

.navbar-button:hover,
.part-button:not(.not-button):hover {
    background-color: rgb(255, 255, 255, 0.1);
    color: white;
}

.menu-toggle,
.mini-logo,
.creative-discovery {
    /* margin-left: 1.5rem; */
    height: 25px;
    /* margin-top: 1rem;
    margin-bottom: 1rem; */
    margin: -3px;
}

.services {
    height: 21px;
    margin: -3px;
    border-radius: 2px;
}

.menu-toggle {
    cursor: pointer;
    border-radius: 50%;
}

.back-to-top-button {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    font-family: headings-squash;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    border-radius: 25px;
    background-color: var(--card-background-color);
    z-index: 999;
}

.fortnite-button {
    font-family: headings-variable;
    font-size: 23px;
    padding: 1rem 1.5rem;
    border-radius: 30px;
    background-color: #f7ff19;
    border: 0;
    cursor: pointer;
    color: #000;
    font-weight: 700;
    font-variation-settings: "wdth" 668, "wght" 700;
}

.fortnite-button:hover {
    background-color: #f7ff19;
}

.fortnite-button-border,
.part-button, .shop-button {
    --outline-width-hover: .25rem;
    outline-width: 0;
    outline-color: transparent;
    outline-offset: .5rem;
    outline-style: solid;
    transition-duration: .15s;
    transition-property: outline-color, outline-offset, outline-width;
    transition-timing-function: ease-out;
}

.fortnite-button-border:hover,
.part-button:hover, .shop-button:hover {
    outline-color: #fffc;
    outline-offset: .1875rem;
    outline-width: var(--outline-width-hover);
}


/**Nav items*/

.nav-logo {
    font-size: 28px;
    font-family: burbank-big;
    color: white;
    padding: 1rem 2rem;
}

.nav-content {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 45px;
    z-index: 60;
    background-color: var(--nav-color);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    -moz-backdrop-filter: blur(3px);
    -o-backdrop-filter: blur(3px);
    max-width: 300px;
    height: 100%;
    transition: transform .5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    overflow: auto;
}

.nav-content.hidden-nav {
    transform: translateX(-100%);
}

.nav-content .item-search-container {
    position: absolute;
    right: 0;
    padding-right: 3rem;
}

.nav-items {
    padding: 0;
    height: auto;
}

.nav-items li {
    padding-left: 3rem;
    padding-top: .8rem;
    padding-bottom: .8rem;
    font-family: burbank-bold;
    text-transform: uppercase;
    font-size: 14px;
    transition: font-size .3s;
    /* unselected effect*/
    opacity: 0.5;
}

.nav-items li::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 3px;
    background-color: white;
    margin-left: -1rem;
    margin-top: .4rem;
    transition: height .3s, margin-top .3s;
}

.nav-items li:hover {
    font-size: 16px;
    /*selected and hover effect*/
    opacity: 1;
}

.nav-items li:hover::before {
    /* make this the selected thign*/
    height: 25px;
    margin-top: -.33rem;
}

.nav-item {
    cursor: pointer;
    font-size: larger;
}

.nav-dropdown-menu {
    position: absolute;
    padding: .5rem;
    background: rgb(47, 47, 47);
    border-radius: 10px;
    transition: .15s ease-in-out;
    transition-property: opacity;
    display: none;
}

.arrow::after {
    left: 50%;
    transform: rotate(-45deg);
}

.arrow::before {
    left: calc(50% - 1px);
    transform: rotate(45deg);
    height: 6px;
    background: white;
}

.arrow::before,
.arrow::after {
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 9px;
    background: currentColor;
    transform-origin: 50% 100%;
}

.arrow.sideways {
    transform: rotate(-90deg);
}

.arrow {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 11px;
    height: 11px;
    transition: transform .2s;
}

i.x-btn {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 15px;
    height: 15px;
}

i.x-btn::before {
    content: 'x';
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    margin-left: .2rem;
    font: 13px burbank-bold;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f04747;
    background-color: rgba(0, 0, 0, .5);
    border: 2px solid #f04747;
    border-radius: 50%;
}

input[type=text] {
    border: 1px solid gray;
    font: 15px headings-squash;
    text-transform: uppercase;
    color: white;
    padding: .8rem;
    margin: 0px 0.25rem;
    background-color: var(--card-background-color);
    border-radius: 15px;
    border: none;
}

button {
    font: 15px headings-squash;
    text-transform: uppercase;
    color: white;
    padding: .8rem;
    margin: 0px 0.25rem;
    background-color: #111213;
    border-radius: 15px;
    border: none;
    cursor: pointer;
}

button.fn-button {
    background: rgb(255, 255, 0);
    color: black;
    font-family: burbank-big;
    font-size: 23px;
    border-radius: 0;
    cursor: pointer;
    clip-path: polygon(0% 16%, 100% 6%, 98% 100%, 2% 90%);
    margin: 0px;
    padding: 0.9em 1em 0.6em;
}

.player-data input:not(:first-child),
.player-data button:not(:last-child) {
    margin-left: 1rem;
    margin-right: 1rem;
}


/*Page contents*/

.content {
    --side-padding: 7rem;
    --top-padding: 7rem;
    --bottom-padding: 3rem;
    padding: var(--top-padding) 0 var(--bottom-padding);
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
    display: flex;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    justify-content: center;
    flex-direction: column;
}

select {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    margin: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--card-background-color);
    color: white;
    font-family: headings-squash;
}

.predictions {
    display: flex;
    flex-wrap: wrap;
}

.predictions-cosmetic,
.augment {
    border-radius: 20px;
    width: 100%;
    display: flex;
    padding: 1rem 1rem;
    background-color: var(--card-background-color);
    border: .5rem solid var(--theme-color);
}

.predictions-item-context,
.augment-data {
    margin-left: 2rem;
    margin-right: 2rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.account-level-history {
    overflow: auto;
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
}

.account-season-level-card {
    min-width: 300px;
    max-width: 300px;
    background-color: var(--card-background-color);
    border-radius: 10px;
    flex: 50%;
}

.account-season-level-card img {
    display: block;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.account-level-card-details {
    padding: 1rem;
}

.percentage {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    
    color: white;
    font-family: headings-squash;
}

.progress-bar-bg {
    width: 100%;
    background-color: var(--card-background-color);
    border-radius: 10px;
    position: relative;
}

.progress-bar {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    width: 0%;
    background-color: var(--season-accent-1);
    border-radius: 10px;
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: .9375rem;
    color: #fff;
    text-align: left;
    list-style: none;
    background-color: #111213;
    background-clip: padding-box;
    border-radius: 15px;
    pointer-events: all;
    transform: translateY(0);
    opacity: 1;
    scale: 1;
    transition: opacity .15s cubic-bezier(0, 0.1, 0.1, 1), transform .15s cubic-bezier(0.23, 1, 0.320, 1), scale .15s cubic-bezier(0, 0.1, 0.1, 1);
    box-shadow: 0 8px 24px #010409;
}

.dropdown-menu.hidden-dropdown {
    transform: translateY(-3rem);
    opacity: 0;
    scale: .9;
    pointer-events: none;
}

.dropdown-menu::-webkit-scrollbar-track {
    background-color: #111213;
}

.dropdown-choice {
    cursor: pointer;
    padding: 3px 10px;
}

.dropdown-label {
    font-size: 16px;
}

.poi-view {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
}

.poi-view.open {
    display: block;
    padding: 5rem;
    border-radius: inherit;
}

.map-controls {
    justify-content: space-between;
}

.poi-image {
    width: 100%;
    border-radius: 10px;
}

.item-shop-btn,
.news-btn {
    padding: .75rem 20%;
    background: none;
    transition-property: background, color;
    cursor: pointer;
    text-decoration: none;
}

.item-shop-btn {
    border-color: #00bc8c;
}

.item-shop-btn:not(:hover) {
    color: #00bc8c;
}

.item-shop-btn:hover {
    background: #00bc8c;
}

.news-btn {
    border-color: #f9aa00;
}

.news-btn:not(:hover) {
    color: #f9aa00;
}

.news-btn:hover {
    background: #f9aa00;
}

.shop-items-container {
    width: 100%;
}

.shop-section-title,
.augment-section-title,
.set-name {
    margin-top: 2rem;
    margin-bottom: .5rem;
    font-family: burbank-big;
    text-transform: uppercase;
}

.shop-items-display,
.search-objects,
.augments-tab-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.shop-items-display .item-card,
.search-objects .item-card {
    margin: .3rem;
    cursor: pointer;
}

.vbuck-icon,
.vbuck-icon-item {
    width: 25px;
    height: 25px;
}

.item-shop-countdown,
.shop-history-tag {
    background: var(--notice-component-background-color);
    border-radius: 10px;
    padding: .5rem;
}

.shop-history-tag {
    margin-left: .5rem;
}

.variants {
    justify-content: space-evenly;
}

.variant-container {
    background: var(--notice-component-background-color);
    border-radius: 10px;
    text-align: center;
    color: white;
    margin: .5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.variant-container[is-selected=true] {
    border: 3px solid var(--season-accent-1);
}


/*The image*/

.variant-container img {
    height: 110px;
    width: 110px;
    display: flex;
    flex-direction: column;
}

.crew-content {
    position: relative;
}

.crew-pack-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.crew-pack-inner {
    position: absolute;
    top: 0;
    left: var(--crew-pack-position);
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.crew-pack-item-scrollbar {
    border-radius: 10px;
    margin-left: 1.5rem;
    width: 15%;
    max-height: 100%;
    overflow-y: scroll;
}

.crew-pack-item {
    padding: .5rem;
}

.crew-pack-item img {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    transition: background .3s;
    border-radius: 10px;
    width: 100%;
}

.crew-pack-item img:hover {
    background: rgba(0, 0, 0, .5);
}

.crew-pack-item-details {
    width: 40%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.crew-pack-item-image {
    border-radius: 10px;
    width: 80%;
    margin-bottom: 1rem;
    cursor: pointer;
    background: rgba(0, 0, 0, .5);
}

.crew-pack-item-title {
    font-size: 3em;
    text-transform: uppercase;
}

.crew-pack-item-description {
    width: 80%;
    font-size: 20px;
}

.crew-pack-item-description,
.crew-pack-item-title {
    font-family: burbank-big;
}

.item-card-parent {
    position: relative;
}

.item-banner {
    font-size: 16px;
    z-index: 1;
    position: absolute;
    padding: .2rem .5rem;
    border-radius: 25px;
    text-align: center;
    pointer-events: none;
    transition: .15s;
    transition-property: top;
    font-family: headings-squash;
    text-transform: uppercase;
    font-weight: 700;
    top: 1rem;
    left: 1rem;
}

.item-banner[intensity=High] {
    --color-1: #FFFF00;
    --color-2: #ffffff;
    background: linear-gradient(to right, var(--color-1), var(--color-1), /*White shines*/
    var(--color-2), var(--color-1), var(--color-2), var(--color-1), var(--color-2), var(--color-1));
    background-size: 3000px;
    color: #00072C;
    animation: highbanner 5s ease-in-out infinite;
}

.item-banner[intensity=Low] {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
}

.item:not(:last-child) {
    border-bottom: 1px solid #1e223a;
    margin-bottom: 5rem;
}

.item-toggler-arrow {
    rotate: -90deg;
    transition: transform 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.item-toggler-arrow.toggled {
    transform: scaleX(-1);
}

.audio-fn {
    width: 100%;
}

.item-tags {
    flex-wrap: wrap;
}

.cosmetic-demo-video {
    position: relative;
    padding: 1rem;
}

.cosmetic-demo-video video {
    width: 100%;
    border-radius: 10px;
}

.fn-border-style::before {
    /* content: ''; */
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #ffffff5b;
    scale: 1.005;
    border: 3px solid white;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.5s;
    animation: spinning-border 10s linear infinite;
}

.fn-border-style:hover::before {
    opacity: 1;
}

@keyframes spinning-border {
    0% {
        background: linear-gradient(0deg, #e664649a, #9198e59a, #91e59f9a, #91dbe59a);
    }
    12% {
        background: linear-gradient(45deg, #e664649a, #9198e59a, #91e59f9a, #91dbe59a);
    }
    25% {
        background: linear-gradient(90deg, #e664649a, #9198e59a, #91e59f9a, #91dbe59a);
    }
    37% {
        background: linear-gradient(135deg, #e664649a, #9198e59a, #91e59f9a, #91dbe59a);
    }
    50% {
        background: linear-gradient(180deg, #e664659a, #9198e59a, #91e59f9a, #91dbe59a);
    }
    62% {
        background: linear-gradient(225deg, #e664649a, #9198e59a, #91e59f9a, #91dbe59a);
    }
    75% {
        background: linear-gradient(270deg, #e664649a, #9198e59a, #91e59f9a, #91dbe59a);
    }
    87% {
        background: linear-gradient(315deg, #e664649a, #9198e59a, #91e59f9a, #91dbe59a);
    }
    100% {
        background: linear-gradient(360deg, #e664649a, #9198e59a, #91e59f9a, #91dbe59a);
    }
}

.item-page-carrousel {
    background-color: var(--card-background-color);
    border-radius: 15px;
    margin-top: 0.5rem;
    overflow-x: auto;
    height: 100px;
    width: 100%;
    display: flex;
    padding: .3rem;
}

.item-page-carrousel img,
.item-page-carrousel video {
    cursor: pointer;
    border-radius: 5px;
    margin-left: .3rem;
    margin-right: .3rem;
}

.item-card {
    position: relative;
    background-color: #343434;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: headings-squash, headings-light, burbank-big, burbank-bold, 'Poppins';
}

@property --progress-value {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

@keyframes progress {
    to {
        --progress-value: var(--end-progress-value);
    }
}

.ranked-progress-sections {
    display: flex;
    padding-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.ranked-progress-section {
    flex: 0 1 31%;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ranked-progress-section h2 {
    margin: 0;
}

.ranked-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ranked-view {
    display: flex;
    padding: 2rem 2rem 0 2rem;
    justify-content: center;
    align-items: center;
}

.progress-bar-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin-bottom: 3rem;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(closest-side, var(--theme-color) 90%, transparent 80% 100%), conic-gradient(#ffff01 calc(var(--progress-value) * 1%), var(--card-background-color) 0);
}

.progress-bar-circle img {
    width: 100px;
    position: absolute;
}

.progress-bar-circle::before {
    counter-reset: percentage var(--progress-value);
    content: counter(percentage) '%';
    animation: progress 2s 1 forwards;
    padding-top: 120%;
    font-size: 20px;
    font-family: headings-light;
}

.progress-bar-circle progress {
    display: none;
}

.item-card.item-card-item-view.mt1s::before,
.item-card.item-card-item-view.mt1s:after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 10px;
    width: 100%;
    background-color: #000;
    z-index: 1;
    opacity: 1;
    transition: opacity .15s;
}

.item-card.item-card-item-view.mt1s:hover::before,
.item-card.item-card-item-view.mt1s:hover::after {
    opacity: 0;
}

.item-card.item-card-item-view.mt1s::after {
    background-color: #fff;
    z-index: 2;
    width: 0%;
    animation: traversal-style-bar 5s linear infinite;
}


/*Item card change size*/

.item-card img:not(.vbuck-icon):not(.item-card-item-display) {
    transition: transform .1s ease-in-out, scale .1s ease-in-out;
    z-index: -1;
    border: 0;
}

.item-card:hover .item-image:not(.item-card-item-display) :not(.vbuck-icon):not(.item-card-item-display) {
    scale: 1.09;
    transform: translateY(-4px);
}

.item-card:hover .item-price img {
    opacity: 1;
}

.item-card:hover .item-price {
    margin-bottom: .4rem;
}

.item-card:hover .item-info .item-type {
    opacity: 1;
    margin-bottom: 0;
}


/* .item-card:not(.no-resize):hover {
} */


/*Item card change size*/

.item-card:not(.no-resize) {
    width: 212px;
    height: 212px;
}

.item-card-parent.fn-border-style .item-card:not(.no-resize) {
    width: 100%;
    height: 100%;
}

.item-image {
    /* --hover-scale: calc(var(--floor-scale) + 0.09); */
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 0;
    height: 100%;
}

.item-image img.style-picture.current-style {
    display: block;
}

.item-image img.style-picture {
    display: none;
}

.item-image img.shop-picture:not(.first-image) {
    transition: /*max-height*/ var(--shop-images-transition-duration) var(--shop-images-transition-ease), scale .1s ease-in-out;
    position: absolute;
    overflow: hidden;
    object-fit: cover;
    object-position: bottom;
    image-rendering: -webkit-optimize-contrast;
    /* mask-image: linear-gradient(to bottom, #000 80%, #00000000);
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, #00000000); */
    max-height: 0px;
    max-width: 100%;
    height: 100%;
    /* width: 100%; */
    bottom: auto;
}

.item-image img.shop-picture.first-image {
    position: absolute;
    height: 100%;
}

.item-card .override-styles {
    scale: var(--floor-scale);
    transform: translateY(calc(var(--y-off)));
}

.item-card:hover .item-image:not(.item-card-item-display) :not(.vbuck-icon):not(.item-card-item-display).override-styles {
    scale: calc(var(--floor-scale) + 0.09);
    transform: translateY(calc(var(--y-off) - 4px));
}

.item-image img.shop-picture:not(.first-image) {
    bottom: 0;
}

.item-image img.shop-picture.last-image:not(.current-showcase-style):not(.first-image) {
    top: 0;
    bottom: auto;
    object-position: top;
}

.go-away-instantly,
.displaynone {
    display: none;
}

.item-image img.shop-picture.current-showcase-style:not(.first-image) {
    max-height: 100%;
}

.item-info {
    --text-background-color: rgba(0, 0, 0, 0);
    --text-background-color-a: rgba(0, 0, 0, 0.65);
    font-size: 18px;
    /* background-color: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); */
    background: linear-gradient(0deg, var(--text-background-color-a), var(--text-background-color));
    transition: background-color .05s;
    position: absolute;
    padding: .35rem;
    bottom: 0;
    width: 100%;
    display: block;
    z-index: 1;
}

.item-info::before {
    /*content: "";*/
    width: 100%;
    height: 4px;
    top: -2px;
    left: 0;
    border-top: 4px solid transparent;
    transform: rotate(-1deg);
    position: absolute;
    z-index: -1;
}

.item-title {
    display: inline-block;
    transition: color .1s;
    color: white;
    font-size: 19px;
}

.item-type {
    opacity: 0;
    font-size: 15px;
    margin-bottom: -1.1rem;
    transition: opacity .25s, margin-bottom .25s;
}

.item-price {
    font-size: 14px;
    display: flex;
    align-items: center;
    height: 12px;
    letter-spacing: 1px;
    margin-top: .2rem;
    margin-bottom: .3rem;
    font-family: headings-squash;
    transition: margin-bottom .25s;
}


/*The strike through price that is shown if there is a discount*/

.item-price-bip {
    opacity: .4;
    margin-right: .3rem;
    text-decoration: line-through;
}

.item-price-vbp {
    opacity: 1;
    font-size: 17px;
    margin-left: .2rem;
    margin-right: .15rem;
    color: white;
}

.item-price-bip,
.item-price-vbp {
    transition: color .05s;
}

.item-price img {
    transition: .1s;
    height: 17px;
    width: 17px;
    transition-property: width, height, opacity;
}

.shop-reset-timer {
    text-shadow: 0 2px 2px #000;
}

.items-count {
    color: rgb(150, 150, 150);
    font-size: 15px;
    margin-left: 1rem;
    background: var(--notice-component-background-color);
    padding: .5rem;
    border-radius: 10px;
}

.item-card-item-display {
    width: 100%;
}

.item-info-right {
    padding: 1rem;
}

.shop-history {
    overflow-y: scroll;
    max-height: 200px;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid gray;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    background-color: var(--card-background-color);
    font-family: headings-squash;
}

.shop-history-element {
    margin: .3rem 0;
    font-size: 15px;
}

.shop-history div.flex:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    transition: background .1s;
}

.shop-history div.flex:hover {
    background: rgba(0, 0, 0, .25);
}

.rarity-label {
    font-size: 16px;
    padding: .5rem;
    background: rgb(47, 47, 47);
    border-radius: 10px;
    margin-left: .5rem;
    color: black;
}

.item-type-label {
    font-size: 16px;
    padding: .5rem;
    background: rgb(47, 47, 47);
    border-radius: 10px;
    margin-left: .5rem;
    color: rgb(206, 206, 206);
}

.copyrighted-audio-warning {
    color: rgb(243, 76, 76);
}

.upcoming-notice {
    color: lightgreen;
}

.youtube-iframe {
    margin-top: 1rem;
    border-radius: 10px;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.news-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.news-mobile,
.crew-pack-items-mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-top: 1rem;
}

.news-item,
.crew-item-mobile {
    margin-bottom: 1rem;
    position: relative;
    width: 100%;
    min-height: 1px;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
}

.achievements {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.achievements::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.achievements::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255);
    border-radius: 0;
}

.achievements::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
}

.vehicle-item {
    background: linear-gradient(#0086CF, #006ACF);
    margin: 2rem .5rem;
    text-align: center;
    height: 256px;
    width: 256px;
    position: relative;
}

.fish-item {
    background: linear-gradient(#0086CF, #006ACF);
    margin: 2rem .5rem;
    text-align: center;
    height: 320px;
    width: 350px;
    position: relative;
}

.fish-image {
    width: 150px;
    height: 150px;
    margin-top: -1rem;
}

.vehicle-image {
    width: 150px;
    height: 150px;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    transition: margin-top .1s, transform .1s;
    border: 7px solid var(--season-accent-1);
    border-radius: 10px;
    background: radial-gradient(#00FF69, #003a8b);
}

.vehicle-item:hover .vehicle-image {
    transform: scale(1.08);
    margin-top: -1rem;
}

.vehicle-name,
.fish-name {
    font-family: burbank-bold;
    font-style: italic;
    font-size: 24px;
    text-transform: uppercase;
    transition: transform .1s;
    position: relative;
    z-index: 3;
}

.fish-desc {
    font-family: burbank-bold;
    font-size: 17px;
}

.vehicle-decoration,
.fish-decoration {
    position: absolute;
    width: 100%;
    height: 4rem;
    bottom: 0px;
    overflow: hidden;
}

.vehicle-decoration .deco-b,
.fish-decoration .deco-b {
    background: rgba(190, 191, 195, 0.95);
    border-top: 8px solid rgb(201, 207, 223);
    width: 100%;
    height: 4rem;
    position: absolute;
    transform: rotate(-2deg);
    top: 1rem;
    transition: top .1s;
}

.fish-decoration .deco-b[rarity="uncommon"] {
    background: rgba(132, 228, 11, 0.95);
    border-top: 8px solid rgb(136, 228, 28);
}

.vehicle-decoration .deco-b,
.fish-decoration .deco-b[rarity="rare"] {
    background: rgba(2, 231, 252, 0.95);
    border-top: 8px solid rgb(2, 255, 255);
}

.fish-decoration .deco-b[rarity="epic"] {
    background: rgba(235, 130, 253, 0.95);
    border-top: 8px solid rgb(227, 129, 253);
}

.fish-decoration .deco-b[rarity="legendary"] {
    background: rgba(252, 156, 70, 0.95);
    border-top: 8px solid rgb(248, 177, 84);
}

.weapons {
    justify-content: space-evenly;
}

.weapon {
    background-color: var(--card-background-color);
    margin: 2rem .5rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.weapon-img {
    width: 100%;
}

.weapon .weapon-details {
    z-index: 1;
    padding: .5rem;
}

.weapon-name,
.weapon-desc {
    font-family: headings-squash;
}

.weapon-stats {
    padding: 1rem;
    margin-top: 1rem;
    max-height: 200px;
    overflow: auto;
}

.weapon-stat-item {
    margin: .5rem 0;
    display: flex;
}

.weapon-stat-item:hover {
    background: rgba(0, 0, 0, .25);
}

.weapon-stat-label,
.weapon-stat-num {
    font-family: headings-squash;
    font-weight: 700;
    font-size: 20px;
}

.weapon-stat-label {
    width: 70%;
    text-align: left;
}

.weapon-stat-num {
    width: 30%;
    text-align: right;
}

.achievement-item {
    background: linear-gradient(#0086CF, #006ACF);
    margin: 2rem .5rem;
    text-align: center;
    height: 300px;
    position: relative;
}

.achievement-inner {
    z-index: 10;
    position: relative;
    padding: 2rem;
}

.achievement-inner img.achievement-icon {
    width: 90px;
    border: 7px solid var(--season-accent-1);
    margin-bottom: 1.5rem;
    transition: margin-top .1s ease-in, scale .1s ease-in;
    transform: skew(-6deg, -1.5deg);
}

.achievement-item:hover .achievement-inner img.achievement-icon {
    margin-top: -5rem;
    scale: 1.1;
}

.achievement-inner .achievement-title {
    font-family: burbank-bold;
    font-style: italic;
    font-size: 24px;
    text-transform: uppercase;
    width: 230px;
}

.achievement-inner .achievement-description {
    font-family: burbank-bold;
    font-size: 18px;
    display: block;
    width: 230px;
    color: #80D4FF;
    letter-spacing: 1px;
    max-height: 0px;
    transition: max-height .1s ease-out;
    overflow: hidden;
}

.achievement-item:hover .achievement-inner .achievement-description {
    max-height: 300px;
}

.achievement-item .decoration-1 {
    position: absolute;
    width: 100%;
    height: 3rem;
    top: 0px;
    overflow: hidden;
}

.decoration-1 .decoration-top {
    background: var(--season-accent-1);
    position: relative;
    width: 100%;
    height: 2rem;
    transform: rotate(-1deg);
    bottom: 0.625rem;
    transition: .1s;
    transition-property: height, transform;
}

.achievement-item:hover .decoration-top {
    transform: rotate(1.5deg);
    height: 3rem;
}

.decoration-2 {
    position: absolute;
    width: 100%;
    height: 4rem;
    bottom: 0px;
    overflow: hidden;
}

.decoration-2 .decoration-bottom {
    background: rgb(53, 167, 251);
    width: 100%;
    height: 4rem;
    position: absolute;
    transform: rotate(-2deg);
    top: 5rem;
    transition: top .1s;
}

.achievement-item:hover .decoration-2 .decoration-bottom {
    top: 1rem;
}

.quests-section-dropdown {
    background-color: var(--card-background-color);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 30%;
    z-index: 1;
}

.quest-current-category {
    display: flex;
    padding: 1rem;
}

.quest-current-category h2 {
    font-family: headings-light;
}

.quest-current-category img {
    width: 80px;
    position: absolute;
    bottom: 0;
    z-index: 2;
    right: 0;
    top: 0;
    mask-image: linear-gradient(to left, #000 20%, #00000000);
}

.quest-section-selector {
    position: relative;
    z-index: 23;
    background-color: rgb(12, 12, 12);
    padding: 0.5rem 1rem;
}

.quest-section-selector a {
    font-family: headings-squash;
}

.quest-section {
    padding: 0.5rem 0;
}

.quest-section:not(:last-child) {
    border-bottom: 1px solid var(--card-background-color);
}

.quest-count {
    color: rgba(255, 255, 255, .75);
    font-size: 80%;
}

.challenge-category {
    border: 3px solid rgba(0, 0, 0, .25);
    display: flex;
    margin: 1rem;
    border-radius: 10px;
    background: #022B96;
    transition: background .15s;
}

.challenge-category:hover,
.challenge-category.selected-challenge-category {
    cursor: pointer;
    background: #FEFEFE;
}

.challenge-category img {
    width: 115px;
    border-radius: inherit;
}

.challenge-category .challenge-title {
    transition: color .15s;
    font-family: burbank-bold;
    font-size: 20px;
    text-transform: uppercase;
    margin: 1rem;
}

.challenge-category:hover .challenge-title {
    color: #010B49;
}


/*The actual challenge cards*/

.challenge-bundle {
    font-family: headings-light;
    text-transform: uppercase;
    font-size: 25px;
    margin: 2rem 1rem 0;
}

.challenge {
    margin: 1rem;
    border-radius: 10px;
    /* background: #195aff47; */
    background-color: var(--card-background-color);
    position: relative;
}

.challenge-info {
    padding: 1rem;
}

.challenge-reward-data {
    padding-left: 1.5rem;
}

.challenge-small-progress {
    color: rgb(255, 255, 255, 0.5);
}

.challenge-name,
.challenge-description {
    transition: color .15s;
    font-family: headings-squash;
    font-size: 16px;
    margin: .25rem 0;
}

.challenge-name {
    font-weight: 700;
}

.challenge-description {
    font-size: 15px;
}

.challenge-rewards {
    height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #1c20299d;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.challenge-reward {
    display: flex;
    align-items: center;
}

.challenge-reward .reward-quantity,
.challenge-reward-data {
    font-family: headings-squash;
    font-size: 16px;
    color: white;
    text-align: center;
}

.challenge-reward .reward-icon {
    width: 90px;
    margin: 0 0 0 1.5rem;
}

.news-item-image {
    border-radius: 10px;
}

.mobile-media-content {
    padding: 1rem;
}

.full-size {
    width: 100%;
}

.map-location-box,
.stat-box {
    margin-left: 2rem;
}

.map-location-item {
    font-size: 16px;
}

.map-location-type,
.stat-type {
    cursor: pointer;
}

.map {
    width: 100%;
}

.stats-box {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.stats-content {
    padding: 1rem;
    background-color: var(--card-background-color);
    border-radius: 10px;
}

.stats-content h2,
.stats-content h3 {
    border-bottom: 1px solid gray;
    border-radius: 10px;
    background-color: rgb(59, 59, 59);
    padding: 1rem;
}

.stats-content .stats-content {
    background-color: #272727;
}

.stats-items {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 2fr));
    grid-auto-rows: 5rem;
    grid-gap: 5px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: rgb(16, 16, 16);
    transition: all .25s;
    border-radius: 15px;
}

.stat-item:hover {
    background-color: rgb(27, 26, 26);
    scale: 1.05;
    z-index: 100;
}

.stat-item-title {
    font-size: 18px;
    text-transform: uppercase;
    font-family: headings-squash;
}

.stat-item-content {
    font-size: 16px;
}

.looked-up-account {
    font-family: headings-squash;
    position: relative;
    margin-left: calc(30px + 1rem);
    cursor: pointer;
}

i.account-type-icon {
    width: 30px;
    position: absolute;
    left: calc(-30px + -1rem);
    height: 30px;
    background-size: cover;
}

i.account-type-icon[acctype=steam] {
    background-image: url(../assets/images/steam_logo.png);
}

i.account-type-icon[acctype=epic] {
    background-image: url(../assets/images/epic_logo.png);
}

i.account-type-icon[acctype=psn] {
    background-image: url(../assets/images/psn_logo.png);
}

i.account-type-icon[acctype=xbl] {
    background-image: url(../assets/images/xbl_logo.png);
}

.toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.toggle h2 {
    margin-left: 1rem;
}

.toggle-switch {
    display: inline-block;
    background: rgb(59, 59, 59);
    border-radius: 16px;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

.toggle-switch:before,
.toggle-switch:after {
    content: "";
}

.toggle-switch:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
}

.toggle:hover .toggle-switch:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
}

.toggle-checkbox:checked+.toggle-switch {
    background: #20452f;
}

.toggle-checkbox:checked+.toggle-switch:before {
    left: 30px;
}

.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

.season {
    width: 50%;
    padding: 1rem;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.season img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: block;
    z-index: -1;
}

.season-bp-button {
    background: var(--theme-color);
    padding: 1rem;
    margin: 2rem 2rem 0 0;
    border-radius: 10px;
    font-weight: 700;
    position: absolute;
    top: 0;
    right: 0;
    transition: all .15s cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: pointer;
    transform: translateY(-200%);
}

.season:hover .season-bp-button {
    transform: translateY(0);
}

.season .season-context {
    padding: 1rem;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: var(--card-background-color);
}

.season-date {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.twitch-drop {
    display: flex;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.twitch-drop img {
    width: 120px;
    height: 160px;
}

.twitch-drop-info {
    margin-left: 1.5rem;
}

.twitch-drop-ca {
    font-weight: 700;
    font-size: 17px;
}

.twitch-channel {
    display: flex;
    align-items: center;
}

.twitch-drops-ca .twitch-channel:not(:last-child) {
    border-bottom: 1px solid rgb(47, 47, 47);
}

.twitch-channel img {
    width: 25px;
    height: 25px;
}

.item-card[data-rarity=trascendent],
.item-card[data-rarity=exotic] {
    background: -o-radial-gradient(#00FF69, #2E85FF);
    background: radial-gradient(#00FF69, #2E85FF);
}

.item-info[data-rarity=trascendent]::before,
.item-info[data-rarity=exotic]::before {
    border-top-color: #00B5F6;
}

.rarity-label[data-rarity=trascendent],
.rarity-label[data-rarity=exotic] {
    background-color: #00B5F6;
}

.item-card[data-rarity=mythic] {
    background: -o-radial-gradient(#FFDE61, #C89214);
    background: radial-gradient(#FFDE61, #C89214);
}

.item-info[data-rarity=mythic]::before {
    border-top-color: #e98d4b;
}

.rarity-label[data-rarity=mythic] {
    background-color: #e67e22;
}

.item-card[data-rarity=legendary] {
    background: -o-radial-gradient(#ea8d23, #78371d);
    background: radial-gradient(#ea8d23, #78371d);
}

.item-info[data-rarity=legendary]::before {
    border-top-color: #e98d4b;
}

.rarity-label[data-rarity=legendary] {
    background-color: #e67e22;
}

.item-card[data-rarity=epic] {
    background: -o-radial-gradient(#c359ff, #4c2483);
    background: radial-gradient(#c359ff, #4c2483);
}

.item-info[data-rarity=epic]::before {
    border-top-color: #ea5eff;
}

.rarity-label[data-rarity=epic] {
    background-color: #c359ff;
}

.item-card[data-rarity=rare] {
    background: -o-radial-gradient(#2cc0ff, #143877);
    background: radial-gradient(#2cc0ff, #143877);
}

.item-info[data-rarity=rare]::before {
    border-top-color: #37d0ff;
}

.rarity-label[data-rarity=rare] {
    background-color: #37d0ff;
}

.item-card[data-rarity=uncommon] {
    background: -o-radial-gradient(#6abb1e, #175117);
    background: radial-gradient(#6abb1e, #175117);
}

.item-info[data-rarity=uncommon]::before {
    border-top-color: #88e339;
}

.rarity-label[data-rarity=uncommon] {
    background-color: #88e339;
}

.item-card[data-rarity=common] {
    background: -o-radial-gradient(#bebebe, #646464);
    background: radial-gradient(#bebebe, #646464);
}

.item-info[data-rarity=common]::before {
    border-top-color: #b1b1b1;
}

.rarity-label[data-rarity=common] {
    background-color: #b1b1b1;
}

.item-card[data-rarity=lava] {
    background: -o-radial-gradient(#ea8d23, #6a0a31);
    background: radial-gradient(#ea8d23, #6a0a31);
    background-image: url('https://media.fortniteapi.io/images/rarities/v2/T_Ui_LavaSeries_Bg.png');
    background-size: cover;
}

.item-info[data-rarity=lava]::before {
    border-top-color: #d19635;
}

.rarity-label[data-rarity=lavaseries] {
    background-color: #d19635;
}

.item-card[data-rarity=frozen] {
    background: -o-radial-gradient(#94dfff, #269ed6);
    background: radial-gradient(#94dfff, #269ed6);
    background-image: url('https://media.fortniteapi.io/images/rarities/v2/T_Ui_LavaSeries_Frozen.png');
    background-size: cover;
}

.item-info[data-rarity=frozen]::before {
    border-top-color: #c4dff7;
}

.rarity-label[data-rarity=frozenseries] {
    background-color: #c4dff7;
}

.item-card[data-rarity=dark] {
    background: -o-radial-gradient(#fb22df, #520c6f);
    background: radial-gradient(#fb22df, #520c6f);
    background-image: url('https://media.fortniteapi.io/images/rarities/v2/T-Cube-Background.png');
    background-size: cover;
}

.item-info[data-rarity=dark]::before {
    border-top-color: #ff42e7;
}

.rarity-label[data-rarity=darkseries] {
    background-color: #ff42e7;
}

.item-card[data-rarity=marvel] {
    background: -o-radial-gradient(#c53333, #761b1b);
    background: radial-gradient(#c53333, #761b1b);
    background-image: url('https://media.fortniteapi.io/images/rarities/v2/Marvel.png');
    background-size: cover;
}

.item-info[data-rarity=marvel]::before {
    border-top-color: #ef3537;
}

.rarity-label[data-rarity=marvelseries] {
    background-color: #ea3537;
}

.item-card[data-rarity=dc] {
    background: -o-radial-gradient(#5475c7, #243461);
    background: radial-gradient(#5475c7, #243461);
    background-image: url('https://media.fortniteapi.io/images/rarities/v2/T-BlackMonday-Background.png');
    background-size: cover;
}

.item-info[data-rarity=dc]::before {
    border-top-color: #6094ce;
}

.rarity-label[data-rarity=dcuseries] {
    background-color: #6094ce;
}

.item-card[data-rarity=starwars] {
    background: -o-radial-gradient(#1b366e, #081737);
    background: radial-gradient(#1b366e, #081737);
    background-image: url('https://media.fortniteapi.io/images/rarities/v2/ColumbusSeries.png');
    background-size: cover;
}

.item-info[data-rarity=starwars]::before {
    border-top-color: #e7c413;
}

.rarity-label[data-rarity=columbusseries] {
    background-color: #e7c413;
}

.item-card[data-rarity=gaminglegends] {
    background: -o-radial-gradient(#5447d4, #312497);
    background: radial-gradient(#5447d4, #312497);
    background-image: url('https://media.fortniteapi.io/images/rarities/v2/platformseries.png');
    background-size: cover;
}

.item-info[data-rarity=gaminglegends]::before {
    border-top-color: #8078ff;
}

.rarity-label[data-rarity=platformseries] {
    background-color: #9790ff;
}

.item-card[data-rarity=icon] {
    background: -o-radial-gradient(#3fb9b9, #51fbfb);
    background: radial-gradient(#3fb9b9, #51fbfb);
    /*it looks bad wth lol
    background-image: url('https://media.fortniteapi.io/images/rarities/v2/T_Ui_CreatorsCollab_Bg.png');
    background-size: cover;*/
}

.item-info[data-rarity=icon]::before {
    border-top-color: #52e0e0;
}

.rarity-label[data-rarity=creatorcollabseries] {
    background-color: #32a7a7;
}

.item-card[data-rarity=slurp] {
    background: -o-radial-gradient(#29f1a3, #12a9a4);
    background: radial-gradient(#29f1a3, #12a9a4);
    background-image: url('https://media.fortniteapi.io/images/rarities/v2/Slurp.png');
    background-size: cover;
}

.item-info[data-rarity=slurp]::before {
    border-top-color: #53f0ff;
}

.rarity-label[data-rarity=slurpseries] {
    background-color: #53f0ff;
}

.item-card[data-rarity=shadow] {
    background: -o-radial-gradient(#717171, #191919);
    background: radial-gradient(#717171, #191919);
    background-image: url('https://media.fortniteapi.io/images/rarities/v2/T_Ui_LavaSeries_Shadow.png');
    background-size: cover;
}

.item-info[data-rarity=shadow]::before {
    border-top-color: #949494;
}

.rarity-label[data-rarity=shadowseries] {
    background-color: #949494;
}

.clock-icon {
    width: 30px;
    height: 30px;
}

.countdown-view {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.countdown-view img {
    width: 100%;
    display: block;
}

.countdown-parent {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 3rem 3rem;
    border-radius: 25px;
    backdrop-filter: blur(8px);
}

.countdown-parent h2 {
    padding: 1rem 0;
    font-family: headings-squash;
}

.region-dropdown {
    width: 250px;
}

.tournament-stuff {
    margin-top: 5rem;
}

.tournament-container {
    width: 100%;
}

.tournament-box-viewer {
    height: 100%;
    z-index: 1;
}

.tournament-details {
    padding: 2rem;
}

.tournament-window {
    display: flex;
    overflow: hidden;
    background: var(--card-background-color);
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem;
    position: relative;
}

.tournament-window-idx {
    left: -0.8rem;
    top: -0.6rem;
    rotate: 10deg;
    position: absolute;
    background-color: #003a8b;
    padding: 1.5rem;
    min-height: 200px;
}

.tournament-window-idx a {
    font-family: headings-light;
    font-size: 29px;
    transform: rotate(-10deg);
    padding-left: 0.5rem;
}

.tournament-window .tournament-event-window-times {
    padding-left: 6rem;
    font-family: headings-squash;
}

.tournament-rule {
    background: #00072C;
    padding: 1rem;
    width: 50%;
    border: 3px solid gray;
}

.tournament-rules {
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
}

.event-poster {
    display: flex;
    width: 100%;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 15px;
    background-color: var(--card-background-color);
}

.event-details {
    font-family: headings-squash;
    width: 70%;
    padding: 1.5rem;
}

.event-view-img {
    width: 30%;
}

.event-view-img img {
    width: 100%;
}

.event-poster .event-img img {
    height: 190px;
}

.event-text-line1,
.event-text-line2 {
    font-family: headings-squash;
}

.event-text {
    padding-left: 1rem;
}

.event-platforms-logos {
    padding-top: 1rem;
    flex-wrap: wrap;
}

.event-platforms-logos img {
    margin-right: 10px;
    height: 40px;
}

.countdown-text {
    color: #ffffff;
    font-size: 50px;
    /* border: 4px solid #ffffff; */
    border-radius: .32em;
    padding: 1rem;
    text-shadow: 0 5px 3px rgb(0 0 0 / 20%);
}

.leaderboard-table {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 1200px;
    font-family: burbank-big;
}

.leaderboard-head {
    text-transform: uppercase;
}

.leaderboard-head tr,
#leaderboard-body tr {
    align-items: center;
    display: flex;
    transition: border .15s ease-in-out;
    border: 2px solid transparent;
}

#leaderboard-body tr:hover {
    border: 2px solid black;
}

tr .top {
    padding: 1rem;
    font-size: 16px;
}

tr .bot {
    font-family: burbank-bold;
    font-size: 16px;
    padding: 1rem;
    transition: background .15s ease-in-out;
    text-overflow: ellipsis;
}

tr .player-rank,
tr .player-points,
tr .player-name-top {
    text-align: center;
}

tr .player-rank,
tr .player-points {
    flex: 1;
    margin: 1px;
}

tr .player-name,
tr .player-name-top {
    flex: 4;
    margin: 1px;
}

tr .player-name {
    display: flex;
    align-items: center;
}

.filter-choice {
    padding: 1rem 0;
}

.filter-choice i.arrow {
    margin-left: .5rem;
}

.filter-class {
    font: 15px headings-squash;
    border-radius: 15px;
    padding: .8rem;
    background-color: #111213;
    text-transform: uppercase;
}

.filters-selected {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.filters-delete-btn {
    font: 15px burbank-big;
    border-radius: 15px;
    margin: .3rem;
    padding: .8rem;
    background-color: transparent;
    transition: .15s background-color, .15s color;
    font-style: italic;
    text-transform: uppercase;
    border: 1px solid #f04747;
    color: #f04747;
    height: 100%;
    white-space: nowrap;
}

.filters-delete-btn:hover {
    background-color: #f04747;
    color: white;
}

.filters-delete-btn {
    font: 15px headings-squash;
    border-radius: 15px;
    margin: .3rem;
    padding: .8rem;
    background-color: transparent;
    transition: .15s background-color, .15s color;
    text-transform: uppercase;
    border: 1px solid #f04747;
    color: #f04747;
    height: 100%;
    white-space: nowrap;
}

.filters-delete-btn:hover {
    background-color: #f04747;
    color: white;
}

.see-more-btn {
    font: 15px headings-squash;
    border-radius: 15px;
    margin: .3rem;
    padding: .8rem;
    background-color: transparent;
    transition: .15s background-color, .15s color;
    font-style: italic;
    text-transform: uppercase;
    border: 1px solid #6df5ff;
    color: #6df5ff;
    height: 100%;
    white-space: nowrap;
}

.see-more-btn:hover {
    background-color: #6df5ff;
    color: white;
}

/*
Dropdown Stuff
Item search stuff
*/

.filter-class {
    font-size: 17px;
}

.filter-class img {
    height: 15px;
}

.filter-choice {
    margin: 0 .25rem;
}

.filter-options .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 12px;
}

.filter-class-container {
    max-width: 300px;
    padding: 1rem;
}

.filter-class-name {
    font-family: headings-light;
    letter-spacing: 1px;
}

.filter-class-object {
    font: 12px headings-squash;
    text-rendering: optimizeLegibility;
    ;
    margin: .3rem;
    border-radius: 15px;
    padding: .4rem .9rem;
    background-color: #323538;
    background-size: cover;
    text-shadow: 0 3px 3px rgb(0 0 0 / 50%);
    box-shadow: 1px 2px 4px rgb(0 0 0 / 10%);
}

.filter-class-object[type="Cosmetics.UserFacingFlags.HasVariants"],
.filter-class-object[type="Cosmetics.UserFacingFlags.HasUpgradeQuests"],
.filter-class-object[type="CosmeticsCustom.Flags.Reactive"],
.filter-class-object[type="Cosmetics.UserFacingFlags.Emote.Traversal"],
.filter-class-object[type="Cosmetics.UserFacingFlags.Synced"],
.filter-class-object[type="Cosmetics.UserFacingFlags.BuiltInEmote"],
.filter-class-object[type="CosmeticsCustom.Flags.Animated"],
.filter-class-object[type="Cosmetics.UserFacingFlags.Enlightened"],

/*Cosmetics*/

.filter-class-object[type="backpack"],
.filter-class-object[type="emote"],
.filter-class-object[type="glider"],
.filter-class-object[type="emoji"],
.filter-class-object[type="loadingscreen"],
.filter-class-object[type="outfit"],
.filter-class-object[type="pickaxe"],
.filter-class-object[type="contrail"],
.filter-class-object[type="cosmeticvariant"],
.filter-class-object[type="bundle"],
.filter-class-object[type="spray"],
.filter-class-object[type="toy"],
.filter-class-object[type="pet"],
.filter-class-object[type="music"],
.filter-class-object[type="wrap"],
.filter-class-object[type="bannertoken"] {
    padding-left: 2rem;
    position: relative;
}

.filter-class-object[type="Cosmetics.UserFacingFlags.HasVariants"]::before,
.filter-class-object[type="Cosmetics.UserFacingFlags.HasUpgradeQuests"]::before,
.filter-class-object[type="CosmeticsCustom.Flags.Reactive"]::before,
.filter-class-object[type="Cosmetics.UserFacingFlags.Emote.Traversal"]::before,
.filter-class-object[type="Cosmetics.UserFacingFlags.Synced"]::before,
.filter-class-object[type="Cosmetics.UserFacingFlags.BuiltInEmote"]::before,
.filter-class-object[type="CosmeticsCustom.Flags.Animated"]::before,
.filter-class-object[type="Cosmetics.UserFacingFlags.Enlightened"]::before,

/*Cosmetics*/

.filter-class-object[type="backpack"]::before,
.filter-class-object[type="emote"]::before,
.filter-class-object[type="glider"]::before,
.filter-class-object[type="emoji"]::before,
.filter-class-object[type="loadingscreen"]::before,
.filter-class-object[type="outfit"]::before,
.filter-class-object[type="pickaxe"]::before,
.filter-class-object[type="contrail"]::before,
.filter-class-object[type="cosmeticvariant"]::before,
.filter-class-object[type="bundle"]::before,
.filter-class-object[type="spray"]::before,
.filter-class-object[type="toy"]::before,
.filter-class-object[type="pet"]::before,
.filter-class-object[type="music"]::before,
.filter-class-object[type="wrap"]::before,
.filter-class-object[type="bannertoken"]::before {
    content: "";
    position: absolute;
    left: .5rem;
    width: 15px;
    height: 15px;
    background-size: cover;
}

.filter-class-object[type="Cosmetics.UserFacingFlags.HasVariants"]::before,
.filter-class-object[type="Cosmetics.UserFacingFlags.HasUpgradeQuests"]::before {
    background-image: url(../assets/icons/cosmetics/styles.png);
}

.filter-class-object[type="Cosmetics.UserFacingFlags.Enlightened"]::before {
    background-image: url(../assets/icons/cosmetics/enlightened.png);
}

.filter-class-object[type="CosmeticsCustom.Flags.Reactive"]::before {
    background-image: url(../assets/icons/cosmetics/reactive.png);
}

.filter-class-object[type="Cosmetics.UserFacingFlags.Emote.Traversal"]::before {
    background-image: url(../assets/icons/cosmetics/traversal.png);
}

.filter-class-object[type="Cosmetics.UserFacingFlags.Synced"]::before {
    background-image: url(../assets/icons/cosmetics/synced.png);
}

.filter-class-object[type="Cosmetics.UserFacingFlags.BuiltInEmote"]::before {
    background-image: url(../assets/icons/cosmetics/builtin.png);
}

.filter-class-object[type="CosmeticsCustom.Flags.Animated"]::before {
    background-image: url(../assets/icons/cosmetics/animated.png);
}


/*Cosmetics*/

.filter-class-object[type="backpack"]::before {
    background-image: url(../assets/icons/cosmetics/icons/backpack.svg);
}

.filter-class-object[type="emote"]::before {
    background-image: url(../assets/icons/cosmetics/icons/emote.svg);
}

.filter-class-object[type="glider"]::before {
    background-image: url(../assets/icons/cosmetics/icons/glider.svg);
}

.filter-class-object[type="emoji"]::before {
    background-image: url(../assets/icons/cosmetics/icons/emoji.svg);
}

.filter-class-object[type="loadingscreen"]::before {
    background-image: url(../assets/icons/cosmetics/icons/loadingscreen.svg);
}

.filter-class-object[type="outfit"]::before {
    background-image: url(../assets/icons/cosmetics/icons/outfit.svg);
}

.filter-class-object[type="pickaxe"]::before {
    background-image: url(../assets/icons/cosmetics/icons/pickaxe.svg);
}

.filter-class-object[type="contrail"]::before {
    background-image: url(../assets/icons/cosmetics/icons/contrail.svg);
}

.filter-class-object[type="cosmeticvariant"]::before {
    background-image: url(../assets/icons/cosmetics/icons/cosmeticvariant.png);
}

.filter-class-object[type="bundle"]::before {
    background-image: url(../assets/icons/cosmetics/icons/bundle.svg);
}

.filter-class-object[type="spray"]::before {
    background-image: url(../assets/icons/cosmetics/icons/spray.svg);
}

.filter-class-object[type="toy"]::before {
    background-image: url(../assets/icons/cosmetics/icons/toy.svg);
}

.filter-class-object[type="pet"]::before {
    background-image: url(../assets/icons/cosmetics/icons/pet.svg);
}

.filter-class-object[type="music"]::before {
    background-image: url(../assets/icons/cosmetics/icons/music.svg);
}

.filter-class-object[type="wrap"]::before {
    background-image: url(../assets/icons/cosmetics/icons/wrap.svg);
}

.filter-class-object[type="bannertoken"]::before {
    background-image: url(../assets/icons/cosmetics/icons/bannertoken.svg);
}

.filter-class-object[type=Common] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/rarity_common.png);
}

.filter-class-object[type=Epic] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/rarity_epic.png);
}

.filter-class-object[type=Legendary] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/rarity_legendary.png);
}

.filter-class-object[type=Uncommon] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/rarity_uncommon.png);
}

.filter-class-object[type=Mythic] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/rarity_mythic.png);
}

.filter-class-object[type=Rare] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/rarity_rare.png);
}

.filter-class-object[type=Transcendent] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/rarity_transcendent.png);
}

.filter-class-object[type=CUBESeries] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/T-Cube-Background.png);
}

.filter-class-object[type=DCUSeries] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/T-BlackMonday-Background.png);
}

.filter-class-object[type=FrozenSeries] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/T_Ui_LavaSeries_Frozen.png);
}

.filter-class-object[type=CreatorCollabSeries] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/T_Ui_CreatorsCollab_Bg.png);
}

.filter-class-object[type=LavaSeries] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/T_Ui_LavaSeries_Bg.png);
}

.filter-class-object[type=MarvelSeries] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/Marvel.png);
}

.filter-class-object[type=PlatformSeries] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/platformseries.png);
}

.filter-class-object[type=ShadowSeries] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/T_Ui_LavaSeries_Shadow.png);
}

.filter-class-object[type=SlurpSeries] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/Slurp.png);
}

.filter-class-object[type=ColumbusSeries] {
    background-image: url(https://media.fortniteapi.io/images/rarities/v2/ColumbusSeries.png);
}

.player-flag {
    width: 25px;
    height: 25px;
    border: 2px solid black;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin-right: 1rem;
}

.player-flag img {
    width: 100%;
}

.sac-box {
    max-width: 700px;
    max-height: 400px;
    font-family: burbank-big;
}

.sac-header {
    padding: 1.5rem;
    font-size: 30px;
    background-color: #031238;
}

.sac-content-box {
    font-family: burbank-bold;
    padding: 2rem;
    background-color: #082260;
}

.sac-code-box {
    margin-top: 1rem;
    width: 100%;
    border-radius: 0;
    border: none;
    background-color: #D3D3D3;
    color: black;
    font-size: 18px;
    font-family: 'Noto Sans', 'Arial Narrow', Arial, sans-serif;
}

.sac-code-box:focus {
    outline: none
}

.sac-button-box {
    display: flex;
    justify-content: right;
}

.sac-accept-button,
.fn-ui-btn {
    margin-top: 4rem;
    padding: 1rem;
    font-size: 17px;
    font-family: burbank-big;
    color: black;
    background: #F7FF19;
    border-radius: 0;
    border: none;
    transition: color .15s, background .15s;
    position: relative;
    z-index: 1;
}

.sac-accept-button::before,
.fn-ui-btn::before {
    background: transparent;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 3px;
    border: 5px solid rgba(255, 255, 255, .75);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    visibility: hidden;
    transition: width .15s, height .15s, transform .15s, border .15s;
}

.sac-accept-button:hover,
.fn-ui-btn:hover {
    background: white;
    color: #101C40;
}

.sac-accept-button:hover::before,
.fn-ui-btn:hover::before {
    visibility: visible;
    width: 102.5%;
    height: 120%;
    transform: translate(-1.15%, -8%);
    border: 3px solid rgba(255, 255, 255, .75);
}

.sac-player {
    margin-top: 3rem;
}

.sac-user {
    display: flex;
    font-family: burbank-big;
    font-size: 20px;
    align-items: center;
}

.ci-holder {
    position: relative;
    margin: 3rem;
    aspect-ratio: 16 / 9;
}

.ci-panel {
    padding: 3rem;
    width: 40%;
}

.ci-header {
    display: flex;
    align-items: center;
    font-family: burbank-bold;
}

.ci-code {
    margin-left: 3rem;
}

.ci-code,
.ci-author {
    color: #33AAFF;
}

.ci-header-item {
    color: #CCFFFF;
}

.ci-island-name {
    margin: 2.5rem 0;
    font-family: burbank-big;
    text-transform: uppercase;
    font-size: 50px;
}

.ci-tag {
    text-transform: uppercase;
    font-style: italic;
    border: 3px solid #0055FF;
    padding: 3px;
    color: #33AAFF;
    background-color: #0026E5;
    margin: .25rem;
    font-family: burbank-bold;
}

.ci-desc {
    margin: 2rem 0;
    font-size: 18px;
}

.ci-desc,
.ci-intro {
    font-family: burbank-bold;
    color: #CCFFFF;
}

.ci-intro {
    font-size: 16px;
}

.ci-published {
    font-family: burbank-bold;
    font-size: 18px;
    margin-top: 2rem;
}

.ci-status {
    position: absolute;
    bottom: 0;
    font-family: burbank-big;
    border: 3px solid rgb(255, 81, 81);
    background: red;
    padding: .35rem 1rem;
}

.ci-link {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    font-family: burbank-bold;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size: 14px;
}

.ci-image {
    position: absolute;
    top: 0;
    z-index: -1;
}

.ci-gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(to right, #0C2162, #0c2162cf, rgba(0, 0, 0, 0));
}

.gmode-name {
    font-family: burbank-big;
    text-transform: uppercase;
    font-style: italic;
}

.gmode-details {
    max-width: 450px;
}

.gmode-desc {
    font-family: burbank-bold;
    font-size: small;
    color: #CCFFFF;
    width: 80%;
}

.gmode-image {
    position: absolute;
    top: 3rem;
    width: 55%;
    right: 0;
    z-index: -100;
}

.gmode-image img {
    width: 100%;
    height: 100%;
    display: block;
    /* -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0)); */
}

.gmodes-holder {
    position: absolute;
    bottom: 0;
    padding-left: 3rem;
    left: 0;
    height: 45%;
    width: 100%;
    overflow: auto;
    z-index: 20;
    background: linear-gradient(to top, var(--modes-purple) 70%, rgba(0, 0, 0, 0));
}

.gmodes-list {
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    width: 100%;
    overflow-x: scroll;
}

.gmodes-list::-webkit-scrollbar-thumb {
    visibility: hidden;
}

.playlist-box {
    border: 3px solid;
    border-color: #035dff;
    transition: border-color .1s ease-in, scale .1s ease-out;
    cursor: pointer;
    position: relative;
}

.playlist-box:hover {
    scale: 1.05;
    border-color: white;
    border-bottom: 6px solid yellow;
}

.playlist-img {
    width: 300px;
    display: block;
}

.playlist-image-holder {
    position: relative;
}

.playlist-name-holder {
    position: absolute;
    bottom: 0;
    height: 2.5rem;
    width: 100%;
    background: linear-gradient(to top, black, rgba(0, 0, 0, 0));
    overflow: hidden;
    display: flex;
    transition: background .1s ease-in;
}

.playlist-name {
    position: absolute;
    bottom: 0;
    z-index: 10;
    padding: .5rem;
    font-family: burbank-big;
    font-style: italic;
    text-transform: uppercase;
    transition: color .1s ease-in;
}

.playlist-box:hover .playlist-name-holder {
    background: none;
    height: 100%;
}

.playlist-box:hover .playlist-name-holder .playlist-name {
    color: black;
}

.playlist-name-holder::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6rem;
    height: 5rem;
    background-color: white;
    z-index: 1;
    width: 120%;
    transform: translateX(-10%);
    rotate: -2.5deg;
    transition: bottom .1s ease-in;
}

.playlist-box:hover .playlist-name-holder::before {
    bottom: -2.2rem;
}

.instrument-buttons {
    display: flex;
    justify-content: space-evenly;
}

.festival-leaderboard-instrument-button {
    flex: 16%;
    display: flex;
    align-items: center;
    padding: .5rem;
    margin: .5rem;
    background-color: var(--card-background-color);
    border-radius: 10px;
    cursor: pointer;
    font-family: headings-squash;
}

.festival-song-info {
    display: flex;
    align-items: center;
}

.festival-song-data {
    padding-left: 1rem;
    font-family: headings-squash;
}

.festival-album-art {
    border-radius: 15px;
    width: 50%;
}

.festival-difficulty-item {
    width: 50%;
    position: relative;
    justify-content: right;
    align-items: center;
}

.festival-diff-icon {
    width: 30px;
    height: 30px;
}

.festival-difficulty-item a:not(.festival-difficulty-level) {
    font-family: headings-squash;
    font-size: 19px;
    padding-left: 1rem;
}

.festival-difficulty-level {
    font-family: headings-squash;
    font-size: 19px;
    padding-left: 3rem;
}

.festival-leaderboard-entry {
    font-family: headings-squash;
    font-size: 19px;
    cursor: pointer;
    padding: .5rem 1rem;

    align-items: center;
}

.festival-leaderboard-entry-parent {
    background-color: var(--card-background-color);
    margin: 0.25rem 0;
}

.festival-leaderboard-entry-parent:first-child { /* First child */
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.festival-leaderboard-entry-parent { /* Not first or last */
    border-radius: 5px;
}

.festival-leaderboard-entry-parent:last-child { /* Last child */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.festival-entry-position {
    width: 10%;
}

.festival-entry-name {
    width: 40%;
}

.festival-entry-score {
    width: 15%;
}

.festival-entry-accuracy {
    width: 10%;
}

.festival-entry-stars {
    width: 25%;
}

.festival-entry-stars img {
    width: 45px;
    height: 45px;
}

.festival-entry-flawless {
    color: #FFEA26;
    font-style: italic;
    outline: solid #FDF2BA 3px;
    outline-offset: .1875rem;
    border-radius: 8px;
}

.festival-entry-sessions-data {
    
    padding: 1rem;
}

.festival-session-player {
    background-color: var(--theme-color);
    margin: 1rem 0.5rem;
    border-radius: 15px;
    padding: 0.5rem;
    flex: 25%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.festival-player-instrument-info {
    display: flex;
    align-items: center;
}

.festival-player-instrument-info img {
    width: 30px;
}

.festival-session-player p {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.festival-session-player.is-player {
    --outline-width-hover: .25rem;
    outline-color: #fffc;
    outline-offset: .1875rem;
    outline-width: var(--outline-width-hover);
    outline-style: solid;
    transition-duration: .15s;
    transition-property: outline-color, outline-offset, outline-width;
    transition-timing-function: ease-out;
}

jam-track {
    padding: 0.5rem;
    width: 50%;
}

.festival-featured-jam-tracks-section {
    display: flex;
    flex-wrap: wrap;
    

    justify-content: center;
}

.jam-track-item-card {
    padding: 1rem;
    border-radius: 15px;
    
    background-color: var(--card-background-color);
    display: flex;
}

.jam-track-item-card img {
    width: 100px;
    border-radius: 15px;
}

.jam-track-description {
    padding-left: 1rem;
}

.encore-override-fortnite-button {
    font-size: 18px;
}

.encore-songs {
    display: flex;
    flex-wrap: wrap;
}

.encore-track {
    padding: 1.5rem;
    border-radius: 15px;
    margin: 1rem;
    flex: 40%;
}

.encore-track {
    background-color: var(--card-background-color);
}

.encore-track .left-section {
    width: 70%;
    padding-left: 1.5rem;
}
.encore-track .right-section {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.encore-track .right-section .art {
    display: block;
    border-radius: 15px;
}

.right-section .diffs-view {
    background-color: #99D9EA;
    color: black;
}

.diffs-view:hover .song-diffs-popup {
    display: block;
}

.song-diffs-popup {
    position: absolute;
    background-color: var(--theme-color);
    padding: 1rem;
    left: -230px;
    top: -45%;
    width: 230px;
    border-radius: 18px;
    display: none;
}

.song-diffs-popup::after {
    position: absolute;
    right: -1rem;
    top: 2.5rem;
    content: '';
    width: 30px;
    height: 30px;
    background-color: var(--theme-color);
    rotate: -45deg;
}

.track-btn {
    margin-top: .5rem;
}

.diff {
    display: flex;
    align-items: center;
    flex: 50%;
}

.diffbars {
    padding-left: 1rem;
    display: flex;
}

.diffbar {
    width: 8px;
    height: 16px;
    background-color: rgb(255, 255,255);
    border-radius: 3px;
    rotate: 7deg;
    margin-right: 1px;
}

.diffbar.empty {
    background-color: gray;
}

.encore-track .art {
    width: 100%;
}

.encore-track .track-details {
    font-family: headings-squash;
}

.encore-track .song-diffs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

track-details {
    padding-left: 1rem;
    font-family: headings-squash;
    width: 50%;
}

.encore-track-view .art {
    height: 100%;
}

track-details th, track-details td {
    padding: 0 1rem;
} 

track-details .song-diffs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

track-details .song-diffs .diff {
    width: auto;
}

.instrument-icon-encore {
    width: 30px;
}

.encore-download {
    display:flex;
    margin-top: 1rem;
    justify-content: center;
}

.encore-track-view track-name div {
    padding-left: 1rem;
}

.fnlookup-blog-posts {
    display: flex;
    flex-wrap: wrap;
}

#search-function-encore {
    display: flex;
}

.blog-post {
    margin: 0.5rem;
    background-color: var(--card-background-color);
    overflow: hidden;
    border-radius: 15px;
}

.blog-post .information {
    padding: 1rem;
}

.blog-post img {
    width: 100%;
    display: block;
}

.blog-post-big-image-container {
    max-height: 300px;
    overflow: hidden;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-post-big-image-container img {
    width: 100%;
    display: block;
}

.blog-data {
    font-family: headings-squash;
}

.blog-data * {
    margin: 0.5rem 0;
}

.blog-data img {
    width: 50%;
    height: 50%;
}

.cookie-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, .25);
    z-index: 99999;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie-dialog {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 400px;
    background: var(--card-background-color);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

.cookie-dialog-text {
    padding: 1rem;
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.gray {
    font-style: italic;
    color: gray;
    text-decoration: underline;
}

.cookie-accept {
    position: absolute;
    bottom: 1rem;
}

@media (max-width: 785px) {
    .countdown-text {
        font-size: 30px;
    }
    .event-poster {
        margin: .5rem;
    }
    .event-poster:not(:last-child) {
        border-bottom: 1px solid rgb(47, 47, 47);
    }
}

@media (max-width: 480px) {
    .countdown-text {
        border-width: 2px;
        font-size: 20px;
    }
}

.markdown-about img {
    width: 100%;
    padding: 1rem;
    border-radius: 20px;
}

.markdown-about h1 {
    padding: 1rem 0;
}

.markdown-about/*, h1, h2, h3, p, a, ul, li*/ {
    font-family: headings-squash;
}

.hidden {
    display: none;
}

.hidden-media-o {
    display: none;
}

.d-80 {
    width: 80%;
}

.d-70 {
    width: 70%;
}

.d-50 {
    width: 50%;
}

.d-30 {
    width: 30%;
}

.d-20 {
    width: 20%;
}

.d-70-media {
    width: 70%;
}

.d-30-media {
    width: 30%;
}

.d-50-media {
    width: 50%;
}

.float-right {
    float: right;
}

.flex {
    display: flex;
}

.flex-media {
    display: flex;
}

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

.flex-wrap {
    flex-wrap: wrap;
}

.right {
    position: absolute;
    right: 0;
}

.pointer {
    cursor: pointer;
}

.flex-hcenter {
    display: flex;
    justify-content: center;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.overflow-auto {
    overflow: auto !important;
}

.panning {
    display: inline-block;
    padding-left: 100%;
    -webkit-animation: marquee 7s linear infinite;
    animation: marquee 7s linear infinite;
}

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

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

.marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

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

@keyframes highbanner {
    0% {
        background-position: 0px;
    }
    40%,
    100% {
        background-position: 3000px;
    }
}

@keyframes floating {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(0%);
    }
}

.floating {
    animation: floating 2s ease-in-out infinite;
}

@keyframes traversal-style-bar {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .flex-omedia {
        display: block;
    }
    .text-right-omedia {
        text-align: right;
    }
    .news-item,
    .crew-item-mobile {
        flex: 0 1 31%;
    }
    .nav-dropdown-menu {
        pointer-events: none;
        opacity: 0;
        display: block;
    }
    .nav-item:hover>.nav-dropdown-menu {
        opacity: 1;
        pointer-events: auto;
    }
    .content {
        min-width: 768px;
    }
    .encore-track .art-ghost {
        display: none;
    }
}

@media (max-width: 1280px) {
    .nav-container {
        width: 100%;
    }
    .navbar-top {
        padding-left: 1rem;
        margin: 0rem 0rem;
        border-radius: 0;
        width: 100%;
    }
    .nav-buttons-items {
        flex-direction: column;
        top: 3.75rem;
        position: absolute;
        background-color: var(--nav-color);
        width: 300px;
        z-index: -1;
        border-radius: 10px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        overflow: hidden;
        height: 0%;
    }
    .navbar-top.hidden-nav .nav-buttons-items {
        height: auto;
    }
    .content {
        --side-padding: 3rem;
        --top-padding: 5rem;
    }
    .quests-section-dropdown {
        width: 100%;
    }
    .quests-viewer {
        width: 100%;
    }
}

@media (min-width: 1280px) {
    .festival-leaderboard-entries {
        min-width: 960px;
        max-width: 1280px;
    }
}

@media (max-width: 768px) {
    .fn-dot-mask,
    .fn-season-video:not(.active-by-viewer) {
        display: none;
    }
    .content {
        border-radius: 0;
        --top-margin: 2rem;
        --bottom-margin: 0;
        --side-margin: 0;
        width: 100%;
    }
    .nav-container {
        left: 0;
    }
    .nav-items {
        flex-direction: column;
        width: 100%;
    }
    .nav-items li {
        flex: 2 1 auto;
    }
    .nav-item {
        font-size: 20px;
    }
    .nav-dropdown-menu {
        max-height: 200px;
        overflow: auto;
        position: relative;
    }
    /*What cAN I SAYYY*/
    .nav-item.toggled .nav-dropdown-menu {
        display: block;
    }
    .language-dropdown {
        max-height: 200px;
        overflow-y: scroll;
    }
    .nav-content {
        display: block;
    }
    .ci-image {
        position: relative;
        padding: 1.5rem;
    }
    .ci-image img {
        border-radius: 10px;
    }
    .ci-panel {
        width: 100%;
    }
    .ci-gradient {
        display: none;
    }
    .d-50-media {
        width: 100%;
    }
    .d-70-media {
        width: 100%;
    }
    .d-30-media {
        width: 100%;
    }
    .season {
        width: 100%;
    }
    .flex-media {
        display: block;
    }
    .hidden-media {
        display: none;
    }
    .hidden-media-o {
        display: block;
    }
    .text-center-omedia {
        text-align: center;
    }
    .gmode-details {
        max-width: 100%;
    }
    .gmode-image {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .gmode-image::before {
        position: absolute;
        content: "";
        height: 80px;
        top: -50px;
        background-color: var(--modes-purple);
        width: 200%;
        z-index: 1;
        background: linear-gradient(to bottom, var(--modes-purple) 70%, rgba(0, 0, 0, 0));
    }
    .gmode-image img {
        width: 150%;
        /* -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0)); */
    }
    .gmodes-list {
        position: static;
        padding: 3rem 0;
    }
    .event-information {
        display: block;
    }
    .event-details {
        width: 100%;
        padding: 0;
    }
    .shop-bar {
        flex-direction: column;
    }
    .festival-leaderboard-entries {
        min-width: 200px;
        max-width: 400px;
    }

    .encore-songs {
        display: block;
    }

    .encore-track {
        flex: none;
    }

    .encore-track {
        position: relative;
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }
    /* cursed fix but it works */

    .encore-override-fortnite-button {
        font-size: 14px;
    }

    .encore-track .left-section,
    .encore-track .right-section {
        width: 100%;
        position: relative;
        z-index: 1;
        padding-left: 0;
    }

    .encore-track .right-section {
        flex-direction: row;
    }

    .encore-track .right-section .art {
        display: none;
    }

    track-details th, track-details td {
        padding: 0 0.3rem;
    } 

    .diffs-view:hover .song-diffs-popup {
        display: none;
    }

    .encore-track .art-ghost {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        filter: blur(2px);
        z-index: 0;
    }
    .encore-track::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0, 0, 0, 0.795) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .navbar-button {
        padding: .8rem .7rem;
    }

    .navigation {
        top: 0;
        bottom: 0;
        display: flex;
        height: 4rem;
        margin: 0;
    }
}

@media (max-width: 992px) {
    /*Item card change size*/
    /* .item-card:not(.no-resize) img:not(.vbuck-icon):not(.item-card-item-display) {
        border: 0;
        width: 200px;
    } */
    .item-card:not(.no-resize) {
        width: 112px;
    }
    .item-card .item-info .vbuck-icon {
        width: 13px;
        height: 13px;
    }
    .shop-section-section-container {
        min-width: 0px;
    }
    .diffbars {
        padding-left: 0.2rem;
    }
    .encore-override-fortnite-button {
        font-size: 13px;
        padding: 0.5rem;
        border-radius: 15px;
    }
}

@media (min-width: 992px) {
    .shop-section-section-container {
        min-width: 960px;
    }
    .content {
        min-width: 992px;
    }
}

@media (min-width: 1366px) {
    .content {
        min-width: 1366px;
    }
}