@font-face { font-family: "wendylatino"; src: url(fontes/wendylatino.ttf) format(truetype); }   
    @font-face { font-family: "lunnaymf1"; src: url(fontes/lunnaymf1.ttf) format(truetype); }
    @font-face { font-family: "lunnaycpt1"; src: url(fontes/lunnaycpt1.ttf) format(truetype); }
    @font-face { font-family: "lunnaycpt2"; src: url(fontes/lunnaycpt2.ttf) format(truetype); }
    @font-face { font-family: "lunnaypxld"; src: url(fontes/lunnaypxld.ttf) format(truetype); }
    @font-face { font-family: "lunnaypxld_wide"; src: url(fontes/lunnaypxld_wide.ttf) format(truetype); }
    @font-face { font-family: "lunnaymf2tiny"; src: url(fontes/lunnaymf2tiny.ttf) format(truetype); }
    @font-face { font-family: "nasin-nanpa"; src: url(fontes/nasin-nanpa-4.0.2.otf) format(truetype); }
    @font-face { font-family: "estrangeiro"; src: url(fontes/estrangeiro.ttf) format(truetype); }

    html {background-color: #000000; cursor: url('cursores/setinha.png'), auto;}

    .box_white{background-color: #C6C6C6; border-top: 4px solid white; border-left: 4px solid white; border-bottom: 4px solid #848484; border-right: 4px solid #848484;}
    .box_teal{background-color: #008080; border-top: 4px solid #2ABFAA; border-left: 4px solid #2ABFAA; border-bottom: 4px solid #004545; border-right: 4px solid #004545;}

    .language {cursor: url('cursores/pontano.png'), auto; padding: 9px; display: flex; place-self: center;}
    .language:hover{transform: translateY(1px); filter: brightness(110%);}
    .language:active{filter:brightness(90%);}
    #languagecontainer{
        display: flex;
        flex-direction: column;
        width: 150px;
        position: fixed; 
        padding: 10px;
        user-select: none;
        transform: translate(-114px, -4px);}
    #languagecontainer.visible { display: block !important; }        
    #languagecontainer p {font-family: "lunnaypxld_wide"; text-transform: uppercase; height: 5px;}
    .language-item {display: flex; justify-content: space-between; border-bottom: 2px solid #004545; padding: 5px; height: 30px; align-items: end;}
    .language-item:hover{background-color: #008b8b;} .language-item:active{transform: translateY(1px);}

    :root {
        --main: #008080;
        --sec: #A86561; 
    }

    .titlepage {
        background-color: var(--main);
        position: fixed;
        margin: auto auto auto auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        top: 0; right: 0; left: 0;
        padding: 20px;
        width: 1040px;
        height: 80px;
        z-index: 1;
    }
    .logo{padding: 20px; cursor: url('cursores/pontano.png'), auto;}
    .titledivider{width: 100px; height: 30px;
        background-image: url(content/divider.svg);
        background-size: 99px;
        background-repeat: no-repeat;
        background-position: center;}
    .content{
        transform: translateY(105px);
        padding-left: 40px;
        padding-right: 40px;
        width: 1000px;
        margin: auto auto auto auto;
        background-color: var(--main);}
    .content > div {display: flex; justify-content: space-between;}
    .titleitems{width: 500px; display: flex; justify-content: space-between;}
    .titlelanguage{justify-content: flex-end;}
    h2 {
        font-family: "lunnaypxld_wide";
        text-transform: uppercase;
        font-size: 1.2em;
        color: #ffffff;
        text-shadow:
        0px 1.5px 0 #000000,
        -1.5px 1.5px 0 #000000,
        1.5px 1.5px 0 #000000;
    }
    #backvideo {
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: -1;
        width: 100%;
    }
    p {
        font-family: "lunnaycpt1";
        font-size: 0.9em;
        color: #ffffff;
        line-height: 1.3em;
        text-shadow:
        0px 1.5px 0 #000000,
        -1.5px 1.5px 0 #000000,
        1.5px 1.5px 0 #000000;
        text-underline-offset: 8px;
    }
    .pxld {font-family: "lunnaypxld"; text-transform: uppercase;}
    .pxld_wide {font-family: "lunnaypxld_wide"; text-transform: uppercase;}

    p b { font-weight: bold; color: #ffffff; }
    p mark { color: white; background-color: #848484; }

    .button:hover { background-image: url(content/selectbar.svg);}
    .button:active { background: #008b8b; mix-blend-mode: darken; }
    
    .discord{transition-duration: 0.3s; background-color: #313338; height: 30px; margin: 25px auto; display: flex; align-items: center; justify-content: center;}
    .discord:hover{transition-duration: 0.3s; transform: scale(1.02, 1.02); filter: brightness(110%);}
    @keyframes copied-animation {
        0% { transform: translate(-50%, 0); }
        70% { opacity: 1; transform: translate(-50%, -20px);}
        100% { opacity: 0; transform: translate(-50%, -50px);}
    }
    .copied-message {
        position: absolute; left: 50%; bottom: calc(100% + 8px); color: white; background-color: #131313;
        padding: 8px 12px; font-family: "lunnaypxld_wide"; text-transform: uppercase; font-size: 0.9em;
        animation: copied-animation 1s ease-out forwards; pointer-events: none; white-space: nowrap;
    }

    .pics_cont {display: grid; place-items: center;}
    .pics{
        max-width: 1500px;
        width: 160%;
        margin: 40px;
        background-image: linear-gradient(to right,#00000000, var(--main), #00000000);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pic_frame{
        transition-duration: 0.3s;
        height: clamp(250px, 30vw, 350px);
        width: 350px;
        aspect-ratio: 1/1;
        /* border-top: 4px solid white;
        border-left: 4px solid white;
        border-bottom: 4px solid #848484;
        border-right: 4px solid #848484; */
        margin: 8px;
        filter: brightness(90%);
        user-select: none;
        display: flex; place-content: center; flex-wrap: wrap;
        
        background-position: center;
        background-size: cover;
        &:not(.disable):hover {
            cursor: url('cursores/lupa.png'), auto;
            transition-duration: 0.1s;
            transform: scale(1.02, 1.02);
            filter: brightness(100%);
        }   
    }
    .pic_title {justify-self: left;}
    .pics img {pointer-events: none;}
    .sectionbtn {height: 20px; padding: 10px; text-wrap: nowrap; display: flex; align-items: center; border-bottom: 0px solid; transform: translateY(4px); user-select: none;}
    .selected_sb, .sectionbtn:hover {border: 4px solid white; border-bottom: 0px solid; transform: translateY(0px);
    &:not(.selected_sb):hover {transform: translateY(4px); cursor: url('cursores/pontano.png'), auto;}}
    .sectionbar {position: absolute; width: 92.6%; height: 2px; background-color: #004545; border-bottom: #2abfaa 2px solid;}

    .textinfo3{display: flex; flex-direction: column;}
    .half{width: 165px; height: 165px;}
    .wide{width: 500px;} .wider{width: 870px;}
    .wide-y{height: 500px;} .wider-y{height: 870px;}
    .zup {background-position: top;} .zdown {background-position: bottom;}
    .zleft {background-position: left;} .zright {background-position: right;}
    .zfit {background-size: contain; background-repeat: no-repeat; background-color: #848484;}
    hr{
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        border-left: 2px solid #000000;
        border-right: 2px solid #000000;
        border-bottom: 2px solid #000000;
    }
    .textinfo1 {display: flex; align-items: flex-end; justify-content: flex-end; text-wrap: nowrap;}
    .textinfo2 {background-color: #00000090; font-size: 0.8em; position: absolute; z-index: 1; padding: 5px; text-align: end; max-width: 350px; text-wrap-mode: wrap;}
    .footer{width: 100%; height: 200px; background-color: #131313; transform: translateY(200px);} 
    
    @media only screen and (max-width: 1500px){.pics{width: 120%;} .textinfo3{flex-direction: row;}}
    @media only screen and (max-width: 1200px){.pics{width: 95%; margin: 20px auto;} .pic_frame{width: clamp(200px, 40vw, 300px)} .textinfo3{flex-direction: column;}}

    @media only screen and (max-width: 1200px){
        html{background-color: var(--main); margin: 0px;}
        body{background-color: var(--main); margin: 0px;}
        #backvideo{ display: none;}
        .titlepage{width: 100%; padding: 0px; justify-content: space-evenly;}
        .content{width: 100%; transform: translateY(70px);}
        .titledivider{width: 100%;}
        .footer{display: none;}
    }
    @media only screen and (max-width: 700px) {
        .titledivider, .titleitems{display: none;}
        .textinfo3{flex-direction: row;}
        .content > div {display: grid; justify-content: center; justify-items: center; text-align: center;}
        .wide, .wider, .wide-y, .wider-y {width: 350px; height: 350px;}
        .pic_frame {width: 80%; max-width: 300px; border: 0px; margin: 0px;} .pics {width: 100%; margin: 10px 0;}
    }
    @media only screen and (max-width: 400px) {
        .content #intro {width: auto;}
    }

    /* .audio_player{
        background-color: #C6C6C6;
        border-left: 4px white solid; border-top: 4px white solid;
        border-right: 4px #666666 solid; border-bottom: 4px #848484 solid;
        box-shadow: 0px 0px 0px 2px;
        width: 288px; height: 176px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;}
    .volumepopout{display: inline-flex; align-items: center; position: fixed; background-color: #C6C6C6; border-bottom: 2px white solid; border-left: 2px#666666 solid; border-top: 2px#666666 solid; width: 100px; height: 36px;}
    .audio_button{width: 100%; height: 64px; display: flex; justify-content: space-between; align-items: center;} 
    .audio_font{height: 2px; margin: 14px; color: #00FF00; transform: translateY(-7px); font-family: 'wendylatino'; text-transform: uppercase; text-wrap: nowrap; text-shadow: 0 0 8px #00FF00;}
    .audio_timeline{width: 100%; height: 18px; display: flex; align-items: center; border-left: 2px #666666 solid; border-top: 2px #666666 solid; border-right: 2px white solid; border-bottom: 2px white solid;}
    .a_button{background-image: url(content/audioplayer/player_buttons.svg); background-color: black; background-size: cover; width: 46px; height: 40px; cursor: url(cursores/pontano.png), auto;}
    .a_button:hover{background-color: #00FF00; box-shadow: inset 0px 0px 5px 2px #00ff0080} .a_button:active{background-image: url(content/audioplayer/player_buttons_pressed.svg); box-shadow: 0px 0px 0px transparent;}
    #draggable {cursor: url(cursores/pontano.png), auto;} */

    .overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        display: flex; justify-content: center; align-items: center;
        z-index: 10000; opacity: 0; visibility: hidden;
        transition: 0.3s ease, 0.3s ease; user-select: none;
    }
    .overlay-img {
        max-width: 95%; max-height: 95%; min-width: 35%;
        object-fit: contain; pointer-events: none;
        transform: scale(0.95); transition: 0.3s ease;
    }
    .overlay.active { opacity: 1; visibility: visible; }
    .overlay.active .overlay-img {  transform: scale(1); }
    body.overlay-active { overflow: hidden; position: relative; height: 100%; }

    .estrangeiro-mode *:not(i):not(.fa):not(.material-icons) {
        font-family: "estrangeiro", sans-serif;
        font-size: 1.02em; color: #00FF00;
    }
    .estrangeiro-mode .titlepage img { filter: sepia(100%) saturate(20) hue-rotate(45deg);}
    .estrangeiro-mode hr { background-color: #00FF00;}
    .estrangeiro-mode .language-item,
    .estrangeiro-mode .language-item p {
        font-family: "lunnaypxld_wide" !important; font-size: 0.9em !important;
    }
    .estrangeiro-mode #est {display: none !important;}
    .estrangeiro-mode body { line-height: 1.6; letter-spacing: 0.05em; }
    .estrangeiro-mode .titlepage, .estrangeiro-mode #languagecontainer{ background-color: #030303; border: 0px solid;}
    .estrangeiro-mode .content, .estrangeiro-mode .pics {background-color: transparent; background-image: none;}

    .estrangeiro-mode h1,
    .estrangeiro-mode h2,
    .estrangeiro-mode h3 {
        font-family: "estrangeiro-caps", serif;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }
    .estrangeiro-mode .sectionbtn {background-color: black; border: transparent 4px solid;}
    .estrangeiro-mode .sectionbar {background-color: black; border-bottom: #00FF00 2px solid;}
    .estrangeiro-mode .sectionbtn:hover {border: 4px solid #00FF00; border-bottom: 0px solid;}