/*/
 * ================================
 * Copyright 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.
 * ================================
/*/



/*/
 * ================================
 >>> GLOBALS
 * ================================
/*/

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

    header,
    main,
    footer {
        width: 100%;
        max-width: 100%;
    }

    section {
        width: 95%;
        max-width: 100%;
    }

    figure {
        max-width: 95%;
        padding: 20px 20px 60px;
        margin: 20px auto 60px auto;
    }

}

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

    * {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    main,
    section,
    figure,
    small,
    .info,
    .form,
    .form-block,
    nav,
    h1 {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

     /*/
      * ================================
      >>> HEADER / BANNER
      * ================================
    /*/

    header {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        padding: 0;
        background: none;
        overflow: hidden;
        text-align: center;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    header::before {
        content: "";
        display: block;
        width: 110vw;
        aspect-ratio: 1440 / 544;
        background-image: url("/assets/img/banner.png");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
    }

    nav.menu {
        width: 100%;
        margin: 0;
        padding: 20px 15px;
    }

     /*/
      * ================================
      >>> HEADINGS
      * ================================
    /*/

    h1 {
        height: auto;
        min-height: 100px;
        background: url("/assets/img/h1.png") right center no-repeat;
        background-size: auto 100px;
        padding: 15px 80px 15px 0;
        font-size: clamp(1.5rem, 8vw, 2.5rem);
        line-height: 1.05;
        text-align: right;
        white-space: normal;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    h2 {
        font-size: 2rem;
        text-indent: 0;
        text-align: center;
    }

    h3 {
        font-size: clamp(2.8rem, 11vw, 4rem);
        text-align: left;
        margin: 40px 0 20px;
        padding-left: 10px;
        line-height: 1;
    }

     /*/
      * ================================
      >>> CONTENT
      * ================================
    /*/

    main,
    section {
        padding: 15px;
        margin: auto;
    }

    figure {
        width: 100%;
        padding: 20px 20px 60px;
        margin: 20px auto 60px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    aside,
    .box,
    .box-2,
    .container,
    .data,
    .stats,
    .note,
    .text,
    .form-opt {
        width: 100%;
        margin: 15px auto;
    }

    .container,
    .data-wrapper {
        display: block;
    }

     /*/
      * ================================
      >>> DATA BLOCKS
      * ================================
    /*/

    .data {
        margin: 15px 0;
    }

    .data .top-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .data .top-row > a {
        width: 100%;
        text-align: center;
    }

    .data .tags {
        width: 100%;
        white-space: normal;
        text-align: center;
        margin-bottom: 20px;
    }

     /*/
      * ================================
      >>> DECORATIONS
      * ================================
    /*/

    .stats {
        background-size: contain;
        height: auto;
        padding: 140px 20px 20px;
    }

    .stat-icon,
    .stat-icon-2,
    .deco-1,
    .deco-2,
    .deco-3,
    .deco-4,
    .deco-5 {
        float: none;
        display: block;
        margin: 20px auto;
        shape-outside: none;
    }

     /*/
      * ================================
      >>> RULES
      * ================================
    /*/

    .p-sub {
        width: 100%;
    }

    .p-sub ol {
        padding: 0;
        margin: 0;
    }

    .p-sub li {
        position: relative;
        margin-bottom: 25px;
        padding-left: 45px;
    }

    .p-sub li span {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 2.5rem;
        line-height: 1;
    }

    .p-sub li p {
        margin: 0;
        padding: 0;
    }

     /*/
      * ================================
      >>> NAVIGATION
      * ================================
    /*/

    .menu--nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px 5px;
        justify-items: center;
        align-items: center;
    }

    .menu--nav .menu__item {
        margin: 0;
        width: auto;
    }

    .menu--nav .menu__item-name {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: clamp(1.5rem, 7vw, 2.2rem);
        line-height: 1;
        letter-spacing: 2px;
        white-space: nowrap;
        text-align: center;
    }

    .menu--nav .menu__item::before {
        display: none;
    }

    .menu--nav .menu__item-name::before,
    .menu--nav .menu__item-name::after {
        left: 50%;
        width: 2.5em;
    }

    .menu--nav .menu__item-name::before {
        transform: translateX(-50%);
    }

    .menu--nav .menu__item-name::after {
        transform: translateX(-50%) scale3d(0, 1, 1);
    }

    .menu--nav .menu__item:hover .menu__item-name::after,
    .menu--nav .menu__item:focus .menu__item-name::after {
        transform: translateX(-50%) scale3d(1, 1, 1);
    }

     /*/
      * ================================
      >>> BUTTONS
      * ================================
    /*/

    .center,
    .box-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .btn {
        flex: 0 1 auto;
        margin: 5px;
    }

    .btn img {
        max-width: 100%;
        height: auto;
    }

     /*/
      * ================================
      >>> TABLES / FORMS
      * ================================
    /*/

    figure .tbody {
        width: 85%;
        margin: 0 auto 50px;
    }

    .tbody {
        display: block;
        width: 100%;
    }

    .trow {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 25px;
        padding: 15px;
        background: rgba(255,255,255,.5);
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(228,218,242,.5);
    }

    .trow:first-child {
        display: none;
    }

    .th {
        width: 100%;
        font-family: "Arima Madurai", cursive;
        font-size: 1.2rem;
        color: #115389;
        text-align: center;
        margin-bottom: 10px;
    }

    .tc {
        width: 100%;
        font-size: .9rem;
        line-height: 1.6;
        text-align: center;
        padding: 0 10px 10px;
    }

    .trow:not(:first-child) .tc:nth-child(2)::before {
        content: "Fanlisting";
        display: block;
        color: #b2974b;
        margin-bottom: 5px;
    }

    .trow:not(:first-child) .tc:nth-child(3)::before {
        content: "Clique";
        display: block;
        color: #b2974b;
        margin-bottom: 5px;
    }



     /*/
      * ================================
      >>> FORMS
      * ================================
    /*/

    .form {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        overflow: visible !important;
        height: auto !important;
    }

    .form-inline,
    .form-inline-2 {
        display: block !important;
        width: 100% !important;
    }

    .form-group {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        height: auto !important;
    }

    .form-group label {
        display: block;
        width: 100%;
        margin-bottom: 5px;
    }

    .form input,
    .form select,
    .form textarea {
        width: 100%;
        max-width: 100%;
    }

    .form select {
        display: block;
        height: auto;
        min-height: 40px;
    }

    .captcha-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .captcha-row input {
        width: 80px !important;
    }

    #captcha_image {
        width: auto !important;
        height: 40px;
    }

    #captcha_reload {
        width: auto !important;
    }





     /*/
      * ================================
      >>> FOOTER
      * ================================
    /*/

    small {
        padding: 15px;
    }

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

}