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;
}


main{
    position: relative;
    margin: 100px auto 0;
    text-align: center;
    max-width: 800px;
    flex: 1 0 auto;
}
#id2{
    font-family: 'thejacarta', Gadget, sans-serif;
    font-size: 20px;
    color:#fff;
    text-align: center; 
position: relative;top: 130px;left: 50%;transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; 
max-width: 400px;
}
a{color: #93d5ff; text-decoration: underline;}
footer{
    color: #fff;
    position: static;bottom: 0px;left: 0px;right: 0px;
    text-align: start;
    background-color: #374860;opacity: 0.8;
    margin: 0;
    z-index: 100;
    padding: 0;
    box-sizing: border-box;
    width:100%;
}
h6{
    font-family: 'sans-serif';
    font-size: 15px;
    color: #fff;
    position: scroll;
}
br{line-height: 1px;  }
#password-bu{
    font-family: 'sans-serif';
    font-size: 20px;
    text-align: center;
    background-color: rgb(56, 76, 97);
    padding: 12px;
    border-radius: 20px;
     text-decoration: none;
    color: rgb(247, 246, 249);
    border: none;
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
input{
    font-family: 'sans-serif';
    font-size: 20px;
    color: rgb(247, 246, 249);
    background-color: rgb(56, 76, 97);  
    padding: 12px;
    border-radius: 5px;
    border: none;
    margin: 10px;
}
::placeholder{
    color: rgb(246, 247, 249);
    opacity: 0.6; font-size: 15px;
}
#remember-device{
    font-family: 'sans-serif';
    font-size: 20px;
    color: #adefff;
    margin: 10px;
}
h2{
    font-family: 'sans-serif';
    font-size: 25px;
    color: #fff;
    text-align: center;
}
    @font-face {
    font-family: 'thejacarta';
    src: url('../fonts/thejacarta.ttf') format('truetype');
}
p{
    font-family: 'sans-serif';
    font-size: 20px;
    color: #fff;
    text-align: center;
    
}
h3{
    font-family: 'sans-serif';
    font-size: 22px;
    color: #fff;
    text-align: center;
    }
#id1{
    font-family: 'thejacarta', Gadget, sans-serif;
    font-size: 20px;
    color: black;
    text-align: center;
    background-color: rgba(255, 255, 0, 0.321);
    padding: 10px;
    border-radius: 10px;
    margin: 20px;
    z-index: 1000;
}
span{
    color: rgb(194, 187, 201); 
        margin: 5px;}
    div{
    color: rgb(192, 187, 201);
    text-align: center;
    }
.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; }
.dropdown .dropdown-content{ display: none; position: absolute; min-width: 30px; box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); z-index: 1; font-size: 20px;background-color: #3d546a;border-radius: 5px; }
.dropdown:hover .dropdown-content{ display: block; }
.dropdown{display: inline-block ;}
button{
    background-color: #3d546a;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
    text-align: start;
}
    
ul { color: #fff;}
/* Header layout: keep menu at the end of the line */
.site-header { display: flex;align-items: center; gap: 12px; padding: 17px 30px; width: 100%; position: fixed;top: 0px;left: 0;right: 0; z-index: 10000;background-color: #3d546a;margin-bottom:30px; }
.site-header h1 { margin: 0; position: fixed;top: 10px; left: 50%; transform: translateX(-50%);font-size: clamp(32px, 4.5vw, 100px);color:#fff;}  
.site-header img { height: auto;}
.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; text-align: start; }
.site-header hr { position: relative;top: 40px;right: 40px; width: 85%; border: none; height: 1px; background-color: #fbf7f7; }
@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; }


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

    /* 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 smaller-screen tweaks */
@media (max-width: 480px) {
    .site-header { display:none; }
    .menu-icon { font-size: 20px; }
    main { max-width: 96%; padding: 0 12px;position:relative; top: 10px; }
    .thread-item, .reply { padding: 8px; font-size: 14px; }
    .post-thread-btn { padding: 8px 10px; }
    .menu-btn { font-size: 18px; padding: 6px 8px; }
    .dropdown .dropdown-content { width: 100%; }
}

@media (max-width: 360px) {
    .site-header h1 { font-size: 16px; }
    main {position:relative; top: 55px; padding-bottom:100px; }
    .thread-item, .reply { font-size: 13px; }
    input, textarea { font-size: 14px; }
}

/* Scroll-to-footer button */
.scroll-footer-btn {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 3000;
        background: rgba(0,0,0,0.7);
        color: #fff;
        border: none;
        border-radius: 22px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.scroll-footer-btn:hover { background: rgba(0,0,0,0.85); }

@media (max-width: 480px) {
    .scroll-footer-btn { right: 12px; bottom: 12px; width: 40px; height: 40px; }
}

/* "Forget this device" button styling */
#forget-device-btn {
    margin-left: 12px;
    background-color: rgb(32, 42, 54);
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#forget-device-btn:hover {
    background-color: rgb(0, 0, 0);
}

@media (max-width: 480px) {
    #forget-device-btn { font-size: 13px; padding: 6px 10px; position: fixed; top: 0;right: 10px;left: auto;}
}