:root {
    /* OLD->   --primary-color: #d4ff00;  fix me fffffftestinggit
*/
    --text-color: #000;
    --background-color: #000;
    --primary-color: #7fff00;
    --primary-color-hover: rgba(191, 255, 0, .7);
    --primary-color-card-hover: rgba(291, 255, 200, .1);
    --secondary-color: #262727;
    --accent-color: #97a7b3;
    --primary-color-dark: rgba(24, 30, 0, 1);
    --join-now-hover: #6bdd00;
    /* --text-color: #fff;
    --background-color: #fff !important; 
    --primary-color: rgb(221, 6, 109);
    --primary-color-hover: rgba(221, 6, 109, .7);
    --secondary-color: #222;
    --accent-color: #b6bae8;
    --primary-color-dark: rgba(221, 6, 109, .13);*/
    /* --text-color: #fff;
    --background-color: #120606;
    --primary-color: #e00000;
    --primary-color-hover: #c50606;
    --secondary-color: #991515;
    --accent-color: #f23b3b;*/
}

* {
    margin: 0;
    padding: 0;
    outline: none;
}

html {
    font-size: 14px;
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #010101 !important;
    color: white;
}

.site-logo {
    height: 30px;
    width: 200px;
    margin-left: 10px;
    margin-top: 10px;
    padding: 0;
}

.main-text {
    margin-top: 250px;
}


@media(max-width: 1024px){
    .sub-link-item{
        margin: 0 !important;
        margin-right: 4px !important;
    }
    
}

@media(max-width: 800px){
    .lik-box{
        padding: 10px 5px !important;
    }

}
@media(max-width: 769px){
    
    .right-lnk {
        display: none;
    }
    .join-now {
       
    }
    .lik-box{
        padding-left: 0 !important;
    }
    .sub-link-item {
        font-size: large !important;
    }
}

@media(max-width: 735px){
    .lik-box a{
        font-size: medium !important;
    }
}

@media(max-width: 693px){
    .lik-box a {
        font-size: small !important;
    }
}
@media(max-width: 1000px){
    .lik-box a {
        font-size: x-small !important;
    }
    .custom-search{
        display: none;

    }
    .search{
        display: none;
    }
}
@media(max-width: 585px){
    .lik-box a {
        font-size: xx-small !important;
        padding-right: 0 !important;
        margin-right: 3px !important;
        padding-top: 15px;
        
    }
  

}

 
@media(min-width: 505px){
    .hamburger{
        margin-top: 8px;
        margin-right: 5px;
    }
}
@media (max-width: 506px) {
    .sub-link-item {
        font-size: x-small !important;
        padding: 17px 4px !important;
    }
    .site-name-logo{
        font-size: 30px !important;        
    }
    .join-now{
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 10px;
    }
    #login-button{
        margin: 0 !important;
        padding-left: 0 !important;
        margin-top: 3px !important;
        margin-right: -10px !important;
        font-size: large;
    }
    li .nav-item{
        margin:0 ;
    }               
}
@media(max-width: 461px){
    .login {
        display: none;
    }
}

@media(max-width: 430px){
   
    .username-txt, .welcum{
        font-size: small !important;
        padding: 0 ;
        margin: 0;
    }
     
    .login-modal-main {
        max-width: 78% !important;
        height: 320px !important;
    }
 
    .username-txt {
        font-size: 9px;
        font-weight: 400;
         
    }
  
    .diamond{
        display: none;
    }

}
@media (max-width: 376px) {
    .right-lnk {
        display: none;
    }
    .sub-link-item {
        font-size: xx-small !important;
        padding: 17px 4px !important;
    }
 
    .login{
          font-size: smaller;
    }
    .site-name-logo {
         margin-right: -10px;
    }
    .pagination a{
        margin: 0 !important;
        max-width: 80vw;
    }
    .site-name-logo {
        font-size: 28px !important;         
     }    
    
}

@media(max-width: 357px){
    .lik-box a {
        font-size: x-small !important;
                
    }
    .top-editors{
        display: none;
    }
    .username-txt{
        font-size: 10px !important;
        margin-left: -10px !important;
    }
}
@media(max-width: 347px)
{
    .dropdown-content{
        transform: scale(.8) !important;
        margin-top: -24px !important;
        margin-left: -80px !important;
    }
    .username-txt{
        font-size: xx-small !important;
        letter-spacing: -.03rem;
    }
}
@media (max-width: 330px) {
        .right-lnk {
            display: none;
        }

        .sub-link-item {
           font-size: xx-small !important;
           padding: 10px 1px !important;

        }

 }

     

@media(max-width: 430px) {
     
    .nav-item{
        padding: 0 !important;
        margin: 0 !important;
    }
    .dropdown-content{
        margin-left: -100px !important;
    }
}

@media(max-width: 392px) {
    .sub-link-item {
        margin: 0 !important;
        padding: 15px 0 !important;
    }
}

@media(max-width: 357px) {

    .sub-link-item {
        margin: 0 !important;
        padding: 14px 5px !important;
    }

    .lik-box F {
        display: none;
    }
}

@media (max-width: 767px) {
    .lik-box

{
    margin: 0 !important;
    padding: 0 !important;
}

.page-title {
    font-size: 22px !important;
}

}

.o-icon-svgD {
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100%;
}

.o-iconD {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    fill: grey;
    width: 24px;
    height: 24px;
    margin-top: 1px;
}

   /*ScrollBar*/
/* width */
::-webkit-scrollbar {
    width:9px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 20px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #333;
    }


 
.streak-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999999999;
    animation: fadeIn 0.3s ease-out;

}

.streak-box {
    background: #1a1a1a;
    border: 2px solid #aeff00;
    border-radius: 16px;
    padding: 30px 40px;
    text-align: center;
    box-shadow: 0 0 25px #aeff00aa;
    animation: popUp 0.5s ease-out;
    max-width: 400px;
}

.streak-emoji {
    font-size: 3.5rem;
    animation: flicker 1s infinite alternate;
}

.streak-title {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    text-shadow: 0 0 10px #ff6600aa;
}

.streak-desc {
    font-size: 1rem;
    color: #ccc;
    margin-bottom: 20px;
}

.close-btn-streak {
    background: #aeff00;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 1rem;
    color: #111; 
    cursor: pointer;
    transition: background 0.3s ease;
}

    .close-btn-streak:hover {
        background: #c6ff4d;
    }

@keyframes flicker {
    0% {
        text-shadow: 0 0 8px #ff6600aa;
    }

    100% {
        text-shadow: 0 0 16px #ffaa00;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popUp {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}