body {
    font-family: sans-serif;
    background: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #22C1C3;
    background: radial-gradient(circle, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%)
}
.login-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 350px;
    text-align: center;
}
input { border:1px solid red; width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
button { width: 100%; padding: 12px; background: #3498db; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
button:hover { background: #2980b9; }
.error { color: #e74c3c; font-size: 0.9em; margin-bottom: 10px; }

@media (orientation: landscape) {
  body {background-color: #b9d3b9;background:lightgoldenrodyellow}
}

@media (orientation: portrait) {
    body {background-color: whitesmoke;background:none}
    body *{ font-size: 175%;}
    body .button{ font-size: 150%;}
    td,th{padding:0;margin:0}
    .login-card {
        background: transparent;
        padding: 5px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        width: 96vw;
        width: 96%;
        text-align: center;
    }
    input {
        border:1px solid black;
        width: 96vw; width: 96%;
        padding: 12px;
        margin: 1rem 0;
        border-radius: 6px;
        box-sizing: border-box;
        text-align: center;
    }
    input::placeholder {text-align: center;}
    input::-webkit-input-placeholder {text-align: center;} /* For Chrome, Safari, Opera */
    input::-moz-placeholder {text-align: center;} /* For Firefox 19+ */
    input:-moz-placeholder {text-align: center;} /* For Firefox 18- */
    input:-ms-input-placeholder {text-align: center;} /* For Internet Explorer 10+ */
}

@media screen and (max-width: 345px) {
  /* CSS rules for viewports with an aspect ratio of 2/3 or wider (e.g., 3/2, 16/9, etc.) */
    body {background-color: whitesmoke;background:none}
    body *{ font-size: 135%;}
    body .button{ font-size: 115%;}
    td,th{padding:0;margin:0}
    .login-card {
        background: transparent;
        padding: 5px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        width: 96vw;
        width: 96%;
        text-align: center;
    }
    input {
        border:1px solid black;
        width: 96vw; width: 96%;
        padding: 12px;
        margin: 1rem 0;
        border-radius: 6px;
        box-sizing: border-box;
        text-align: center;
    }
    input::placeholder {text-align: center;}
    input::-webkit-input-placeholder {text-align: center;} /* For Chrome, Safari, Opera */
    input::-moz-placeholder {text-align: center;} /* For Firefox 19+ */
    input:-moz-placeholder {text-align: center;} /* For Firefox 18- */
    input:-ms-input-placeholder {text-align: center;} /* For Internet Explorer 10+ */
}