.header{
    background-image:  url("../img/sky_tile_tall.gif");
    background-repeat: repeat-x;
    height: 310px;
    width: 100%;
}


.logo_contrainer{
    height:310px;
    width: 627px;
    margin: auto;
    display: block;
}

.content{
    width:100%;
    max-width:500px;
    margin:auto;
}

.content textarea{

        /* border-color: black; */
        border: #878787 1px;
        /* border-block-style: none; */
        width: 100%;
        border-radius: 5px;
        border-style: dashed;
        min-height: 200px;
        font-size: medium;
        padding: 10px;
        background-color: rgba(0,0,0,0.05);
        /* border: none; */
        resize: none;
    }


.content button{
    display: inline-block;
    cursor: pointer;
    color: #202020;
    font-family: Courier;
    font-weight: 600;
    width: 100%;
    margin-top: 10px;
    font-size: 17px;
    padding: 7px 17px;
    /* border-radius: 5px; */
    
}

.content .half{
    width: 48%;
    float: left;
}

.content button:disabled{
    cursor: pointer;
    color: #888888;
    font-family: Courier;
    /* border-radius: 5px; */
    
}

select#typewriters_online{
    margin-bottom: 10px;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #202020;
        color: #ffffff;
    }

    .header {
        background-image: url("../img/sky_tile_tall_dark.gif"); /* Use a dark mode image */
        background-repeat: repeat-x;
        background-color: #202020;
    }

    .logo_contrainer img {
        filter: invert(1); /* Invert the image colors */
    }

    .content {
        background-color: transparent; /* Remove background color */
    }

    .content textarea {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border-color: #ffffff;
    }

    .content button {
        background-color: #404040;
        color: #ffffff;
    }

    .content button:disabled {
        background-color: #606060;
        color: #888888;
    }

    select#typewriters_online {
        background-color: #404040;
        color: #ffffff;
        border-color: #ffffff;
    }
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) {
    /* Light mode styles */
    @media (prefers-color-scheme: light) {
        body {
            background-color: white;
        }
        
        .content textarea {
            background-color: rgba(0,0,0,0.05);
            color: black;
        }
    }

    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #202020;
            color: #ffffff;
        }

        .header {
            height: auto;
            width: 100%;
            background-image: none; /* Remove background image */
            background-color: #202020;
            padding: 0;
            margin: 0;
        }

        .logo_contrainer {
            width: 100%;
            height: auto;
            padding: 0;
            margin: 0;
        }

        .logo_contrainer img {
            width: 100%;
            height: auto;
            max-width: 100%;
            display: block;
            margin: 0;
            filter: invert(1); /* Invert the image colors */
        }


        .content textarea {
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border-color: #ffffff;
            width: 100%; /* Ensure it does not exceed 100% width */
            border-radius: 5px;
            border-style: dashed;
            min-height: 200px;
            font-size: medium;
            padding: 10px;
            resize: none;
            box-sizing: border-box; /* Include padding and border in the element's total width and height */
        }

        .content button {
            background-color: #404040;
            color: #ffffff;
        }

        .content button:disabled {
            background-color: #606060;
            color: #888888;
        }

        select#typewriters_online {
            background-color: #404040;
            color: #ffffff;
            border-color: #ffffff;
        }
    }
}