* {
    text-align: center;
    font-family: 'Poppins';
    font-weight: 400;
}

:root {
    --questCategoryBackgroundColor: #1e2253;
    --questCategoryBackgroundColorHover: #1e2253;
    --questCategoryBoxShaderColorHover: #1e2253;
    --questCategoryBorderColor: #1e2253;
    --questTagBattlePassColor: #ffd700;
    --questTagCountdownColor: #0000ff;
    --questBackgroundColor: #282e73;
    --questBackgroundColorHover: #282e73;
    --questRewardsBackgroundColor: #1e2253;
    --tagBackgroundColor: #282e73;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bodyBackgroundColor);
    color: white;
}

@media only screen and (max-width : 1200px) {
    .container {
        display: block;
        height: 100%;
        width: 100%;
    }

    .head {
        text-align: center;
    }

    .questsContainer {
        width: 100%;
        height: 100%;
        margin: 80px 0;
    }

    .questsDivision {
        display: block;
        width: 100%;
        height: 100%;
    }

    .questsBanners {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: left;
        box-sizing: border-box;
    }

    .questsBanners-inactive {
        display: none;
    }

    .questsBanner {
        width: 90%;
        height: 100px;
        display: flex;
        margin: 10px;
        padding: 5px;
        border-radius: 15px;
        cursor: pointer;
        overflow: hidden;
        transition: .3s;
    }

    .questsBannerHover {
        box-shadow: 0 0 0 4px var(--questCategoryBoxShaderColorHover);
    }

    .questsBannerHeader {
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 100%;
        background: linear-gradient(-90deg, #22689C, #142A53);
        border-radius: 13px;
        overflow: hidden;
        position: relative;
    }

    .questsBannerRewardXP {
        position: absolute;
        z-index: 1;
        right: 0;
        display: flex;
        margin: auto 0;
        flex-flow: row wrap;
        justify-content: center;
    }

    .questsBannerRewardXPIcon {
        width: 100%;
        display: flex;
        margin: auto auto 0 auto;
    }

    .questsBannerRewardXPIcon img {
        display: flex;
        margin: auto;
        width: 50px;
    }

    .questsBannerRewardXPTitle {
        font-family: 'Oswald';
        font-weight: 400;
        font-size: 13px;
    }

    .questsBannerIcon {
        width: 150px;
        height: 100%;
        display: flex;
        justify-content: center;
        margin: auto auto auto 0;
    }

    .questsBanner:hover .questsBannerIcon {}

    .questsBannerIcon img {
        height: 100%;
    }

    .questsBannerDetails {
        width: 100%;
        height: 100%;
        flex-flow: row wrap;
        display: flex;
        box-sizing: border-box;
    }

    .questsBannerTitle {
        color: white;
        margin: auto 10px;
        text-align: left;
        text-transform: uppercase;
        font-family: 'Oswald';
        font-size: 13px;
        letter-spacing: 1px;
        width: 100%;
    }

    .questsBannerSubTitle {
        color: white;
        margin: 5px 10px auto;
        text-align: left;
        font-family: 'Oswald';
        font-size: 11px;
        width: 100%;
    }

    .questsBannerCountdown {
        color: white;
        opacity: .8;
        text-align: left;
        font-size: 12px;
        margin: auto 10px;
        width: 100%;
    }

    .questsBackBTN {
        width: 95%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px auto;
        border-radius: 15px;
    }

    .questsBackBTN-p {
        padding: 10px 20px;
    }

    .questsContentDetails {
        width: 100%;
        height: 100%;
        display: none;
        margin: auto 0 auto auto;
    }

    .questsContentDetails-active {
        display: flex;
    }

    .questsContainerDetails {
        width: 100%;
        height: 100%;
        display: block;
    }

    .questsGetDetails {
        display: block;
        width: 100%;
        height: 400px;
    }

    .questsGetDetailsHeader {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .questsGetDetailsTitle {
        display: flex;
        margin: auto;
        text-align: center;
        font-size: 13px;
    }

    .questsGetDetailsIcon {
        position: relative;
        width: 300px;
        display: flex;
        margin: auto;
    }

    .questsGetDetailsIcon img {
        width: 100%;
    }

    .questsGetDetailsIconBlur {
        position: absolute;
        width: 300px;
        height: 200px;
        z-index: 2;
        background: linear-gradient(#050a1400, #050a14);
        bottom: -10px;
        left: 0;
        right: 0;
    }

    .questsGetDetailsIconBlur2 {
        position: absolute;
        width: 300px;
        height: 100px;
        z-index: 2;
        background: linear-gradient(#050a1400, #050a14);
        bottom: -10px;
        left: 0;
        right: 0;
    }

    .questsDetails {
        width: 100%;
        display: block;
    }

    .questsDetailsHeader {
        width: 100%;
        display: block;
    }

    .questsDetailsHead {
        width: 100%;
        display: block;
    }

    .questsDetailsTitle {
        font-size: 20px;
        font-family: 'Titillium Web';
        font-weight: 200;
        text-transform: uppercase;
    }

    .questsDetailsType {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .questsDetailsTypeTag {
        width: auto;
        min-width: 140px;
        height: 30px;
        margin: auto 5px;
        padding: 0 10px;
        background-color: var(--tagBackgroundColor);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .Tag-BP-Required {
        clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    }

    .Tag-Countdown-Required {
        clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    }

    .Tag-BP-Required img {
        width: 25px;
        height: 25px;
        display: flex;
        margin: auto;
    }

    .Tag-Title {
        color: white;
        opacity: .8;
        font-size: 9px;
    }

    .questsDetailsContent {
        width: 90%;
        height: 100%;
        display: flex;
        margin: 0 auto;
        justify-content: center;
        box-sizing: border-box;
        flex-flow: row wrap;
    }

    .questDetails {
        width: 100%;
        max-width: 600px;
        min-height: 80px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 5px auto;
        background-color: var(--questBackgroundColor);
        border-radius: 10px;
        overflow: hidden;
        user-select: none;
    }

    .questDetailsHeader {
        width: 100%;
        height: 100%;
        display: inline-flex;
        flex-flow: row wrap;
        box-sizing: border-box;
        margin: auto 0 auto 10px;
    }

    .questDetailTitle {
        font-family: 'Oswald';
        font-weight: 200;
        font-size: 13px;
        text-align: left;
        width: 100%;
    }

    .questDetailShort {
        font-size: 8px;
        color: #ffffffc1;
        text-align: left;
        width: 100%;
    }

    .questDetailProgression {
        font-size: 13px;
        text-align: right;
        margin: auto 10px 10px auto;
    }

    .questDetailProgressionColor {
        color: rgb(255, 255, 255);
    }

    .questDetailXp {
        font-size: 8px;
        text-align: left;
        color: rgb(33, 181, 33);
    }

    .questDetailsReward {
        min-width: 70px;
        max-width: 200px;
        height: 100%;
        display: inline-flex;
        justify-content: center;
        box-sizing: border-box;
        flex-flow: row wrap;
        margin: auto 0 auto auto;
        background-color: var(--questRewardsBackgroundColor);
    }

    .questReward {
        width: 50px;
        height: 50px;
        display: flex;
        margin: auto;
        overflow: hidden;
        transition: .2s;
    }

    .questReward img {
        width: 100%;
        height: 100%;
    }

    .questRewardValue {
        font-size: 12px;
        display: flex;
        margin: auto;
    }
}

@media only screen and (min-width : 1200px) {
    .questsBackBTN {
        display: none;
    }

    .container {
        display: block;
        height: 100%;
        width: 100%;
    }

    .head {
        text-align: center;
    }

    .questsContainer {
        width: 100%;
        height: 100%;
    }

    .questsDivision {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .questCategoryFilters {
        display: flex;
        margin: 20px auto 20px 5px;
        height: 40px;
        width: 29%;
    }

    .questsSectionsFilterContainer {
        display: block;
        width: 100%;
        height: 100%;
    }

    .questsSectionsFilterContent {
        display: inline-flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .sectionFilterCategory {
        display: flex;
        margin: 5px;
        padding: 3px 10px;
        justify-content: center;
        align-items: center;
        min-width: 150px;
        height: 30px;
    }

    .sectionFilterCategoryP {
        display: flex;
        font-size: 15px;
        font-family: 'Poppins';
    }

    .questsBanners {
        width: 30%;
        height: 100%;
        display: inline-flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: left;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 0 10px;
    }

    /* #1D1D37 */

    .questsBanner {
        width: 100%;
        height: 130px;
        display: flex;
        margin: 5px 5px 5px 0;
        padding: 5px;
        border-radius: 15px;
        cursor: pointer;
        overflow: hidden;
        transition: .3s;
    }

    .questsBanner:hover {
        box-shadow: 0 0 0 4px white;
    }

    .questsBannerHover {
        box-shadow: 0 0 0 4px var(--questCategoryBoxShaderColorHover);
    }

    .questsBannerHeader {
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 100%;
        background: linear-gradient(-90deg, #1D1D37, #1a1a1a);
        border-radius: 13px;
        overflow: hidden;
        position: relative;
    }

    .questsBannerRewardXP {
        position: absolute;
        z-index: 1;
        right: 0;
        display: flex;
        margin: auto 0;
        flex-flow: row wrap;
        justify-content: center;
    }

    .questsBannerRewardXPIcon {
        width: 100%;
        display: flex;
        margin: auto auto 0 auto;
    }

    .questsBannerRewardXPIcon img {
        display: flex;
        margin: auto;
        width: 50px;
    }

    .questsBannerRewardXPTitle {
        font-family: 'Oswald';
        font-weight: 400;
        font-size: 13px;
    }

    .questsBannerIcon {
        min-width: 200px;
        width: 200px;
        height: 100%;
        display: flex;
        justify-content: center;
        margin: auto 0 auto auto;
    }

    .questsBanner:hover .questsBannerIcon {}

    .questsBannerIcon img {
        margin: auto;
        height: 100%;
    }

    .questsBannerDetails {
        width: 100%;
        height: 100%;
        flex-flow: row wrap;
        display: flex;
        box-sizing: border-box;
    }

    .questsBannerTitle {
        color: white;
        margin: auto 10px;
        text-align: left;
        text-transform: uppercase;
        font-family: 'HeadingNow';
        font-size: 17px;
        letter-spacing: 1px;
        width: 100%;
    }

    .questsBannerSubTitle {
        color: white;
        margin: 5px 10px auto;
        text-align: left;
        font-family: 'Oswald';
        font-size: 13px;
        width: 100%;
    }

    .questsBannerCountdown {
        color: white;
        opacity: .8;
        text-align: left;
        font-size: 11px;
        margin: auto 10px;
        width: 100%;
    }

    .questsContentDetails {
        width: 70%;
        height: 100%;
        display: flex;
        margin: 0 auto;
    }

    .questsContainerDetails {
        width: 100%;
        height: 100%;
        display: block;
    }

    .questsGetDetails {
        display: block;
        width: 100%;
        height: 400px;
    }

    .questsGetDetailsHeader {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .questsGetDetailsTitle {
        display: flex;
        margin: auto;
        text-align: center;
        font-size: 13px;
    }

    .questsGetDetailsIcon {
        position: relative;
        width: 300px;
        display: flex;
        margin: auto;
    }

    .questsGetDetailsIcon img {
        width: 100%;
    }

    .questsGetDetailsIconBlur {
        position: absolute;
        width: 300px;
        height: 200px;
        z-index: 3;
        background: linear-gradient(#050a1400, #050a14);
        bottom: -10px;
        left: 0;
        right: 0;
    }

    .questsGetDetailsIconBlur2 {
        position: absolute;
        width: 300px;
        height: 100px;
        z-index: 3;
        background: linear-gradient(#050a1400, #050a14);
        bottom: -10px;
        left: 0;
        right: 0;
    }

    .questsDetails {
        width: 100%;
        display: block;
    }

    .questsDetailsHeader {
        width: 100%;
        display: block;
    }

    .questsDetailsHead {
        width: 100%;
        display: block;
    }

    .questsDetailsTitle {
        font-size: 20px;
        font-family: 'Titillium Web';
        font-weight: 200;
        text-transform: uppercase;
    }

    .questsDetailsType {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .questsDetailsTypeTag {
        width: auto;
        min-width: 140px;
        height: 30px;
        margin: auto 5px;
        padding: 0 10px;
        background-color: var(--tagBackgroundColor);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .Tag-BP-Required {
        clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    }

    .Tag-Countdown-Required {
        clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    }

    .Tag-BP-Required img {
        width: 25px;
        height: 25px;
        display: flex;
        margin: auto;
    }

    .Tag-Title {
        color: white;
        font-size: 9px;
    }

    .questsDetailsContent {
        width: 70%;
        height: 100%;
        display: flex;
        margin: 20px auto;
        justify-content: center;
        box-sizing: border-box;
        flex-flow: row wrap;
    }

    .questDetails {
        width: 100%;
        min-height: 80px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 5px auto;
        background-color: var(--questBackgroundColor);
        box-shadow: 0 0 0 0px white;
        border-radius: 10px;
        overflow: hidden;
        user-select: none;
        transition: .2s;
    }

    .questDetails:hover {
        box-shadow: 0 0 0 2px white;
    }

    .questDetailsHeader {
        width: 100%;
        height: 100%;
        display: inline-flex;
        flex-flow: row wrap;
        box-sizing: border-box;
        margin: auto 0 auto 10px;
    }

    .questDetailTitle {
        font-family: 'Oswald';
        font-weight: 200;
        font-size: 13px;
        text-align: left;
        width: 100%;
        margin: 5px auto;
    }

    .questDetailShort {
        font-size: 9px;
        color: #ffffffc1;
        text-align: left;
        width: 100%;
    }

    .questDetailProgression {
        font-size: 13px;
        text-align: right;
        width: 100%;
        margin: auto 10px 10px auto;
    }

    .questDetailProgressionColor {
        color: rgb(255, 255, 255);
    }

    .questDetailXp {
        font-size: 8px;
        text-align: left;
        color: rgb(33, 181, 33);
    }

    .questDetailsReward {
        min-width: 70px;
        max-width: 200px;
        height: 100%;
        display: inline-flex;
        justify-content: center;
        box-sizing: border-box;
        flex-flow: row wrap;
        margin: auto 0 auto auto;
        background-color: var(--questRewardsBackgroundColor);
    }

    .questReward {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: 50px;
        height: 50px;
        overflow: hidden;
        border-radius: 10px;
        transition: .3s;
        box-shadow: 0 0 0 5px transparent;
    }

    .questReward:hover {
        box-shadow: 0 0 0 2px white;
    }

    .questReward img {
        width: 90%;
        display: flex;
        margin: auto;
    }

    .questRewardValue {
        font-size: 12px;
        display: flex;
        margin: auto;
    }
}