body {  
            font-family: Arial, sans-serif;  
            margin: 0;  
            padding: 0;  
            overflow: hidden; 
            position: relative;  
        }  
        img.logo {  
            width: 150px;  
            max-width: 100%;   
            height: auto;  
        }  
        .background {  
            position: fixed;  
            top: 0;  
            left: 0;  
            right: 0;  
            bottom: 0;  
            background-image: url('fondo.jpg');
            background-size: cover;  
            background-position: center;  
            z-index: -1;  
        }  

        .container {  
    max-width: 800px; 
    margin: 0 auto;  
    padding: 20px;  
    background-color: rgba(2, 0, 0, 0.479);  
    border-radius: 15px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.473);  
    overflow-y: auto; 
    max-height: 80vh;   
}

        header {  
            background: rgba(31, 112, 7, 0.616);  
            color: #ffffff;  
            padding: 20px;  
            text-align: center;  
            border-radius: 15px; 
        }  

        header:hover {  
            background-color: #5cb85c31  
        }  

        header img {  
            width: 50px;  
            vertical-align: middle;  
            margin-right: 10px;  
        }  

        h1 {  
            display: inline-block;  
            margin: 0;  
            font-size: 2em;  
            transition: transform 0.3s ease;  
        }  

        header:hover h1 {  
            transform: scale(1.1) translateY(-5px);  
        }  

        select {  
            padding: 10px;  
            width: 100%;  
            max-width: 400px;  
            margin: 20px 0;  
            border-radius: 15px;
            border: 1px solid #929292;  
            outline: none;  
            background-color: rgba(124, 123, 123, 0.418);  
             
                              linear-gradient(to bottom, #f8f9fa1a, #e9ecef18);  
            background-repeat: no-repeat, repeat;  
            background-position: right 10px center, 0 0;   
            background-size: 12px, 100%; 
            transition: border-color 0.3s, box-shadow 0.3s;  
        }  

        select:hover {  
            border-color: #28a745;  
            box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);  
        }  

        select:focus {  
            border-color: #28a745;  
            box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);  
        }  

        .job-list {  
            display: flex;  
            flex-wrap: wrap;  
            justify-content: center;  
        }  

        .job-card {  
            background-color: rgba(255, 255, 255, 0.322);  
            border: 1px solid #ddd;  
            border-radius: 15px;  
            padding: 20px;  
            margin: 10px;  
            width: 100%;  
            max-width: 250px;  
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
            transition: 0.2s;  
            text-align: center;  
        }  

        .job-card img {  
            width: 100%;  
            height: auto;  
            border-radius: 15px; 
        }  

        .job-card:hover {  
            box-shadow: 0 4px 10px rgb(255, 255, 255);  
        }  
        button {  
            display: inline-block;  
            padding: 10px 20px;  
            margin-top: 20px;  
            background-color: #2470019d; /* Cambia el color según tu diseño */  
            color: white;  
            text-decoration: none;  
            border-radius: 30px;  
            font-weight: bold;  
        }  

        .btn:hover {  
            background-color: #0820f7; /* Color de fondo en hover */  
        }   


        
       
        @media (max-width: 800px) {  
            h1 {  
                font-size: 1.5em;  
            }  

            select {  
                max-width: 100%;  
            }  

            .job-card {  
                max-width: 90%;  
            }  
        }  

        @media (max-width: 480px) {  
            header {  
                padding: 10px;  
            }  

            h1 {  
                font-size: 1.2em;  
            }  

            .job-card {  
                margin: 5px;  
            }  
        }