*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"poppins",monospace;
}
body{
    background-color: #c9d6ff;
    background:linear-gradient(to right,#6f74bd,#3a4bad);
}
.container{
    background:#ffffff;
    width:1000px;
    padding:2rem;
    margin:100px auto;
    border-radius:30px;
    box-shadow:0 20px 35px rgba(0,0,1,0.9);
}
form{
    margin:0 2rem;
}
.form-title{
    font-size:3rem;
    font-weight:bold;
    text-align:center;
    padding:1.3rem;
    margin-bottom:0.4rem;
}


input, select {
    color: inherit;
    width: 100%;
    border: 1px solid #757575;
    padding: 0.5rem; 
    font-size: 15px;
    margin: 10px; 
}

.input-group {
    position: relative;
    margin-bottom: 2rem; 
}

input:focus {
    background-color: #cccccc;
    outline: transparent;
}

input::placeholder {
    color: #000; 
}

label {

    font-size: 14px;
    transition: 0.3s ease all;
    pointer-events: none; 
}


input:focus ~ label, 
input:not(:placeholder-shown) ~ label {
    top: -1.8rem; 
    left: 1.2rem;
    font-size: 12px; 
    color: #c9d6ff; 
}

.recover{
    text-align:right;
    font-size:1rem;
    margin-bottom:1rem;
}
.btn{
    font-size:1.1rem;
    padding:8px 0;
    border-radius:5px;
    outline:none;
    border:none;
    width:100%;
    background:rgb(210, 210, 230);
    color:white;
    transition:0.9s;
}
.icons{
    text-align:center;
}
.links{
    display:flex;
    justify-content:space-around;
    padding:0 4rem;
    margin-top:0.9rem;
    font-weight:bold;
}

form .error-message {
    color: red;
    font-size: 12px;
}

.error {
    color: #D8000C; 
    background-color: #FFBABA; 
    border: 1px solid #D8000C; 
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.success {
    color: #4F8A10; 
    background-color: #DFF2BF; 
    border: 1px solid #4F8A10; 
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.message {
    display: block;
    width: 100%;
    box-sizing: border-box; 
    text-align: left;
}


table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 14px;
}

table th, 
table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

table th {
    background-color: #C3B1E1; 
    color: white; 
    font-weight: bold;
}

table tr:nth-child(even) {
    background-color: #f9f9f9;
}

table tr:hover {
    background-color: #f1f1f1;
}

@media only screen and (max-width: 768px) {
    #wrapper {
        width: 100%;
        padding: 0 10px; 
    }

    #content {
        width: 100%;
        padding: 10px;
        padding-bottom: 60px;
        box-sizing: border-box;
    }

    #main {
        flex-direction: column;
    }

    #leftcolumn {
        width: 100%;
        margin-bottom: 15px;
    }

    #header h1 {
        font-size: 22px; 
    }

    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form textarea,
    form select {
        padding: 8px;
    }

    form button,
    form input[type="submit"] {
        padding: 10px;
        font-size: 13px; 
    }
    
    table {
        width: 100%;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    table th, 
    table td {
        font-size: 12px;
        padding: 8px;
    }
    
}


@media only screen and (max-width: 480px) {

    #header h1 {
        font-size: 18px;
    }

  
    #footer {
        font-size: 12px;
    }

    #content {
        padding: 8px;
    }

    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form textarea,
    form select {
        font-size: 14px; 
        padding: 6px;
    }

    form button,
    form input[type="submit"] {
        padding: 8px;
        font-size: 12px;
    }
}


button{
    color:rgb(0, 0, 0);
    text-align: center;
    padding: 0.5rem;
    border:none;
    margin:px auto;
    background-color:rgb(223, 223, 223);
    font-size:1rem;
    border-radius: 7px;
    box-shadow:0 2px 15px rgba(0, 0, 0, 0.9);
}
button:hover{
    color:blue;
}
orm {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    column-gap: 15px; 
}

form label {
    font-weight: bold;
    margin-bottom: 5px;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea,
form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

form textarea {
    resize: vertical; 
    min-height: 100px;
}

form button,
form input[type="submit"] {
    background-color: #C3B1E1;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

form button:hover,
form input[type="submit"]:hover {
    background-color: #800080;
}

form .form-group {
    display: flex;
    align-items: center;
}

form .form-group label {
    margin: 0;
}