/*/
 * ================================

 * Copyright (c) 2026 by Aelyn <https://aelysia.net> and Cerine <https://caelestis.nu>
 *
 * This site is an ongoing work in progress, and its governing codes may
 * change as development continues. You're welcome to study, discuss, and
 * analyze this work, but copying, repurposing, or misrepresenting it as
 * your own is strictly prohibited.

 * ================================
/*/






/*/
 * ================================
 >>> TABLET RESPONSIVE (768px - 1100px)
 * ================================
/*/

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

    body {
        line-height: 28px;
    }

    main {
        width: 100%;
        padding: 0 30px;
    }

    header {
        position: relative;
        width: 100%;
        height: 250px;
        background-position: center top;
        display: block;
    }

    section {
        width: 100%;
        margin: 50px auto 0;
        padding: 0;
        float: none;
        display: block;
    }

    h1 {
        width: 100%;
        height: auto;
        line-height: normal;
        padding: 60px 40px 20px;
        text-align: center;
        background-position: center;
        font-size: 2.5rem;
    }


    .entry-body {
        width: 100%;
        max-width: 730px;
        margin: 70px auto;
        background-size: 100% auto;
    }

    .entry-content {
        width: auto;
        margin: 0 50px 20px;
    }


    .form {
        max-width: 700px;
    }


    .hr-foot {
        width: 100%;
        background-size: contain;
    }

    footer {
        width: 100%;
        background-size: contain;
    }

    small {
        width: 90%;
    }


    ul.pagination {
        width: 100%;
        text-align: center;
    }

}


/*/
 * ================================
 >>> MOBILE RESPONSIVE (520px)
 * ================================
/*/

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

    body {
        font-size: .95rem;
        line-height: 26px;
        background-attachment: scroll;
    }


    main {
        width: 100%;
        padding: 0 15px;
    }


    header {
    position: relative !important;
    top: auto;
    left: auto;
    width: 100%;
    height: 450px !important;
    display: block;
    background: url("banner.png") top left / 130% auto no-repeat;
    z-index: 3;
}

    section {
        width: 100%;
        margin: 0 auto 30px auto;
        padding-top: 0px;
        position: relative;
        z-index: 2;
    }


    h1 {
        font-size: 2rem;
        width: 100%;
        height: auto;
        line-height: normal;
        padding: 40px 10px 20px;
        text-align: center;
        background-size: contain;
    }


    hr {
        width: 100%;
        background-size: contain;
    }

    .avatar {
        float: none;
        shape-outside: none;
        margin: 0 auto;
        display: none;
    }


    /* Entries */

    .entry-body {
        width: 100%;
        margin: 50px auto;
        background-size: 100% auto;
        height: auto;
        overflow: visible;
    }


    .entry-content {
        width: auto;
        margin: 0 25px 20px;
        text-align: left;
    }


    .entry-name {
        font-size: 2.3rem;
    }


    .entry-info,
    .entry-info b {
        text-align: right;
        margin-bottom: 30px;
        margin-top: -10px;
        padding-bottom: 20px;
        font-size: .8rem;
    }

    .entry-content h2 {
        position: relative;
        top: -10px;
    }

    .panel-box {
        display: none;
    }

    .admin {
    font-size: .8rem;
    line-height: 22px;
    width: 100%;
    margin-bottom: 15px;
    }


    /* Forms */

    .form {
        width: 100%;
        padding: 10px;
    }


    .form-inline {
        grid-template-columns: 1fr;
    }


    textarea {
        height: 130px;
    }


    input[type="submit"],
    input[type="reset"] {
        width: 140px;
    }


    .captcha-row {
        flex-direction: column;
    }


    .captcha {
        margin-left: 0;
    }


    .gbook_sec_img {
        float: none;
        display: block;
        margin: auto;
        width: 150px;
    }


    .gbook_sign_notice {
        width: 100%;
        padding: 0 10px;
    }


    /* Navigation */

    nav a:link,
    nav a:visited {
        font-size: 1.5rem;
    }


    .menu {
        width: 35px;
    }


    /* Pagination */

    ul.pagination {
        width: 100%;
        text-align: center;
    }


    ul.pagination li a,
    ul.pagination li.active a {
        width: 35px;
        height: 35px;
        line-height: 35px;
    }


    /* Footer */

    .hr-foot {
        height: 80px;
        width: 100%;
        background-size: contain;
    }


    footer {
        height: 120px;
        width: 100%;
        background-size: contain;
        margin-bottom: 40px;
    }


    small {
        width: 90%;
        font-size: .75rem;
    }


    #return-to-top {
        width: 45px;
        height: 45px;
        right: 15px;
        bottom: 60px;
    }

}