@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?&family=Glory&family=Hachi+Maru+Pop&family=Lobster+Two:wght@400;700&family=Poppins:wght@100;400;700&family=Roboto+Condensed&family=Roboto+Mono:wght@100;400;700&family=Source+Code+Pro:wght@200;400;600&family=Source+Sans+Pro:wght@200;400;700&family=Lemonada:wght@300;400;500;700&family=Orbitron:wght@400;700;900&family=ZCOOL+KuaiLe&display=swap');

@import url("../ver/verstyle.css");
/* version modal style */

:root {
    font-size          : 16px;
    --theme-color      : #17e1ea;
    --theme-background : #6d4ba0;
    --color-page       : linear-gradient(to bottom, #111, #1a1a1a);
    --color-text       : #111;
    --color-text2      : #ddd;
    --color-links      : #0dd;
    --color-links2     : #4169e1;
    --color-hlight     : #9c039c;
    --color-marker     : #6e5494;
    --background-light : #f7f7ff;
    --background-dark  : #050518;
    --background-header: linear-gradient(to bottom right, #05afaf 30%, #0595af);
    --background-footer: linear-gradient(to bottom right, #2b2233 30%, #3a2336);
    --background-button: #dde;
    --font-primary     : 'Source Code Pro', monaco, monospace;
    --font-secundary   : 'Poppins', 'AppleGothic', sans-serif;
    --font-link        : 'Roboto Mono', 'PT Sans', monospace;
    --font-link2       : 'Source Sans Pro', 'Roboto Condensed', courier;
    --font-heading     : 'Glory', "Book Antiqua", serif;
    --font-heading2    : 'Hachi Maru Pop', papyrus, cursive;
    --font-heading3    : 'Orbitron', 'Gill Sans', sans-serif;
    --font-detail      : Lemonada, 'Trebuchet MS', sans-serif;
    --font-marker      : 'Lobster Two', 'Brush Script MT', cursive;
    --font-logo        : 'ZCOOL KuaiLe', herculanum, fantasy, copperplate;
}

/* Defaults */

* {
    padding   : 0;
    margin    : 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    min-height     : 100vh;
}

html::-webkit-scrollbar{
    width: .1rem;
    background-color: currentColor;
}
html::-webkit-scrollbar-thumb{
    background-color: var(--theme-background);
}

body {
    background : var(--color-page) no-repeat;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', var(--font-primary), sans-serif;
    width: 100%;
    max-width  : 55rem;
    margin     : auto;
    overflow-x : hidden;
}

h1,
h2,
h3 {
    font-family : var(--font-heading);
    font-variant: small-caps;
}

h4,
h5,
h6 {
    font-family: var(--font-heading2);
}

li {
    font-family: var(--font-link2);
    list-style : none;
}

a {
    font-family    : var(--font-link);
    text-decoration: none;
    color          : slateblue;
}


/* Basics */

#page-header,
#page-main,
#page-footer {
    position        : relative;
    background: var(--background-light);
    color           : var(--color-text);
    width           : 100%;
    min-height      : 100px;
}


.actived {
    background: var(--color-marker) !important;
}

.actived:hover {
    color : #0ee;
    border: none !important;
}

.content-onLoading {
    font     : 400 100% var(--font-detail);
    animation: onLoading 1s ease-in-out infinite alternate !important;
    filter   : grayscale(100%);
}

.img-wrapper {
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: .3em;
    margin: 0 auto;
}

@keyframes onLoading {
    to {
        opacity: .25;
    }
}

.zoom-in {
    position  : fixed;
    width     : 100%;
    height    : auto;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
    box-shadow: 0px 0px 10px black;
    cursor    : zoom-out;
    z-index   : 100;
}

/* PAGE-HEADER */

#page-header {
    position             : relative;
    background    : var(--background-header);
    display              : grid;
    grid-template-columns: auto 1fr;
    grid-template-rows   : auto auto;
    align-items          : center;
    font-size            : 1rem;
}

#page-header .logo {
    grid-row        : 1/3;
    height          : 5rem;
    min-width       : 5rem;
    max-width       : 5rem;
    margin          : .4em;
    padding         : 1em;
    overflow        : hidden;
    object-fit      : cover;
    background-color: black;
    border-radius   : 50%;
    user-select     : none;
}

#page-header .title {
    color      : var(--theme-background);
    margin-left: 2%;
}

#page-header .navigation {
    display: inline-block;
    text-align: center;
}

.logo img {
    width        : 100%;
    height       : 100%;
    border-radius: .4em;
}

.title h1 {
    font-family: var(--font-logo);
    color      : var(--color-hlight);
    margin-left: .5em;
    display    : inline-block;
}

.title h1::first-letter {
    color: var(--theme-color);
}

.title h1::selection {
    color: black;
}

.navigation nav {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

.menu__items {
    text-align: center;
}

.navigation .menu {
    display        : flex;
    flex           : 2;
    justify-content: space-evenly;
    align-items    : center;
}



.navigation .about-version {
    position  : relative;
    flex      : 1;
    text-align: right;
    align-self: center;
    font-size : .9em;
    color     : white;
    z-index   : 1;
    margin    : .5em 0;
}

.about-version #Version {
    position      : absolute;
    right         : 0;
    bottom        : 100%;
    font          : 700 3.5rem var(--font-marker);
    margin        : 0 1em 0 0;
    color         : transparent;
    user-select   : none;
    pointer-events: none;
    text-shadow   : 0px 0px 2px var(--color-hlight);
    transform     : skew(20deg, 0deg) rotateX(0deg);
    mix-blend-mode: hard-light;
    opacity       : .2;
    transition    : opacity 1s cubic-bezier(.5, .5, .4, 1.45) .5s;
}

.about-version:hover>#Version {
    opacity: 1;
}

.menu a {
    font          : 400 small-caps 1.1em var(--font-link);
    text-transform: lowercase;
    letter-spacing: .1em;
    font-variant  : small-caps;
    background    : #222;
    color         : var(--color-links);
    padding       : .3em;
    border-radius : .4em;
}

.about-version button {
    background-color: var(--color-text2);
    color           : var(--color-marker);
    font-family     : var(--font-link2);
    font-size       : medium;
    padding         : .3em;
    border-radius   : 15px;
    margin-right    : 1em;
    outline         : none;
    border          : none;
    cursor          : context-menu;
    box-shadow      : 0px 0px 2px rgba(0, 0, 0, 0.5);
    transition      : box-shadow .5s ease;
}

.about-version button:hover {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.navigation .menu a:hover {
    border-bottom: 2px solid #970597;
}

.navigation #menu-btn {
    display   : none;
    cursor    : pointer;
    opacity   : 1;
    transition: opacity .5s;
}

#menu-btn:hover {
    opacity: 1;
}


@media only screen and (max-width: 768px) {
    #page-header {
        display        : flex;
        justify-content: space-between;
    }

    #page-header .logo {
        padding      : .5em;
        border-radius: 30%;
        transition   : filter .5s, transform .75s;
    }

    #page-header .title {
        text-align: center;
    }

    .title h1 {
        display  : block;
        font-size: 200%;
    }

    .title h1:first-child {
        font-size   : 150%;
        font-variant: small-caps;
    }

    #page-header .navigation {
        display: block;
    }

    .navigation nav {
        display       : flex;
        position      : absolute;
        top           : 100%;
        left          : 0;
        width         : 100%;
        height        : 0;
        flex-direction: column;
        align-items   : center;
        background    : var(--background-dark);
        overflow      : hidden;
        z-index       : 10;
        transition    : height .5s ease;
    }

    .navigation .menu {
        display: block;
        width  : 100%;
        z-index: inherit;
        flex   : 90%;
    }

    .menu .menu__items {
        background-color: #111;
    }

    .menu .menu__items a {
        display      : inline-block;
        margin       : 0em;
        padding      : .5em;
        background   : transparent;
        font-size    : 125%;
        width        : 100%;
        border-radius: 0;
    }

    .menu .menu__items:nth-child(even) {
        background-color: #222;
    }

    .navigation .version {
        flex: 10%;
    }

    .version button {
        background-color: transparent;
        color           : var(--background-button);
        font-size       : 1.25em;
    }


    .navigation #menu-btn {
        display: block;
        margin : 3em;
    }

    #menu-switch:checked+nav {
        height: calc(100vh - 100%);
    }

    .navigation .menu {
        font-size: 90%;
    }

    .navigation .menu a:hover {
        border    : none;
        background: var(--background-footer);
    }

}

@media only screen and (max-width: 380px) {
    #page-header {
        justify-content: space-between;
        width: 100%;
        /* overflow-x: hidden; */
    }
    #page-header .logo {
        display: block;
        background: transparent;
        position: absolute;
        left: 0;
        transform: translateX(-50%) scale(1.5);
        filter: saturate(0);
        mix-blend-mode: screen;
        opacity: .5;
    }
    #page-header .title {
        flex: 2;
        flex-shrink: 2;
        font-size: 1.2em;
        width: 100%;
    }
    #page-header .navigation{
        flex: 1;
    }
    #page-header #menu-btn {
        width: auto;
    }

    @media only screen and (max-width: 260px){
        #page-header .title{
            display: none;
        }
        #page-header {
            justify-content: center;
            width: 100%;
        }
        #page-header .navigation{
            text-align: right;
        }
        #page-header .logo {
            transform: translateX(-50%) scale(3);
            image-rendering:optimizeQuality;
        }
    }
}




/* PAGE-MAIN */



#page-main {
    position  : relative;
    min-height: calc(100vh - 100px * 2);
    padding   : 1em 2em;
}

#page-main h1 {
    font-family: var(--font-heading2);
}
#page-main > h1{
    color: var(--theme-background);
}

#page-main>.intro {
    display   : block;
    max-width : 48em;
    margin    : auto;
    align-self: center;
}

#page-main span.intro:before {
    content: ' ';
}

#page-main>.intro h1 {
    margin-left: 2em;
}

#page-main>.intro p {
    font : 200 italic 1.1em var(--font-heading);
    color: #444;
}

/* PAGE-FOOTER */


#page-footer {
    color          : var(--color-text2);
    background     : var(--background-footer);
    display        : flex;
    flex-flow      : row wrap;
    justify-content: space-evenly;
    align-items    : center;
    font-size      : 14px;
}

#page-footer .social {
    flex      : 1;
    order     : 2;
    text-align: center;
}

#page-footer .utility-links {
    flex      : 1;
    order     : 1;
    text-align: center;
}

#page-footer .copyright {
    flex      : 1;
    order     : 3;
    font      : 200 .9em var(--font-secundary);
    text-align: center;
    opacity   : .9;
}

.copyright p::selection {
    color: var(--color-links);
}

.social a {
    margin        : 0 .5em;
    vertical-align: middle;
    opacity       : .7;
}

.social a:nth-child(1) {
    color: #4267B2;
    /*facebook color */
}

.social a:nth-child(2) {
    color: #f5f5f5;
}

.social a:nth-child(3) {
    color: #DB4437;
}

.social a:hover {
    opacity: 1;
}

.utility-links a {
    color         : var(--color-links);
    border-top    : 2px solid var(--color-text);
    border-bottom : 2px solid var(--color-text);
    padding       : .2em;
    font-size     : .8rem;
    border-radius : .5rem;
    vertical-align: middle;
}

.utility-links a:hover {
    background: rgba(151, 5, 151, 0.2);
}

@media only screen and (max-width: 768px) {
    #page-footer {
        flex-flow      : column wrap;
        justify-content: center;
        padding        : .2rem 0;
    }

    #page-footer .social {
        order: 1;
    }

    #page-footer .utility-links {
        order : 2;
        margin: 1em;
    }

    #page-footer .copyright {
        margin-bottom: 1em;
    }

    .social a {
        opacity: .9;
    }

    .utility-links a {
        border         : none;
        text-decoration: underline var(--color-marker);
    }

    .utility-links a:hover {
        background           : none;
        text-decoration-color: var(--color-hlight);
    }
}

@media only screen and (max-width: 420px){
    #page-footer .utility-links a{
        display: block;
    }
}

/* MODALS */

.modal {
    position       : fixed !important;
    width          : 100%;
    height         : 100%;
    left           : 0;
    top            : 0;
    z-index        : 100;
    opacity        : 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
    overflow       : hidden;
    visibility     : hidden;
    transition     : opacity .5s ease-out;
}

.modal.show {
    opacity   : 1;
    visibility: visible;
    transition: opacity .5s ease-in;
}

.modal .modal-body {
    background   : linear-gradient(to bottom, #f0ffff, #f5f5f5);
    border-radius: .5rem;
    width        : 40rem;
    max-width    : 40rem;
    min-height   : 30rem;
    max-height   : 75%;
    margin       : auto .6em;
    overflow     : auto;
}

.modal-body::-webkit-scrollbar {
    width                     : .4em;
    background                : var(--color-marker);
    border-bottom-right-radius: .5rem;
    border-top-right-radius   : .5rem;
}

.modal-body::-webkit-scrollbar-thumb {
    background                : var(--color-text);
    border-bottom-right-radius: .5rem;
    border-top-right-radius   : .5rem;
}

.modal .modal-closer {
    position     : absolute;
    top          : .4em;
    right        : .4em;
    border       : none;
    outline      : none;
    background   : none;
    color        : #DB4437;
    border-radius: 50%;
    text-shadow  : 1px 1px 2px hsla(0, 0%, 0%, 0.502);
    cursor       : pointer;
    z-index      : 100;
}

.modal.show .modal-closer {
    animation: attention-rotate 1.5s ease 1s infinite alternate;
}

/* IMAGE MODAL */

#image-modal {
    display        : flex;
    justify-content: center;
    align-items    : center;
    background     : radial-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.8));
    width          : 100%;
    height         : 100%;
    padding        : 0;
    user-select    : none;
    object-fit     : contain;
    object-position: 50% 50%;
}

#image-modal .image-modal__img {
    min-width          : 50%;
    max-width          : 95vw;
    max-height         : 95vh;
    /* transform       : scale(1.15); */
    image-rendering    : optimizeQuality;
    image-resolution   : from-image 300dpi;
    /* box-shadow      : 0px 0px .25em var(--background-button); */
    border-radius      : 4px;
    user-select        : none;
}

#image-modal .image-modal__description {
    position   : absolute;
    bottom     : 5%;
    left       : 0;
    width      : 100%;
    text-align : center;
    font-family: var(--font-marker);
    color      : var(--background-light);
    z-index    : inherit;
}


@keyframes attention-rotate {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(10deg);
    }
}

@media only screen and (max-width: 768px) {
    #image-modal {
        background : radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
        width      : 100%;
        height     : 100vh;
        padding    : 0;
        user-select: none;
    }
}