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; }
ul{color: #fff;}
h1{
    font-family: 'thejacarta'; 
    font-size: 100px;                   
    color: rgb(194, 187, 201);
    text-align: center;
}
footer{
    color: #fff;
    position: static;
    left: 0; right: 0;
    text-align: start;
    background-color: #374860;opacity: 0.8;
    margin-top: 100px;
    padding: 0;
}
h6{
    font-family: 'sans-serif';
    font-size: 15px;
    color: #fff;
    margin-top: 0px;
}
br{line-height: 1px;  }
span{
    color: rgb(194, 187, 201); 
        margin: 5px;}
    div{
    color: rgb(192, 187, 201);
    text-align: center;
    }
button{
    background-color: #3d546a;
    color: rgb(244, 240, 240);  
     font-size: 20px;
    border: none;
    cursor: pointer;
    font-family: 'sans serif', Gadget, sans-serif;
    text-align: start;
    
}
::file-selector-button{
    background-color: #d6ebff;
    color: #404040;
    border: none;
    cursor: pointer;
    text-align: start;
    border-radius: 2px;
}
label{
    font-size: 20px;
    color: #adefff;
}
main { max-width:800px; padding:0 15px; position: relative; margin: 100px auto 0; flex:1 0 auto; }
h2,h3 { margin:6px 0;color:rgb(255, 255, 255); }
form { display:flex; flex-direction:column; gap:8px }
input,textarea { padding:10px; border:1px solid #ccc; border-radius:4px }
.post-thread-btn { background:rgb(25, 16, 86); color:#d8ecff; border:none; padding:10px 12px; border-radius:4px; cursor:pointer;text-align: center;z-index: 1000; }
.ul2 { list-style:none; padding:0 }
.thread-item { background:#fff; border:1px solid #e0e4ef; padding:12px; margin-bottom:8px; border-radius:6px;color: rgb(32, 3, 224); }
.thread-meta { font-size:0.9em; color:#0e0d0d }
.reply { background:#fff; border:1px solid #e6e6e6; padding:8px; margin-bottom:6px; border-radius:4px;color: rgb(32, 3, 224); }
.replies { background:#fff; border:1px solid #e6e6e6; padding:8px; margin-bottom:6px; border-radius:4px;color: rgb(32, 3, 224); }
.new-reply { background:#fff; border:1px solid #e6e6e6; padding:8px; margin-bottom:6px; border-radius:4px;color: rgb(32, 3, 224);}
@font-face {
    font-family: 'thejacarta';
    src: url('../fonts/thejacarta.ttf') format('truetype')
}
.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;
}
    
#ul1 { 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; }
.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;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; 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 { padding: 8px 10px; }
    .site-header h1 { font-size: 18px; position: static; transform: none; left: auto; }
    .site-header img { display: none; }
    .menu-icon { font-size: 20px; }
    main { max-width: 96%; padding: 0 12px; top: 110px; }
    #secret-content1 { max-width: 96%; padding: 0 12px; top: 110px; }
    .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 { top: 95px; }
     #secret-content1 {position:relative; top: 5px; }
    .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; }
}