/*
 * Mobile-First Styles (for screens 320px and up)
 * These are the base styles that apply to all devices
 */
body {
    background-color: black;
    font-family: Arial, sans-serif;
    color: #fff;
    margin: 0;
    overflow: hidden;
}

.fit-picture {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
}

.logo {
    max-width: 45vh;
    height: auto;
    /*margin-bottom: 20px;*/
}

/*h1 {*/
/*    !* Base font size for mobile *!*/
/*    font-size: 1.5rem;*/
/*    margin: 0;*/
/*}*/

/*p {*/
/*    !* Base font size for mobile *!*/
/*    font-size: 0.9rem;*/
/*    margin-top: 10px;*/
/*}*/

/*
 * Media Query for Medium Screens (e.g., tablets)
 * These styles are added for screens 481px and wider
 */
@media (min-width: 481px) {
    body {
        overflow-x: hidden;
    }
    .logo {
        /* Increase the logo size slightly for tablets */
        max-width: 60vh;
    }

    /*h1 {*/
    /*    !* Increase the font size for tablets *!*/
    /*    font-size: 2rem;*/
    /*}*/

    /*p {*/
    /*    !* Increase the font size for tablets *!*/
    /*    font-size: 1rem;*/
    /*}*/
}

/*
 * Media Query for Large Screens (e.g., desktops)
 * These styles are added for screens 769px and wider
 */
@media (min-width: 769px) {
    .logo {
        /* Increase the logo size to your original desktop size */
        max-width: 75vh;
    }

    /*h1 {*/
    /*    !* Increase the font size for desktops *!*/
    /*    font-size: 2.5rem;*/
    /*}*/

    /*p {*/
    /*    !* Increase the font size for desktops *!*/
    /*    font-size: 1.2rem;*/
    /*}*/
}