/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
}

.black-screen {
    width: 100vw;
    height: 100vh;
    background-image: url('img/Detective.gif');
    background-size: cover; /* Cover the entire screen with the GIF */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    animation: fadeIn 1s ease-in-out forwards; /* Fade in animation */
    background-color: black; 
}

/* Background for taller iPhones (e.g., iPhone X) */
@media only screen and (max-width: 375px) and (min-height: 812px) {
    .black-screen {
        background-image: url('img/MobileDetectiveIPhone.gif');
    }
}

/* Default background for other mobile screens */
@media only screen and (max-width: 768px) {
    .black-screen {
        background-image: url('img/MobileDetective.gif');
    }

    
    /* Hide the logo for taller iPhones */
    .logo {
        display: none;
    }
}

/* Default background for other mobile screens */
@media only screen and (max-width: 768px) {
    .black-screen {
        background-image: url('img/MobileDetective.gif');
    }
    
    /* Hide the logo for other mobile screens */
    .logo {
        display: none;
    }
}

/* Create a red circle */
.red-circle {
    width: 50vw; /* Take up half of the viewport width */
    height: 50vh; /* Take up half of the viewport height */
    max-width: 300px; /* Maximum size for the red circle */
    max-height: 300px; /* Maximum size for the red circle */
    position: absolute; /* Position for the image */
    top: 65%; /* Center vertically */
    left: 25%; /* Position it on the left side of the screen */
    transform: translateY(-50%); /* Center the container vertically */
    overflow: hidden; /* Ensure the image doesn't overflow */
    
}

/* Style for the image */
.logo {
    width: 100%; /* Take up full width of red circle */
    height: auto; /* Maintain aspect ratio */
    position: absolute; /* Position the image */
    top: 50%; /* Move it down by half of its height */
    left: 50%; /* Move it right by half of its width */
    transform: translate(-50%, -50%); /* Center the image */
    border-radius: 50%; /* Make it a circle */
    opacity: 1; /* Make sure it's fully visible */
    display: none; /* Hide the logo */

}

/* Animation for the logo */
@keyframes fadeIn {
    from {
        opacity: 0; /* Start from hidden */
    }
    to {
        opacity: 1; /* Fade in to fully visible */
    }
}