/* ===========================
   Crime Scene Buttons
=========================== */

#crime-buttons {

    position: fixed;

    top: 10px;
    left: 50%;

    transform: translateX(-50%);

    z-index:9999;

    display:flex;

    gap:10px;

}


#crime-buttons button {

    padding:8px 18px;

    font-size:14px;

    color:white;

    background:rgba(0,0,0,0.45);

    border:2px solid white;

    border-radius:6px;

    cursor:pointer;

    transition:0.2s;

}


#crime-buttons button:hover {

    background:white;

    color:black;

}


#crime-buttons button:active {

    transform:scale(0.95);

}




/* ===========================
   Image Viewer
=========================== */


#imageViewer {

    position:fixed;

    top:0;

    left:0;

    width:100vw;

    height:100vh;


    background:rgba(0,0,0,0.85);


    display:none;

    justify-content:center;

    align-items:center;


    z-index:11111;

}



#imageContainer {

    display:flex;

    flex-direction:column;

    align-items:center;

}



/* ===========================
   Image Title
=========================== */


#imageTitle {

    color:white;

    font-size:24px;

    margin-bottom:15px;

    margin-left:5%;

    margin-right:5%;


    font-family:Arial,sans-serif;


    text-shadow:0 0 10px black;

}



/* Evidence title */

.evidenceTitle {

    color:#ff4444 !important;

    font-size:30px !important;

    font-weight:bold;

    text-transform:uppercase;

    letter-spacing:2px;

}



/* Normal title */

.normalTitle {

    color:white;

    font-size:24px;

}




/* ===========================
   Main Image
=========================== */


#fullImage {

    max-width:90vw;

    max-height:80vh;


    object-fit:contain;


    border:8px solid white;

    border-radius:12px;


    background:white;


    box-shadow:

    0 0 30px rgba(255,255,255,0.5);

}




/* ===========================
   Image Navigation Arrows
=========================== */


#prevImage,
#nextImage {


    display:none;


    position:absolute;


    top:50%;


    transform:translateY(-50%);


    width:60px;

    height:60px;


    font-size:40px;


    color:white;


    background:rgba(0,0,0,0.5);


    border:2px solid white;


    border-radius:50%;


    cursor:pointer;

}



#prevImage {

    left:30px;

}



#nextImage {

    right:30px;

}



#prevImage:hover,
#nextImage:hover {

    background:white;

    color:black;

}





/* ===========================
   Close Button
=========================== */


#closeButton {

    position:absolute;


    top:20px;

    right:20px;


    width:50px;

    height:50px;


    font-size:30px;


    background:red;

    color:white;


    border:none;

    border-radius:50%;

}




/* ===========================
   Mobile
=========================== */


.mobile-icon {

    display:none;

}




@media (max-width:600px) {


    /* Crime buttons become icons */

    #crime-buttons button {

        width:45px;

        height:45px;


        padding:0;


        font-size:22px;


        text-align:center;

    }


    .desktop-text {

        display:none;

    }


    .mobile-icon {

        display:block;

    }



    /* Titles */

    .evidenceTitle {

        font-size:14px !important;

    }


    .normalTitle {

        font-size:8px !important;

    }



    /* Image */

    #fullImage {

        max-width:95vw;

        max-height:75vh;


        border-width:5px;

    }



    /* Close button */

    #closeButton {

        width:45px;

        height:45px;


        font-size:25px;

    }



    /* Arrows */

    #prevImage,
    #nextImage {


        width:45px;

        height:45px;


        font-size:28px;

    }



    #prevImage {

        left:10px;

    }


    #nextImage {

        right:10px;

    }

}