* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #330033;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M1307.418%2c156.932C1328.204%2c157.551%2c1346.297%2c142.773%2c1355.499%2c124.125C1363.763%2c107.379%2c1358.069%2c88.676%2c1349.215%2c72.234C1339.715%2c54.593%2c1327.45%2c35.228%2c1307.418%2c34.841C1286.982%2c34.446%2c1271.882%2c52.287%2c1262.726%2c70.562C1254.587%2c86.807%2c1255.701%2c105.266%2c1264.051%2c121.404C1273.256%2c139.193%2c1287.398%2c156.336%2c1307.418%2c156.932' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M882.2138441693463 225.7901202693287L736.5000330507015 303.2675279644514 813.9774407458242 448.9813390830962 959.691251864469 371.50393138797347z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M787.0192056023991 264.0295053091802L877.9220277092513 421.82491411800567 959.9107175083694 285.37281990053225z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M540.6790792046073 428.36412983278694L551.2298655562083 327.98010320501754 450.84583892843887 317.4293168534166 440.2950525768379 417.813343481186z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M486.7301161850729 264.027509059238L477.0224968468723 374.9861058301686 587.9810936178029 384.6937251683692 597.6887129560034 273.73512839743864z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M349.79458381903135 347.9096090545787L429.0139448947308 307.5453284938215 388.64966433397353 228.32596741812205 309.43030325827414 268.69024797887926z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
}

h1 {
    text-align: center;
    padding: 20px;
    font-size: 40px;
    color: #ffffff;
}

#fecha {
    text-align: center;
    color: rgb(255, 255, 255);
    font-weight: normal;
    font-size: 30px;
}

.container {
    width: 90%;
    max-width: 700px;
    background-color: #ffffff;
    padding: 10px;
    margin: auto;
    margin-top: 20px;
    border-radius: 20px;
}

.acceso {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}

.acceso:hover {
    background-color: #0057b3;
}

.DNI {
    text-align: center;
    font-size: 25px;
    margin-bottom: 20px;
}

input {
    width: 100%;
    padding: 20px;
    outline: none;
    border-radius: 20px;
}

.botones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.entrada, .salida {
    width: 100%;
    padding: 15px 25px;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 20px;
}

.entrada {
    background: rgb(29, 30, 86);
}

.salida {
    background: rgb(68, 48, 48);
}

/* Media Queries for responsiveness */
@media (min-width: 600px) {
    .container {
        width: 80%;
    }

    .botones {
        flex-direction: row;
        gap: 20px;
    }
}

@media (min-width: 768px) {
    .container {
        width: 70%;
    }
}

@media (min-width: 992px) {
    .container {
        width: 60%;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 50%;
    }
}