body{
    margin: 0;
}
/* Shared header/navigation styles: professional, accessible, responsive and browser-compatible */
.nav{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:0.9rem 1.25rem;
    background:#fff;
    box-shadow:0 1px 8px rgba(0,0,0,0.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.brand{
    font-weight:800;
    color:#0581FE;
    font-size:1.5rem;
    text-decoration:none;
}
.links{margin-left:auto;display:flex;gap:.6rem;align-items:center}
.links a{color:#444;text-decoration:none;padding:.45rem .75rem;border-radius:8px;font-weight:600;transition:transform .14s ease,opacity .14s ease;background:transparent}
.links a:hover{transform:translateY(-2px);opacity:0.95}
.links a.primary{background:linear-gradient(180deg,#4EB6FF,#0581FE);color:#fff;box-shadow:0 6px 16px rgba(5,129,254,0.14)}
/* Specific social-style buttons */
.links a.blog-btn{background:#1DA1F2;color:#fff;box-shadow:0 6px 14px rgba(29,161,242,0.15)}
.links a.community-btn{background:#1877F2;color:#fff;box-shadow:0 6px 14px rgba(24,119,242,0.15)}
.links a.ghost{background:transparent;border:1px solid rgba(0,0,0,0.06)}
@media (max-width:640px){.nav{padding:.65rem}.brand{font-size:1.15rem}.links{gap:.4rem}.links a{padding:.6rem .8rem;font-size:0.95rem}}

/* Global fluid images and responsive helpers */
img{max-width:100%;height:auto;display:block}
.site{max-width:1200px;margin:0 auto;width:100%;}

/* Action buttons become full-width stacked items on small screens */
@media (max-width:480px){
    .links{flex-direction:column;align-items:flex-end;gap:.45rem}
    .links a{display:inline-flex;justify-content:center;width:100%;padding:.9rem 1rem;border-radius:10px}
    .brand{margin-bottom:.4rem}
}

/* Improve tap targets and typography for small devices */
@media (max-width:360px){
    .links a{font-size:1rem;padding:0.85rem}
    .brand{font-size:1.05rem}
}

/* Tweak common page elements that may be fixed-size in page-specific CSS */
.main-content, .hero, .blog-grid, .posts-grid{box-sizing:border-box;padding-left:1rem;padding-right:1rem}
.blog-card, .post-card{width:100%;}

.full-screen{
    width: 100%;
    height: 100%;
}
.header {
            background: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .header-left {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        .logo img {
            height: 4rem;
            width: auto;
        }

        .description img {
            height: auto;
            width: 15rem;
        }

        .header-right {
            display: flex;
            gap: 1.5rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .social-links {
            display: flex;
            gap: 1rem;
        }

        .social-links img {
            height: 3rem;
            cursor: pointer;
            transition: transform 0.2s;
        }

            /* Simplified, flexbox-based header helpers. Keep header layout responsive
               and avoid float-based rules that break mobile/modern layouts. */
            .description{
                display: flex;
                align-items: center;
                gap: 0.8rem;
                background: transparent;
                height: auto;
                width: auto;
            }

            .descimg{
                max-width: 220px;
                width: auto;
                height: auto;
                margin-left: 0;
                padding: 0;
                cursor: default;
            }

            .contact{
                display: flex;
                align-items: center;
                gap: 0.6rem;
                background: transparent;
                height: auto;
                width: auto;
            }

            .social{
                display: flex;
                align-items: center;
                gap: 0.6rem;
                background: transparent;
            }

            .fbimg,
            .tweeterimg{
                width: auto;
                height: 28px;
                padding: 0;
                cursor: pointer;
            }

            /* legacy .langselect corrected: prefer #langSelect (used in markup) */
            .langselect{ display: none; }

/* Header utility/enhancements */
.online-badge {
    padding: 0.6rem 1rem;
    font-weight: 700;
    font-size: 1.4rem;
    color:#6CB5FF; 
    display: flex;
    flex-direction: column;
    align-items: center;

}


/* Stylish community button in header */
.nav-link.community {
    display: inline-block;
    padding: 0.45rem 1rem;
    background: linear-gradient(90deg,#0581FE,#7EBFFF);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(5,129,254,0.18);
    text-decoration: none;
    font-weight: 700;
}
.nav-link.community:hover { transform: translateY(-2px); opacity: 0.95 }

/* Ensure language select is usable on mobile */
#langSelect { font-size: 1.2rem; padding: 0.5rem; }

#word{
    font-size: 2em;
    color: #9cf;
    margin-top: auto;
    margin-left: 41px;
    font-family: Arial, Helvetica, sans-serif;
}
.remaining{
    
    height: auto;
    min-height: 775px;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}
.midbox{
    
    margin: 0.5em auto;
    padding: 1rem;
    border: 1px solid #CCC;
    background: white;
    border-radius: 0.5em;
    box-shadow: inset 0 0 0.5em #bbb;
    position: relative;
    width: 100%;
    max-width: 800px;
    height: auto;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.topmid{
    width: 100%;
    background: white;
    height: auto;
    padding: 1rem 0;
    text-align: center;
}
.topmid p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    color: #615f5f;
    margin: 0;
}
.photo{
    width: 100%;
    max-width: 287px;
    margin: 1rem auto;
}
.photo img{
    width: 100%;
    height: auto;
    max-width: 290px;
}
.lefttophoto{
    width: 100%;
    background: white;
    padding: 1rem;
    text-align: center;
}
.lefttophoto p{
    line-height: 1.5;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: normal;
    font-size: 1.4rem;
    margin: 0;
}
.downmid{
    background: white;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}
.downmid p{
    line-height: 1.5;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 1.4rem;
    margin: 0;
}
.bluebox{
    background: #9cf;
    width: 100%;
    max-width: 80%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #CCC;
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
}
.bluebox h2{
    padding: 0;
    margin: 0;
    text-align: center;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 1.6rem;
}
.middown{
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.interest{
    width: 100%;
    max-width: 400px;
    margin-bottom: 2rem;
}
.about{
    font-family: "Lucida Grande", Lucida, sans-serif;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
    display: block;
}
#talkbox{
    width: 100%;
    text-align: center;
}
#talkbox input{
    width: 100%;
    max-width: 339px;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.6rem;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}
.chating{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.chating p{
    margin: 0 0 1rem 0;
    padding: 0;
    color: black;
    font-weight: normal;
    font-size: 1.8rem;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    text-align: center;
}
.textimg{
    margin: 0.5rem 0;
}
.textimg a{
    display: inline-block;
}
.textimg img{
    height: 48px;
    width: auto;
    max-width: 124px;
    cursor: pointer;
}
.ortext{
    margin: 1rem 0;
    text-align: center;
}
.ortext p{
    font-size: 1.6rem;
    font-weight: bold;
    color: black;
}
.videoimg{
    margin: 0.5rem 0;
}
.videoimg a{
    display: inline-block;
}
.videoimg img{
    height: 48px;
    width: auto;
    max-width: 124px;
    cursor: pointer;
}
.college{
    width: 100%;
    max-width: 339px;
    height: auto;
    border: 1px solid rgb(204, 204, 204);
    background: rgb(238, 238, 238);
    color: black;
    text-align: center;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: 0.5em;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.playbutton img, .stdchat, .unmoded img{
    height: 25px;
    width: auto;
}
.stdchat{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 1.4rem;
}
/* Site footer: centered, roomy, and mobile-friendly */
.site footer{
        padding: 1.25rem 1rem;
        text-align: center;
        color: #666;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 0.95rem;
        background: transparent;
        margin-top: 2rem;
}
.site footer p{ margin: 0.35rem 0; }
.site footer a{ color: #0581FE; text-decoration: none; font-weight: 700; }
.site footer a:hover{ text-decoration: underline; opacity: 0.95; }

/* Make header spacing slightly tighter and ensure links wrap nicely on small screens */
.nav{ gap: .6rem; }
.links{ gap: .5rem; }

@media (max-width:640px){
    .links{ flex-wrap: wrap; justify-content: flex-end; }
    .site footer{ font-size: 0.9rem; padding: 0.9rem; }
}

/* Footer helpers: centered links and compact layout */
/* Footer helpers: centered links and compact layout (apply to <footer> and legacy .footer) */
.site footer,
.site .site-footer,
.site .footer {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.35rem;
    width:100%;
}
.site footer .footer-links,
.site .site-footer .footer-links,
.site .footer .footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.5rem;
    align-items:center;
}
.site footer .footer-links a,
.site .site-footer .footer-links a,
.site .footer .footer-links a{color:inherit;font-weight:600;padding:.25rem .4rem;border-radius:6px}
.site footer .footer-copy,
.site .site-footer .footer-copy,
.site .footer .footer-copy{color:#666;font-size:0.9rem}

@media (max-width:480px){
    .site footer .footer-links{gap:.4rem;padding:0 .6rem}
    .site footer .footer-copy{font-size:0.85rem}
}

/* Mobile responsiveness for homepage */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .header-left {
        flex-direction: column;
        gap: 1rem;
    }
    .description img {
        width: 200px;
    }
    .header-right {
        flex-direction: column;
        gap: 0.5rem;
    }
    .social-links {
        flex-direction: row;
        gap: 0.5rem;
    }
    .online-badge {
        font-size: 1.2rem;
        padding: 0.4rem 0.8rem;
    }
    .remaining {
        padding: 0.5rem;
    }
    .midbox {
        padding: 0.5rem;
        max-width: 100%;
    }
    .topmid p {
        font-size: 1.2rem;
    }
    .lefttophoto p {
        font-size: 1.2rem;
    }
    .downmid p {
        font-size: 1.2rem;
    }
    .bluebox h2 {
        font-size: 1.4rem;
    }
    .about {
        font-size: 1.6rem;
    }
    #talkbox input {
        font-size: 1.4rem;
        height: 44px; /* Touch-friendly */
    }
    .chating p {
        font-size: 1.4rem;
    }
    .textimg img, .videoimg img {
        height: 50px;
        max-width: 150px;
    }
    .ortext p {
        font-size: 1.4rem;
    }
    .college {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .nav {
        padding: 0.5rem;
    }
    .brand {
        font-size: 1.2rem;
    }
    .links a {
        padding: 0.5rem 0.8rem;
        font-size: 0.9rem;
    }
    .header {
        padding: 0.5rem;
    }
    .logo img {
        height: 3rem;
    }
    .description img {
        width: 150px;
    }
    .online-badge {
        font-size: 1rem;
        padding: 0.3rem 0.6rem;
    }
    .midbox {
        margin: 0.25em;
        padding: 0.25rem;
    }
    .topmid p {
        font-size: 1rem;
    }
    .photo {
        max-width: 200px;
    }
    .lefttophoto p {
        font-size: 1rem;
    }
    .downmid p {
        font-size: 1rem;
    }
    .bluebox {
        padding: 0.5rem;
    }
    .bluebox h2 {
        font-size: 1.2rem;
    }
    .about {
        font-size: 1.4rem;
    }
    #talkbox input {
        font-size: 1.2rem;
        height: 40px;
    }
    .chating p {
        font-size: 1.2rem;
    }
    .textimg img, .videoimg img {
        height: 44px;
        max-width: 120px;
    }
    .ortext p {
        font-size: 1.2rem;
    }
    .college {
        padding: 0.5rem;
    }
    .stdchat {
        font-size: 1.2rem;
    }
}