body{
    display:flex;
    margin:0;
    height:100vh;
    background-color:black;
    font-family:Arial, Helvetica, sans-serif;
}
::selection{
    background-color: rgba(251, 255, 0, 0.893);
    color: black;
}
.sidebarh1{
    text-shadow: 0px 0px 7px rgba(255,215,0,1);
}
.sidebar{
    width: 20vw;
   
    border-right:2px solid grey;
    background-color:rgb(0,0,5);
    color:rgb(206, 206, 206);
    height: 100vh;
    overflow-y: scroll;
    scrollbar-width: none;
    justify-content: space-between;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    
    padding:20px 0;
    box-sizing:border-box;
}
.sidebaratags{
    display:grid;
    margin-left: 5%;
}
.sidebaratags a{
    /* margin-top:6%; */
    color:rgb(255, 255, 255);
    text-decoration:none;
    transition:.4s;
    margin-top: 12px;
    font-size: 110%;
    line-height: 150%;

}
.sidebaratags a:hover{
    color:gold;
    border-bottom: 1.5px solid ;
    border-radius: 7px;
    border-left: 3px solid gold;
    padding: 3%;
    box-shadow: 0px 1px 15px -1px rgba(110,110,110,0.75);
-webkit-box-shadow: 0px 1px 15px -1px rgba(110,110,110,0.75);
-moz-box-shadow: 0px 1px 15px -1px rgba(110,110,110,0.75);
}
.contact{
    color:rgb(255, 255, 255);
    text-decoration:none;
    font-size:1.2rem;
    transition:.3s;
    
}
.contact:hover{
    color:gold;
    border-bottom: 1px solid gold;
    border-radius: 7px;
    padding: 2%;
}

/* =========================
   MAIN CONTENT
========================= */

.div2{
    flex:1;
    background-color:rgb(10,12,19);
    
    float: right;
    width: 80vw ;
    overflow-y:auto;
}
/* =========================
   HERO IMAGE
========================= */

.img-wrapper{
    position:relative;
    width:100%;
    height:70vh;

    overflow:hidden;
}
.div2img{
    width:100%;
    height:70vh;
    object-fit:cover;
    display:block;
}

.img-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.85) 0%,
            rgba(0,0,0,.2) 25%,
            rgba(0,0,0,.2) 75%,
            rgba(0,0,0,.85) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(0,0,0,.75) 0%,
            rgba(0,0,0,0) 20%,
            rgba(0,0,0,0) 70%,
            rgba(0,0,0,.9) 100%
        );

    pointer-events:none;
}

/* =========================
   HERO TEXT
========================= */

.image-title{
    position:absolute;
    top:8%;
    left:50px;

    z-index:2;
    color:white;

    max-width:600px;
}

.image-title h1{
    font-weight:300;
    font-size:3.5rem;
    line-height:1.1;
    margin:0;
}

.image-title p{
    max-width:60%;
}

.randommystery{
    display:inline-block;
    background-color: transparent;
    border:1px solid rgb(255, 215, 0);
    color:white;
    text-decoration:none;

    padding:12px 20px;
    border-radius:10px;

    transition:.2s;
}

.randommystery:hover{
    background:rgba(255,215,0,.1) !important;
    animation: pulse-glow 2s infinite;
}


.randommysterypopup{
    
    width: 29%;
    height: 83%;
    border-radius: 8px;
    margin-right: 20%;
    position: relative; 
    float: right; 
    margin-top: 3%;
    background-color: #0A0C13;
    box-shadow: -1px 1px 11px 0px rgb(255, 215, 0) ;
    -webkit-box-shadow: -1px 1px 11px 0px rgb(255, 215, 0);
    -moz-box-shadow: -1px 1px 11px 0px gold;
    color: white;
    opacity: 130%;
    padding: 1%;
    visibility: hidden;
    opacity: 90%;
    z-index: 2; /* Keeps popup above hero layer so entire links remain clickable */
    
    

    
}



#card-h-100{
    background-color: rgb(1, 1, 1);
    transition: 0.4s;
    border: 1px solid gold;
    color: white;
    /* height: 79vh !important; */
    /* height: 475px !important; */
    aspect-ratio: 1/1.5;
    height: clamp(500px, 76vh,1000px);
    box-shadow: -1px 1px 11px 0px rgb(255, 215, 0) ;
-webkit-box-shadow: -1px 1px 11px 0px rgb(255, 215, 0);
-moz-box-shadow: -1px 1px 11px 0px rgb(255, 215, 0);


}
#card-h-100 img{
    height: 50% !important;
}
#card-h-100:hover{
box-shadow: 3px 3px 36px 7px rgba(0,0,0,0.9);
-webkit-box-shadow: 3px 3px 36px 7px rgba(0,0,0,0.9);
-moz-box-shadow: 3px 3px 36px 7px rgba(0,0,0,0.9);
transition: .2s;
border-bottom: 2px solid gold;
border-left: 4px solid gold;
border-top: black;
border-right: black;
}
.achievements{
    color: white;
    background-color: rgb(0,0,5);
    border-radius: 7px;
    border-left: 3px solid gold;
    border-bottom: 1px solid gold;
    box-shadow: 0px 1px 15px -1px rgba(110,110,110,0.75);
-webkit-box-shadow: 0px 1px 15px -1px rgba(110,110,110,0.75);
-moz-box-shadow: 0px 1px 15px -1px rgba(110,110,110,0.75);
    padding: 4%;
    display: flex;
    margin-left: 3%;
    margin-right: 3%;
    
}

.achievementsrightdiv{
    margin-right: 2% !important;
    
    padding-left: 2%;
    border-left: 1px solid gold;
}
.achievements-right{
    color: white;
    background-color: rgb(0,0,5);
    border-radius: 7px;
    border-left: 3px solid gold;
    border-bottom: 1px solid gold;
    box-shadow: 0px 1px 15px -1px rgba(110,110,110,0.75);
-webkit-box-shadow: 0px 1px 15px -1px rgba(110,110,110,0.75);
-moz-box-shadow: 0px 1px 15px -1px rgba(110,110,110,0.75);
    padding: 4%;
    display: flex;
    margin-left: 3%;
    margin-right: 3%;
}
.achievementsrightdiv-right{
    margin-right: -2% !important;
    margin-left: 2%;
    padding-left: 2%;
    border-left: 1px solid gold;
}
@keyframes pulse-glow {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(227, 193, 0, 0.829);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 1.9vh rgba(52, 152, 219, 0);
  }
  100% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
  }
}

.exploremystery:hover {
  transition: 0.4s;
  background:rgba(255,215,0,.1);
  animation: pulse-glow 2s infinite;
}


.sidebar-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin:20px 0;
}

.sidebar-divider span{
    width:80px;
    height:1px;
    background:rgb(211, 179, 1);
}

.diamond{
    width:10px;
    height:10px;
    background:rgb(211, 179, 1);
    transform:rotate(45deg);
}
.explorecategories{
    border: 2px solid gold;
    border-radius: 50% !important;
    padding: 2%;
    color: white;
    visibility: hidden;
    
    height: 20px;
    width: 20px;
    text-decoration: none;
    box-shadow: 4px 3px 12px 0px rgba(255,215,0,0.69);
-webkit-box-shadow: 4px 3px 12px 0px rgba(255,215,0,0.69);
-moz-box-shadow: 4px 3px 12px 0px rgba(255,215,0,0.69);
    margin-left: 34vw;
    
}
.about{
    border-radius: 7px;
    padding: 2%;
    color:rgb(255, 255, 255);
    text-decoration:none;
    font-size:1.2rem;
    
    transition:.3s;
}
.about:hover{
    border-bottom: 1px solid gold;
    color: gold;
}
.about i{
    color: white !important;
}
.carouselbutton{
    background-color: transparent;
    color: white;
    border: none;
    font-size: 160%;
    padding: 2%;
    transition: 0.2s;
}
.carouselbutton:hover{
    color: rgb(0, 255, 38);
    transition: 0.2s;
    animation: pulse-glow 0.2s infinite;
    text-shadow: 4px 4px 2px rgba(0,255,240,0.6);
}
.quote{
    background-color: rgb(0,0,5);
    border: 0.2vw solid gold;
    border-radius: 10px;
    padding: 1%;
    margin: auto;
    align-items: center;
    width: fit-content;
    margin-left: 2%;
    margin-right: 2%;
}
.quote span{
    font-family: baskervilleoldface;
}
#version{
    opacity: 100% !important;
    color: rgb(222, 222, 222);
    font-size: max(24px, calc(1.6667vw - 1px));
    text-decoration: underline;
    cursor: pointer;
    transition: 0.4s;
}
#version:hover{
    color: gold;
    border-bottom: 2px solid gold;
    border-radius: 7px;
    padding: 5%;
    transition: 0.4s;
    padding-left: 7%;
    padding-right: 7%;
}
/* =========================
   LARGE SCREEN ADJUSTMENTS
========================= */
/* 1920 */
@media (min-width:1600px){

    .sidebaratags a{
        font-size:185%;
    }
    .heroimagehr{
        width: 80% !important;
    }
    .contact{
        font-size:1.9rem;
    }
    .about{
        font-size: 1.9rem;
    }
    .image-title h1{
        font-size:590% !important;
    }

    .image-title p{
        font-size:1.4rem;
    }

    .randommystery{
    display:inline-block;
    
    border:2px solid rgb(255, 215, 0);
    color:white;
    text-decoration:none;
    width: 44%;
    padding:16px 22px;
    border-radius:10px;
    
    transition:.2s;
    }
    
.randommysterypopup{
    
    width: 29%;
    height: 80%;
    border-radius: 8px;
    margin-right: 20%;
}
#randommysterypopupatag{
    font-size: 140%;
}
#randommysterypopupptag{
    font-size: 150%;
}

    .sidebar h3{
        font-size:240%;
    }
    .mainimage{
        width: 93% !important;
        
    }
    .achievements h2{
        font-size: 2.5vw !important;
        margin-top: 1%;
    }
    .achievementsrightdiv{
        float: right !important;
        width: 67%;
    }
    .achievementsrightdiv div{
        border-left: 4px solid gold !important;
        opacity: 100% !important;
        border-radius: 9px !important;
    }
    .achievements p{
        font-size: 1.5vw !important;
        
    }
    .achievements a{
        font-size: 1.2vw !important;
        border: 2px solid gold !important;
        border-radius: 8px !important;
    }
    .achievementsrightdiv-right h2{
        font-size: 2.5vw !important;
        margin-top: 1%;
    }
    .achievements-right p{
        font-size: 1.5vw !important;
    }
    .achievements-right div div{
        border-left: 4px solid gold !important;
        opacity: 100% !important;
        border-radius: 9px !important;
    }
    .achievements-right a{
        font-size: 1.2vw !important;
        border: 2px solid gold !important;
        border-radius: 8px !important;
    }
    /* #card-h-100{
        height: 560px !important;
    } */
    .card-title{
        font-size: 1.8rem;

    }
    .card-text{
        font-size: 1.2rem;
    }
    #card-h-100 a{
        font-size: 1.25rem;
    }
    /* .carousel-control-next{
        margin-top: 53% !important;
    }
    .carousel-control-prev{
        margin-top: 53% !important;
        
    } */
}



@media (min-width:2496px){

    .sidebaratags a{
        font-size:265%;
    }
    .contact{
        font-size:2.5rem;
    }
    .about{
        font-size: 2.5rem;
    }
    .sidebar h3{
        font-size:350%;
    }
    .sidebar p{
        font-size: 200%;
    }
    .sidebar-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin:20px 0;
    }

.sidebar-divider span{
    width:180px;
    height:4px;
    background:rgb(211, 179, 1);
}   
    .heroimagehr{
        width: 80% !important;
    }
    .image-title h1{
        font-size:800% !important;
    }
    .image-title p{
        font-size:1.8rem !important;
    }
    .featuredmysteries{
        font-size: 305% !important;
    }
    #totalmysteries{
        font-size: 200% !important;
    }

    .randommystery{
    display:inline-block;

    border:2px solid rgb(255, 215, 0);
    color:white;
    text-decoration:none;
    width: 68%;
    padding:20px 26px;
    border-radius:10px;
    font-size: 180%;
    transition:.2s;
    }
    .randommysterypopup{
    border-radius: 25px !important;
    width: 31%;
    height: 78%;
    border-radius: 8px;
    margin-right: 20%;
}
#randommysterypopupatag{
    font-size: 160%;
}
#randommysterypopupptag{
    font-size: 200%;
}
    
    .container.mt-4{
        margin-left: 4% !important;
        margin-top: 3% !important;
        
    }
    .row.g-3{
        width:140% !important;
        justify-content: space-evenly !important;
    }
    
    
    .container.mt-4 h5{
        font-size: 234% !important;
    }
    .container.mt-4 p{
        font-size: 205% !important;
    }
    /* #card-h-100{
        border-radius: 20px !important;
        height: 54vh !important;
    } */
    .exploremystery{
        width: 50% !important;
        border: 3px solid gold !important;
        border-radius: 15px !important;
        font-size: 160% !important;
        transition: 0.4s !important;
    }
    
    .mainimage{
        width: 93% !important;
        
    }
    .achievements h2{
        font-size: 2.7vw !important;
        margin-top: 1%;
    }
    .achievementsrightdiv{
        float: right !important;
        width: 54%;
    }
    .achievementsrightdiv div{
        border-left: 4px solid gold !important;
        opacity: 100% !important;
        border-radius: 9px !important;
    }
    .achievements p{
        font-size: 1.5vw !important;
        
    }
    .achievements a{
        font-size: 1.5vw !important;
        border: 2px solid gold !important;
        border-radius: 13px !important;
        width: fit-content !important;
    }
    .achievementsrightdiv-right h2{
        font-size: 2.7vw !important;
        margin-top: 1%;
    }
    .achievements-right p{
        font-size: 1.5vw !important;
    }
    .achievements-right div div{
        border-left: 4px solid gold !important;
        opacity: 100% !important;
        border-radius: 9px !important;
    }
    .achievements-right div{
        width: 50% !important;
    }
    .achievements-right a{
        font-size: 1.5vw !important;
        border: 2px solid gold !important;
        border-radius: 13px !important;
        width: fit-content !important;
    }
    .achievements{
        border-left: 7px solid gold !important;
        border-radius: 18px;
    }
    .achievements-right{
        border-left: 7px solid gold !important;
        border-radius: 18px;
    }
    .carousel-control-next{
        margin-top:51% !important;
        
    }
    .carousel-control-prev{
        margin-top: 51% !important;
    }
}





@media (min-width:3840px){

    .sidebaratags a{
        font-size:310%;
    }
    .contact{
        font-size:3.1rem;
    }
    .about{
        font-size: 3.1rem;
    }
    .sidebar h3{
        font-size:480%;
    }
    .sidebar p{
        font-size: 280%;
    }
    .sidebar-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin:20px 0;
    }

.sidebar-divider span{
    width:260px;
    height:4px;
    background:rgb(211, 179, 1);
}   
    .heroimagehr{
        width: 100% !important;
    }
    .image-title{
        max-width: 1300px;
    }
    .image-title h1{
        font-size:1360% !important;
    }
    .image-title p{
        font-size:2.8rem !important;
    }
    

    .randommystery{
    display:inline-block;

    border:2px solid rgb(255, 215, 0);
    color:white;
    text-decoration:none;
    width: 58%;
    font-size: 330% !important;
    padding:20px 26px;
    border-radius:18px;
    margin-top: 2%;
    font-size: 180%;
    transition:.2s;
    }

    .randommysterypopup{
    border-radius: 25px !important;
    width: 30%;
    height: 79%;
    border-radius: 8px;
    margin-right: 20%;
}
#randommysterypopupatag{
    font-size: 290%;
}
#randommysterypopupptag{
    font-size: 280%;
}
    .featuredmysteries{
        font-size: 400% !important;
    }
    #totalmysteries{
        font-size: 290% !important;
    }
    
    .container.mt-4{
        margin-left: 7% !important;
        
        /* margin: auto !important; */
        margin-top: 3% !important;
        
    }
    .row.g-3{
        width:200% !important;
        
    }
    .container.mt-4 h5{
        font-size: 330% !important;
    }
    .container.mt-4 p{
        font-size: 270% !important;
    }
    #card-h-100{
        border-radius: 20px !important;
        /* height: 1270px !important; */
        overflow: hidden;
    }
    .exploremystery{
        width: 45% !important;
        border: 4px solid gold !important;
        border-radius: 17px !important;
        font-size: 200% !important;
    }
    
    .achievementsrightdiv{
        float: right !important;
        margin-left: 2% !important;
        border-left: 4px solid gold !important;
    }
    .achievements{
        border-left: 7px solid gold !important;
        border-radius: 18px;
    }
    .achievements-right{
        border-left: 7px solid gold !important;
        border-radius: 18px;
    }
}




@media (min-width:4200px){

    .sidebaratags a{
        font-size:355%;
        
    }
    .contact{
        font-size:3.4rem;
        
    }
    .about{
        font-size: 3.4rem;
    }
    .sidebar h3{
        font-size:580%;
    }
    .sidebar p{
        font-size: 300%;
        margin-top: -90% !important;
    }
    .sidebar-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin:20px 0;
    }

.sidebar-divider span{
    width:268px;
    height:4px;
    background:rgb(211, 179, 1);
}   
    .heroimagehr{
        width: 99% !important;
    }
    .image-title{
        max-width: 1500px;
    }
    .image-title h1{
        font-size:1660% !important;
    }
    .image-title p{
        font-size:3rem !important;
    }
    

    .randommystery{
    display:inline-block;

    border:3px solid rgb(255, 215, 0);
    color:white;
    text-decoration:none;
    width: 56%;
    font-size: 355% !important;
    padding:20px 26px;
    padding: 3%;
    border-radius:18px;
    margin-top: 2%;
    font-size: 180%;
    transition:.2s;
    }
    .randommysterypopup{
    border-radius: 25px !important;
    width: 32%;
    height: 79%;
    border-radius: 8px;
    margin-right: 20%;
}
#randommysterypopupatag{
    font-size: 330%;
}
#randommysterypopupptag{
    font-size: 355%;
}
    .featuredmysteries{
        font-size: 440% !important;
    }
    #totalmysteries{
        font-size: 310% !important;
    }
    
    .container.mt-4{
        margin-left: 5% !important;
        margin-top: 3% !important;
        
    }
    .row.g-3{
        width:240% !important;
        
    }

    .container.mt-4 h5{
        font-size: 430% !important;
    }
    .container.mt-4 p{
        font-size: 330% !important;
    }
    #card-h-100{
        border-radius: 30px !important;
        /* height: 1600px !important; */
        border-left: 11px solid gold !important;
        border-bottom: 6px solid gold !important;
    }
    #card-h-100 img{
        border-top-left-radius: 30px;
        border-top-right-radius:30px ;
    }
    .exploremystery{
        width: 53% !important;
        border: 3px solid gold !important;
        border-radius: 15px !important;
        font-size: 300% !important;
        margin-right: 3% !important;
        margin-top: 3% !important;
    }
    .achievements{
        border-left: 10px solid gold !important;
        border-radius: 30px;
    }
    .achievements-right{
        border-left: 10px solid gold !important;
        border-radius: 30px;
    }
    .achievements a{
        border: 5px solid gold !important;
        border-radius: 25px !important;
    }
    .achievements-right a{
        border: 5px solid gold !important;
        border-radius: 25px !important;
    }
}


@media (min-width:4900px){

    .sidebaratags a{
        font-size:365%;
        
    }
    .contact{
        font-size:3.8rem;
        
    }
    .about{
        font-size: 3.8rem;
    }
    .sidebar h3{
        font-size:610%;
    }
    .sidebar p{
        font-size: 330%;
        margin-top: -40% !important;
        
    }
    .sidebar-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin:20px 0;
    }

.sidebar-divider span{
    width:268px;
    height:4px;
    background:rgb(211, 179, 1);
}   
    .heroimagehr{
        width: 99% !important;
    }
    .image-title{
        max-width: 1500px;
    }
    .image-title h1{
        font-size:1660% !important;
    }
    .image-title p{
        font-size:3rem !important;
    }
    

    .randommystery{
    display:inline-block;

    border:3px solid rgb(255, 215, 0);
    color:white;
    text-decoration:none;
    width: 56%;
    font-size: 355% !important;
    padding:20px 26px;
    padding: 3%;
    border-radius:18px;
    margin-top: 2%;
    font-size: 180%;
    transition:.2s;
    }
    .randommysterypopup{
    border-radius: 25px !important;
    width: 32%;
    height: 79%;
    border-radius: 8px;
    margin-right: 20%;
}
#randommysterypopupatag{
    font-size: 340%;
}
#randommysterypopupptag{
    font-size: 390%;
}
    .featuredmysteries{
        font-size: 450% !important;
    }
    #totalmysteries{
        font-size: 330% !important;
    }
    
    .container.mt-4{
        margin-left: 7% !important;
        margin-top: 3% !important;
        
    }
    .row.g-3{
        width:250% !important;
        
    }
    
    .container.mt-4 h5{
        font-size: 470% !important;
    }
    .container.mt-4 p{
        font-size: 350% !important;
    }
    #card-h-100{
        border-radius: 20px !important;
        /* height: 1800px !important; */
    }
    .exploremystery{
        width: 53% !important;
        border: 4px solid gold !important;
        border-radius: 19px !important;
        font-size: 330% !important;
        margin-right: 3% !important;
        margin-top: 3% !important;
    }
    
}
@media (max-width:490px){
    body{
        height: auto;
        /* width: 100vw; */
        display: grid !important;
        overflow-x: hidden;
    }

    .div2{
    flex:1;
    background-color:rgb(10,12,19);
    order: 1;
    
    width: 100vw !important ;
    
}
/* =========================
   HERO IMAGE
========================= */

.img-wrapper{
    position:relative;
    width:100%;
    height:70vh;

    overflow:hidden;
}
.div2img{
    width:100%;
    height:70vh;
    object-fit:cover;
    display:block;
}

.img-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.85) 0%,
            rgba(0,0,0,.2) 25%,
            rgba(0,0,0,.2) 75%,
            rgba(0,0,0,.85) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(0,0,0,.75) 0%,
            rgba(0,0,0,0) 20%,
            rgba(0,0,0,0) 70%,
            rgba(0,0,0,.9) 100%
        );

    pointer-events:none;
}

/* =========================
   HERO TEXT
========================= */

.image-title{
    position:absolute;
    top:8%;
    left:50px;

    z-index:2;
    color:white;

    max-width:600px;
}

.image-title h1{
    font-weight:300;
    font-size:3.5rem;
    line-height:1.1;
    margin:0;
}

.image-title p{
    max-width:60%;
}

.randommystery{
    display:inline-block;

    border:2px solid rgb(255, 215, 0);
    color:white;
    text-decoration:none;
    font-size: 120%;
    padding:12px 20px;
    border-radius:10px;

    transition:.2s;
}
.randommysterypopup{
    border-radius: 8px !important;
    width:49%;
    height: 49%;
    border-radius: 8px;
    margin-right: 20%;
    z-index: 2;
    margin-top: 13% !important;
}
#randommysterypopupatag{
    font-size: 70%;
}
#randommysterypopupptag{
    font-size: 75%;
}
.randommystery:hover{
    background:rgba(255,215,0,.1);
}
    .sidebarh1{
    text-shadow: 0px 0px 7px rgba(255,215,0,1);
}
.sidebar{
    order: 2;
    width: 100vw !important;
    border-right:2px solid grey;
    background-color:rgb(0,0,5);
    color:rgb(206, 206, 206);
    justify-content: space-between;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height: 100% !important;
    padding:20px 0;
    box-sizing:border-box;
}
.sidebaratags{
    display:grid;
    margin-left: 5%;
}
.sidebaratags a{
    
    color:rgb(255, 255, 255);
    text-decoration:none;
    transition:.4s;
    margin-top: 12px;
    font-size: 110%;
    line-height: 150%;

}

.contact{
    color:rgb(255, 255, 255);
    text-decoration:none;
    font-size:1.2rem;
    transition:.3s;
    
}
    .about{
        font-size: 1.2rem;
    }
    #card-h-100{
        width: 93% !important;
    }
    .explorecategories{
        visibility: visible;
    }
    .achievements{
        display: grid !important;
    }
    .achievements-right{
        display: grid !important;
    }
    .achievements-right .mainimage{
        margin-top: 4%;
    }
}


@media (min-width:800px) and (max-width:1200px){
    body{
        height: auto;
        width: 100vw !important;
        display: grid !important;
        
        
    }
    #version{
        font-size: 36px;
    }

    .div2{
    /* flex:1;
    background-color:rgb(10,12,19);
    order: 1 !important;
    margin-left: 0% !important;
    padding-top: 6%;
    
    overflow-y: auto !important;
    scrollbar-width: none;
    width: 100vw !important ;
    height: 100vh; */
    
    flex:1;
    background-color:rgb(10,12,19);
    order: 1 !important;
    margin-left: 0% !important;
    padding-top: 6%;
    
    overflow-y: auto !important;
    scrollbar-width: none;
    width: 100vw !important ;
    height: auto;
    }
    

    .sidebarh1{
    text-shadow: 0px 0px 7px rgba(255,215,0,1);
}

.sidebar{
    order: 2 !important;
    width: 100vw !important;
    border-right:2px solid grey;
    background-color:rgb(0,0,5);
    color:rgb(206, 206, 206);
    justify-content: space-between;
    border-top: 2px dotted gold;
    position: relative;
    justify-content:space-between;
    height: auto !important;
    padding:20px 0;
    box-sizing:border-box;
    overflow-y: auto;
    padding-bottom: 5% !important;
}


    .sidebaratags{
    display:grid;
    margin-left: 5%;
 }
.sidebar h3{
    font-size: 430% !important;
}
.sidebar p{
    font-size: 240% !important;
}
.sidebar-divider span{
    width: 40% !important;
}
.sidebaratags a{
    
    color:rgb(255, 255, 255);
    text-decoration:none;
    transition:.4s;
    margin-top: 12px;
    font-size: 250%;
    line-height: 150%;

}

.contact{
    color:rgb(255, 255, 255);
    text-decoration:none;
    font-size:2.1rem;
    transition:.3s;
    
}   
    
    #card-h-100{
        width: 219% !important;
        margin-top:5%;
        margin-left: 70%;
        height: fit-content !important;
        
    }
    .row.g-3{
        width:90%;
        gap: 35%;
        
        
        
    }
    .about{
        font-size: 2.1rem;
        
    }
    
    #card-h-100 h5{
        font-size: 184%;
    }
    #card-h-100 p{
        font-size: 150%;
    }
    
    
    .sidebar img{
        width: 48% !important;
        margin-top: 5%;
    }
    .explorecategories{
        visibility: visible;
    }
    #card-h-100 a{
        font-size: 141%;
        border-radius: 10px !important;
        border: 2.3px solid gold !important;
    }
    .achievements h2{
        font-size: 230%;
    }
    .achievementsrightdiv-right h2{
        font-size: 210%;
    }
    .achievements p{
        font-size: 130%;
    }
    .achievements-right p{
        font-size: 130% !important;
    }
    .achievementsrightdiv div p{
        font-size: 146%;
    }
    .achievements-right div p{
        font-size: 146%;
    }
    .achievements a{
        font-size: 141%;
        border: 2px solid gold !important;
        border-radius: 10px !important;
    }
    .achievements-right a{
        font-size: 141%;
        border: 2px solid gold !important;
        border-radius: 10px !important;
        
    }
    .image-title p{
        font-size: 160% !important;
       
    }.image-title h1{
        font-size:640% !important ;
    }
    .randommystery{
        font-size: 190%;
        border-radius: 15px;
        border: 3px solid gold;
    }
    .explorecategories{
        font-size: 130%;
        border-radius: 12px;
    }
    .featuredmysteries{
        font-size: 250%;
    }
    #totalmysteries{
        font-size: 190%;
    }
    .randommysterypopup{
        width: 46%;
        height: 60%;
    }
    #randommysterypopupatag{
        font-size: 150%;
    }
    #randommysterypopupptag{
        font-size: 150%;
    }
}