:root{
    --primary-color: white;
    --secondary-color:black;
    --primary-text-color:black;
    --secondary-text-color: gray;
    --primary-2-color:white;
    --billing-color: black;
    --fighters-primary-color: lightgray;
    --fighters-text-color: black;
    --whitesmoke-to-black: #f1f1f1;
    --whitesmoke-to-grayblack: #f1f1f1;
    --colorR:255;
    --colorG:255;
    --colorB:255;
}
[data-theme="dark"] {
    --primary-color:black;
    --secondary-color: #1c1c1d;
    --primary-text-color: whitesmoke;
    --secondary-text-color: #1c1c1d;
    --primary-2-color:#1c1c1d;
    --billing-color: darkgray;
    --fighters-primary-color: #1c1c1d;
    --fighters-text-color: lightgray;
    --whitesmoke-to-black: black;
    --whitesmoke-to-grayblack: #1c1c1d;
    --colorR:0;
    --colorG:0;
    --colorB:0;

    /* --font-color: #c1bfbd;
    --link-color:#0a86da;
    --link-white-color:#c1bfbd;
    --bg-color: #333; */
}
@media (max-width: 900px){

    #main-body{
        overflow: auto;
        width: 100%
    }
    #main-body.active{
        overflow: hidden;
    }
    .header{
        display: none !important;
    }
    .container{
        margin: 0 auto;
        padding-top: 30px;
    }
    .articles-container{
        margin: 0 auto;
        padding: 10px;
        margin-bottom: 100px;
    }
    .event-content{
        padding: 0px;
        width: 56%;
        position: relative;
    }
    .event-content h4{
        font-size: 12px;
    }
    .event-content h3{
        font-size: 18px;
    }
    .event-content p{
        font-size: 12px;
    }

    .event-title{
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .event-date{
        margin-bottom: 0px;
    }

    .poster-box{
        width: 150px;
        height: auto;
    }
    .event-card{
        max-width: 100%;
        justify-content:space-between;
        grid-template-columns: 170px minmax(300px,445px);
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .event-card.active .event-content{
        margin-left: 0%;
        /* padding-left: 40%; */
    }
    .event-card.active .poster-box{
        margin-right: 0%;
    }
    .accordian_text{
        display: none !important;
    }

    /*bottom nav bar*/
    .mobile-nav{
        background: #f1f1f1;
        position: fixed;
        bottom: 0;
        height: 75px;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        margin: 0 auto;
        padding: 5px;

        background: linear-gradient(135deg, rgba(var(--colorR),var(--colorG),var(--colorB),1),rgba(255,255,255,0.1)); /*COME BAKC TO THISSSSSS*/
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255,255,255,0.18);
        color: var(--primary-text-color);
    }
    .icon-text{
        font-size: 10px;
        text-align: center;
        opacity: 0.3;
    }
    .icon-text.active{
        opacity: 1;
    }
    .bloc-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        scale: 0.8;
    }
    .bloc-icon img {
        width: 30px;
    }

    /*pop up events*/
    .popupEvent{
        display: none;
    }
    .popupEvent ul{
        background-color: var(--whitesmoke-to-black);
    }
    .popupEvent ul li{
        background-color: var(--primary-2-color);
        color: var(--primary-text-color);
    }
    .popupEvent .overlay{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.7);
        z-index: 1;
        display: none;
    }
    .popupEvent .popupEventInfo{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(0);
        background-color: var(--whitesmoke-to-black);
        color: black;
        width: 90%;
        height: 70%;
        z-index: 2;
        text-align: center;
        padding: 0px;
        box-sizing: border-box;
    }
    .popupEventInfo ul{
        list-style-type: none;
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        overflow-y: auto;
        /* overflow: hidden; */
        height: 40%;
        padding: 10px;
        padding-bottom: 20px;
        margin-top: 10px;
    }
    .popupEventInfo ul li{
        box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
        display: flex;
        padding: 10px 20px;
        margin: 5px 0;
        transition: .5s;
        /* background: rgba(0, 0, 0, .1); */
        border-bottom: 3px solid gray;
        border-radius: 5%;
        justify-content: space-between;
        max-width: 100%;    
    }
    .popupEvent.active{
        display: block;
    }
    .popupEvent.active .overlay{
        transition: all .5s ease;
        display: block;
        backdrop-filter: blur(5px);
    }
    .popupEvent.active .popupEventInfo{
        transition: all 300ms ease-in-out;
        transform: translate(-50%,-50%) scale(1);
    }
    .popupEvent.active body{
        overflow: hidden;
    }
    .poster-gradient{
        height: 45vh;
    }
    .poster-gradient img{
        /* max-width: 100%; */
        width: 100%;
        /* height: 45vh; */
        object-fit: cover;
        object-position: center top;
        position: relative;
        bottom: 0;
    }
    .gradient{
        position: fixed;
        top: 1px;
        left: 0px;
        width: 100%;
        height: 45.1vh;
        display: block;
        background: linear-gradient(to bottom, transparent 50%, var(--whitesmoke-to-black) 100%);   /*remember to adjust this for dark mode*/
    }
    #popupTitle{
        position: absolute;
        left: 0;
        right: 0;
        top: 55%;
        font-size: 22px;
        font-weight: bold;
        padding: 10px;
        color: var(--primary-text-color);
    }
    .alertNoti{
        position: absolute;
        /* display: none; */
        /* scale: 0.08; */
        top: 10px;
        right: 10px;
        width: 45px;
        height: 45px;
        background-color: #f1f1f1;
        border-radius: 55px;
        border: 2px solid lightgray;
    }
    .alertNoti img{
        width: 100%;
        scale: 0.7;
        animation: wiggle 2s linear 1;
    }
    @keyframes wiggle {
        0%,7%{
            transform: rotateZ(0);
        }
        15%{
            transform: rotateZ(-25deg);
        }
        20%{
            transform: rotateZ(20deg);
        }
        25%{
            transform: rotateZ(-20deg);
        }
        30%{
            transform: rotateZ(16deg);
        }
        35%{
            transform: rotateZ(-14deg);
        }
        40%,100%{
            transform: rotateZ(0);
        }
    }
    .backButton{
        /* background-color: white; */
        color: var(--primary-text-color);
        position: relative;
        margin-right: 80%;
        padding-bottom: 10px;
        padding-top: 5px;
        cursor: pointer;
        font-size:large;
        transition: all 0.5s ease;
        opacity: 1;
    }
    .popupEvent .popupFighterInfo-Img{
        opacity: 0;
        visibility: hidden;
        /* display: none; */
        transition: all 0.5s ease;
        height: 75%;
        top: 52%;
    }
    .popupEvent .popupFighterInfo-Img .popupTableContainer{
        height: 43%;
    }
    .popupEvent .popupFighterInfo-Img.active{
        opacity: 1;
        visibility: visible;
        display: block;
        /* transition: all 1s ease; */

    }


    /*//////////////////////////// FIGHTER.HTML */
    #main-body{
        overflow: auto;
        width: 100%;
    }
    .search-box{
        width: 100%;
    }
    .row{
        width: 100%;
        padding: 5px 15px;
    }
    input{
        height: 40px;
    }
    .fighterWindow{
        display: none;
    }
    #searchTable{
        right: 0;
        width: 100%;
        border-spacing: 0;
    }
    #searchTable tr td{
        text-align: left;
        border-bottom: 2px solid rgba(83, 83, 83, 0.5);
        border-radius: 0px;
        font-size: 20px;
    }
    #searchTable tr{
        background-color: var(--primary-color);
    }
    #searchTable tr:hover{
        background-color: none;
        transform: none;
        box-shadow: none;
    }
    #searchTable tr.active{
        background-color: lightgray;
    }
    .popupFighterInfo-Img{
        position: fixed;
        top: 50%;
        left: 50%;
        /* transform: translate(-50%,-50%) scale(0); */
        background-color: var(--whitesmoke-to-grayblack);
        color: var(--fighters-text-color);
        width: 90%;
        height: 70%;
        z-index: 2;
        text-align: center;
        padding: 10px;
        box-sizing: border-box;
    }
    .popupFighterInfo{
        display: grid;
        position: relative;
        top: 5%;
        padding: 1rem;
        width: 40%;
    }
    .popupFighterImageDiv{
        width: 70%;
    }
    .popupFighterImage{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
    .popupEvent.active .popupFighterInfo-Img{
        transition: all 300ms ease-in-out;
        transform: translate(-50%,-50%) scale(1);
    }
    .popupFlexContainer{
        display: flex;
        height: 50%;
    }
    .wrapper table{
        width: 100%;
        right: 0;
        left:0;
    }
    .popupTableContainer{
        overflow-y: auto;
        height: 50%;
    }
    #popupFighterHistoryTable{
        margin-top: 10px;
        width: 100%;
        table-layout: fixed;
        border-spacing: 0.5em;
    }
    #popupFighterHistoryTable tbody tr{
        height: 40px;
    }
    #popupFighterHistoryTable tbody tr td{
        font-size: 13px;
        height: 50px;
        padding: 0;
    }
    #popupFighterHistoryTable tbody tr td:nth-child(3){
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #popupFighterHistoryTable tbody tr td:nth-child(4){
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #popupFighterHistoryTable tbody tr th{
        color: var(--primary-text-color);
    }
    #popupFighterHistoryTable tbody tr td:first-child{
        color: #000;
    }
    #popupFighterHistoryTable tbody tr th:first-child{
        width: 15%;
    }
    /* RANKINGS.HTML ***************************/
    .card-container{
        width: 100%;
        padding: 30px;
        margin: 0 auto;
        display: block;
        margin-bottom: 100px;
        opacity: 1;
        /* display: block; */
    }
    .card{
        width: 100%;
        height: 50px;
        padding: 0;
    }
    .card{
        margin-top: 30px;
    }
    .card.active{
        height: 430px;
    }
    .nr1{
        width: 100%;
        font-size: 10px;
        position: relative;
        right: 0;
        margin-top: 4%;
        padding-left: 20px;
    }
    .imgbox{
        width: 40%;
        height: 130px;
        left: 10px;
    }
    .imgbox img{
        width: 100%;
        height: 100%;
    }
    #rankingsTable td{
        font-size: 15px;
    }
    /* #rankingsTable tr:nth-child(2) td:first-child{
        background:linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
        color: black;
        font-weight:bolder;
    } */

    /*MORE.HTML ************************/
    .moreCard-container{
        display: none;
    }
    .settingTitle{
        padding-left: 10px;
        top: 25%;
        position: relative;
        font-size: 10px;
        width: 100%;
        /* border-bottom: 1px solid black; */
        text-decoration: underline;
    }
    .moreCard{
        margin: 10px auto;
        height: 50px;
        position: relative;
        border-radius: 10px;
        box-shadow: 0px 5px 20px rgba(0, 0, 0, .5);
        transition: .3s;
        background-color: var(--primary-2-color);
        cursor: pointer;
        color: var(--primary-text-color);
    }
    .moreCard.active{
        height: 300px;
    }
    .moreCard.active .settingTitle{
        top: 15px;
    }
    .moreCard.active > .content{
        opacity: 1;
        transform: translateY(-15px);
    }
    .moreCard > .content{
        margin-top: 70px;
    }
    .moreCard + .browserMoreCard .settingTitle{
        padding-left: 0px;
    }
    .moreCard + .browserMoreCard, .browserMoreCard + #ticketForm{
        width: 100%;
    }
    body div{
        transition: transform .8s ease;
    }
    .bloc-icon .material-symbols-outlined{
        width: 100%;
        font-size: 30px;
        color: var(--primary-text-color);
        font-variation-settings:
            'opsz' 50
    }
    .fa-sun-o{
        color: whitesmoke;
    }
    .fa-moon-o{
        color: whitesmoke;
    }
    [data-theme="light"] .fa-sun-o, [data-theme="light"] .fa-moon-o{
        color: #000;
    }
}