/** {
  outline: 1px solid red;
}
*/
body {
    font-family: Verdana, Geneva, sans-serif;
}

:root {
  --color1: #248F9F; /*blue*/
  --color2: #2e2e2e; /*dark grey*/
  --color3: #616161; /*grey*/
  --color4: #F9F9F9; /*white*/
  --color5: #FDE22D; /*yellow*/
  --uni_margin: 20px;
}

/* Add this CSS to your stylesheet */
.cover-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the image covers the entire container */
    z-index: -1; /* Place the image behind other content */
}

#email_input, #password_input{
    width: 300px;
    border-radius: 20px;
    padding-left: 20px;
}

.slight-padding, .h1 {
    padding: var(--uni_margin) !important;
    margin: 0px !important;
}


#submit, #submit_button2, #supportButton{
    border-radius: 20px;
}

/* Media query for mobile devices*/
@media (max-width: 1200px) {
    body {
      touch-action: manipulation; /* Disable pinch-to-zoom and double-tap gestures */
    }

    
    #email_input, #password_input {
        /* Adjust the styles for mobile here */
        width: 90%;
        height: 30px;
        font-size: 16px; /* Example: change the width for mobile */
        border-radius: 20px;
        display: flex;
        align-items: center; /* Center the text vertically */
        margin-right: 20px;
        margin-top: 5px;
    }


    #email_input:focus, #password_input:focus {
        font-size: 16px; /* Adjust to the desired font size when focused */
    }

    #submit-container {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }

    #submit, #submit_button2, #supportButton{
        width: 90%; /* Adjust the width as needed */
        height: 100%;
        font-size: 18px;
        border-radius: 20px;
        padding: 4px;
        background-color: var(--color1);
        color: var(--color4);
    }

    h1 {
        font-size: 20px; /* Adjust the font size for mobile */
        text-align: center;
        margin: 10px;

    }

    .slight-padding {
        padding: var(--uni_margin) !important;
        margin: 0px !important;
    }

    label {
        font-size: 20px; /* Adjust the font size for mobile */
    }

    .forgot, .forgot2 {
        font-size: 12px; /* Adjust the font size for mobile */
    }
}