body{background :linear-gradient(rgb(38, 89, 120),rgb(0, 89, 255), rgb(0, 174, 255));min-height:100% ; background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    display: flex;flex-direction: column;
    min-height: 100vh;
}
h1{     
 font-family: 'thejacarta'; 
    font-size: 100px;                   
    color: #fff;
    text-align: center;
}
label{
    font-size: 20px;
    color: #adefff;
    text-align: center; 
    position: relative;top: 30px;
}
select{
    font-family: 'sans-serif';
    font-size: 20px;
    text-align: left; 
    background-color: rgb(56, 76, 97);
    padding: 12px;
    border-radius: 5px;
    border: none;
    margin: none;
    max-width: 150px;
    font-size: 15px;
    position: relative;top: 30px;
color: #fff;}
    option{ color: #fff;
        background-color: rgb(56, 76, 97); 
        border-radius: 5px;
        padding: 2px;
        margin: 5px;
        text-align: left;
        } 
        .login-form{
    display: inline-block;display: flex; flex-direction:column;column-gap: 0px; align-items: center;
    margin: 0;
    position: relative; top:30px; 
    font-size: 20px;
margin-bottom: 150px;
max-width: 400px;
        }
        ::placeholder { color: #fff; font-family: 'sans-serif';
            opacity: 0.6; font-size: 15px;}
    .remember-me{ 
    color: rgb(56, 76, 97);
    position: relative;top: 30px;left: 50%; transform: translateX(-50%);
    font-size: 20px;
    border-radius: 5px;
    margin: 0;
}
.remember-me:checked{ background-color: rgb(56, 76, 97);color:#fff; }  
    textarea{
    font-family: sans-serif;
    background-color: rgb(56, 76, 97);  
    font-size: 20px;
    color: rgb(247, 246, 249);
    text-align: left;
    padding: 12px;
    border-radius: 15px;
    border: none;
position: relative;top: 30px;
    }
        label:hover{ color: #000;}
select:hover{ border: none;}
.input{
    font-family: 'sans-serif';
    font-size: 20px;
    color: rgb(247, 246, 249);
    text-align: left; 
    background-color: rgb(56, 76, 97);
    padding: 12px;
    border-radius: 20px;
    border: none;
    margin: none;
    max-width: 150px;
    font-size: 15px;
    position: relative;top: 30px;
}
h5{
    color: hsl(0, 0%, 100%);
    font-size: 15px;
}
.input1{
    font-family: 'sans-serif';
    font-size: 20px;
    color: rgb(247, 246, 249);
    text-align: left; 
    background-color: rgb(56, 76, 97);
    padding: 12px;
    border-radius: 20px;
    border: none;
    margin: none;
    max-width: 150px;
    font-size: 15px;
    position: relative;top: 45px;
}

input:hover{ border: black;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 15px;
}
footer{
    color: #fff;
    position: fixed;bottom: 0;left: 0;right: 0;
    text-align: start;
    background-color: #374860;opacity: 0.8;
    margin: 0;
    z-index: 100;
    margin-top: 120px;
    width: 100%;
}
h6{
    font-family: 'sans-serif';
    font-size: 15px;
    color: #fff;
    margin-top: 0px;
}
br{line-height: 1px;  }
form{
    text-align: center;
    display: inline-block;display: flex; flex-direction:column;column-gap: 0px; align-items: center;
    margin: 0;
    position: relative;
    font-size: 20px;
margin-bottom: 150px;
max-width: 400px;
    
}
#main{
    text-align: center;
    position: absolute;
    top: 50px;left: 50%; transform: translateX(-50%);
    margin: 100px auto 0;
    flex: 1 0 auto;
    margin-bottom: 100px;
}
h3{
    color: hsl(0, 0%, 100%);
    font-size: 22px;
    text-align: center;
}
@font-face {
    font-family: 'thejacarta';
    src: url('../fonts/thejacarta.ttf') format('truetype');
}
span{
    color: #fff;
        margin: 5px; 
}
p{color: #fff; font-size: 30px; text-align: center;padding: 0;margin: 0;position: relative; top: 250px;}    
pre{color: #fff; font-family:serif; font-size: 13px; text-align: center; padding: 0;margin: 0;position: relative; top: 300px;}                
a{color: #cbeafd; text-decoration: underline;}

.dropdown button{ background-color: #3d546a;
    padding: 5px 3px;
    font-size: 30px;
    border: none;
    cursor: pointer;
    font-family: 'thejacarta', Gadget, sans-serif;
text-align: start;}
   
.dropdown a{ display: block;   
    color: #fff; 
padding: 5px 3px; 
}
ul { color: #fff;}
.dropdown .dropdown-content{ display: none;
    position: absolute;
    background-color: #3d546a;
    min-width: 30px;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-size: 20px;
}
.dropdown:hover .dropdown-content{ display: block;}
.dropdown{display: inline-block ;}
button{
    background-color: #3d546a;
    color: #fff;  
     font-size: 20px;
    border: none;
    cursor: pointer;
    font-family: 'sans serif', Gadget, sans-serif;
    text-align: start;
    
}

/* Header layout: keep menu at the end of the line */
.site-header {display: flex; align-items: center; gap: 12px; padding: 12px 20px; width: 100%; position: fixed;top: 0px; left: 0; right: 0; z-index: 1000;background-color: #3d546a;}
.site-header h1 { background: none; margin: 0; padding: 0 12px; color: #fff; position: fixed; left: 50%; transform: translateX(-50%); font-size: clamp(32px, 4.5vw, 100px);z-index: 1000; }
.site-header img { height: auto; position: relative; top: 8px; }
.site-nav { margin-right: auto; }
.dropdown { display: inline-block; position: relative;padding: 7px 4px;border-radius: 10px; }
.menu-btn { background-color: #3d546a; color: #fff; font-size: 20px;z-index: 1001; }
.dropdown .dropdown-content { left: 0px; right: auto; }
.site-header hr { position: relative;top: 40px;right: 40px; width: 85%; border: none; height: 1px; background-color: #fbf7f7; }

/* Small-screen / responsive behavior */
.menu-icon { display: inline; font-size: 20px; margin-left: 6px; }

@media (max-width: 720px) {
    .site-header { padding: 10px 14px; }
    .site-header h1 { font-size: clamp(18px, 6vw, 32px); position: static; transform: none; white-space: normal; }
    .menu-text { display: none; }
    .menu-icon { display: inline; font-size: 22px; }
    /* make dropdown expand full width under the header on small screens */
    .dropdown .dropdown-content { position: static; display: none; width: 75%; background-color: #3d546a; box-shadow: none; left: 0; margin-top: 8px; }
    .dropdown.open .dropdown-content { display: block; }
    .dropdown .dropdown-content a { padding: 12px; display: block; }
}              
/* Additional small-device tweaks */
@media (max-width: 480px) {
    .site-header { padding: 8px 10px; }
    .site-header h1 { font-size: 18px; position: static; transform: none; }
    .site-header img { display: none; }
    main { top: 180px; }
    form { font-size: 16px; }
    #id1 { font-size: 16px; top: 100px; max-width: 92%; }
    h3 { font-size: 18px; }
    p { font-size: 18px; top: 180px; }
    .menu-icon { font-size: 20px; }
}

@media (max-width: 360px) {
    .site-header h1 { font-size: 16px; }
    main { top: 160px; }
    form { font-size: 14px; }
    p { font-size: 16px; top: 160px; }
}
ul{color: #fff;
}