/* colors */
:root {
    --main-background: #3a232e;
    --dark-screen: #1d1d1dbe;
    --wood-screen: #4b3c36de;
    --text-white: #e6dac4;
    --text-dark:#1d1d1d;
    --footer-color: #DA4666;

    /* pastels */
    --pink-pastel: #eaadb9;
    --magenta-pastel: #dfb5da;
    --purple-pastel: #bfaddb;
    --blue-pastel: #aaade5;
    --cyan-pastel: #96c8cc;
    --green-pastel: #9bcb94;
    --lemon-pastel: #bfcf8f;
    --yellow-pastel: #f4df9b;
    --orange-pastel: #efb37a;

    /* muted/elegants */
    --pink-elegant: #c0838f;
    --magenta-elegant: #c186ba;
    --purple-elegant: #947abe;
    --blue-elegant: #7a7ebe;
    --cyan-elegant: #76abae;
    --green-elegant: #9bcb94;
    --lemon-elegant: #97a373;
    --yellow-elegant: #dbc169;
    --orange-elegant: #c79464;

    /* candy */
    --pink-candy: #f08ca0;
    --magenta-candy: #ef95e4;
    --purple-candy: #b28fec;
    --blue-candy: #8086f2;
    --cyan-candy: #76d0d6;
    --green-candy: #82d176;
    --lemon-candy: #b9d466;
    --yellow-candy: #efcd5e;
    --orange-candy: #f0a259;

    /* dark */
    --pink-dark: #5f232f;
    --magenta-dark: #552c4f;
    --purple-dark: #4a2b5f;
    --blue-dark: #2c2e55;
    --cyan-dark: #2a5558;
    --green-dark: #33532e;
    --lemon-dark: #4a552a;
    --yellow-dark: #504624;
    --orange-dark: #49321d;
}

/* fonts */
@font-face {
    font-family: Belanidi;
    src: url("../fonts/belanidi.otf") format("opentype");
}
@font-face {
    font-family: WorkSans;
    src: url("../fonts/work_sans.ttf") format("truetype");
}
@font-face {
    font-family: WorkItalicSans;
    src: url("../fonts/work_sans_italic.ttf") format("truetype");
}
@font-face {
    font-family: Rosarivo;
    src: url("../fonts/Rosarivo-Regular.ttf") format("truetype");
}
@font-face {
    font-family: Pixelify;
    src: url("../fonts/pixelify.ttf") format("truetype");
}
@font-face {
    font-family: Jacquard;
    src: url("../fonts/jacquard12.ttf") format("truetype");
}
@font-face {
    font-family: JacquardBastard;
    src: url("../fonts/jacquardbastard.ttf") format("truetype");
}

@font-face {
    font-family: Playwrite;
    src: url("../fonts/PlaywriteIE-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: Comforta;
    src: url("../fonts/Comfortaa-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: ComicR;
    src: url("../fonts/ComicRelief-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Hiperlegible;
    src: url("../fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: Xanh;
    src: url("../fonts/XanhMono-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Kode;
    src: url("../fonts/KodeMono-VariableFont_wght.ttf") format("truetype");
}

/* 8<--------------------------------- */

/* basics */

html{
    background-color: var(--main_background);
    background-image: url("../images/backgrounds/stars_mini.webp");
    background-size: 100% auto;   
    background-repeat: repeat-y; 
    background-position: top left;
    margin: 0;
    padding: 0;  
    font-size: calc(1.5vw); 
}



body{
    margin: 0;
    padding: 0;
    width: 100%;
}

main{
    margin: 0 auto;
    padding: 0 auto;
    width: 80%;
}

a{
    height: fit-content !important;
    width: fit-content !important;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
}

a .medieval{
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
}

img,picture,video {
  max-width: 100%;
}

@media (orientation:portrait) or (max-width: 767px){
    html{
        width: 100% !important;
    }

    main{
        width: 90dvw !important;
    }
}

/* font management*/
*{
    font-family: 'WorkSans', Tahoma, Geneva, Verdana, sans-serif;
}

p{
    font-size: large !important;
}
li{
    font-size: large !important;
}
i{
    font-family: 'WorkItalicSans', 'WorkSans', Tahoma, Geneva, Verdana, sans-serif;
    font-size: large;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Rosarivo','WorkSans', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif!important;
}

/* text */

.pixelify{
    font-family: 'Pixelify', fantasy !important;
}
.medieval{
    font-family: 'Jacquard', fantasy !important;
    font-weight:normal !important;
    font-size: 300%;
    
}
.medievalmini{
    font-family: 'JacquardBastard', fantasy !important;
    font-weight:normal !important;
}
.quill{
    font-family:'Rosarivo','WorkSans', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif!important;
}
.elegant{
    font-family:'Playwrite','Rosarivo','WorkSans', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif!important;
}
.roundy{
    font-family:'Comforta','WorkSans', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif!important;
}
.comic{
    font-family:'ComicR', Comic, Arial, sans-serif!important;
}
.code{
    font-family: 'Hiperlegible', monospace !important;
}
.square_code{
    font-family: 'Kode', monospace !important;
}
.elegant_code{
    font-family: 'Xanh', monospace !important;
}

.susurro{
    font-size: 70% !important;
}

/* text size */

.biggest_letters{
    font-size: 360% !important;
}

.biggest_letters.medieval{
    font-size: 420% !important;
}

.big_letters{
    font-size: 200% !important;
}

.big_letters.medieval{
    font-size: 240% !important;
}

.mid_letters{
    font-size: 150% !important;
}

.normal_letters{
    font-size: 100% !important;
}

.no_padding{
    padding: 0;
    margin: 0;
}

p .medieval{
        font-size: 200%  !important;
    }

@media (orientation:portrait){
    p{
        font-size: calc(4vw) !important; 
    }
    .medieval{
        font-size: 400%;
    }
    .susurro{
        font-size: 85% !important;
    }
    .biggest_letters{
        font-size: 800% !important;
    }

    .biggest_letters.medieval{
        font-size: 900% !important;
    }

    .big_letters{
        font-size: 600% !important;
    }

    .big_letters.medieval{
        font-size: 400% !important;
    }

    .mid_letters{
    font-size: 250% !important;
    }

    li{
        font-size: 250%  !important;
    }

    li li{
        font-size: 100%  !important;
    }

}

/* text color */

.ink_puro{
    color: var(--text-white);
}
.ink_pink{
    color: var(--pink-pastel);
}
.ink_magenta{
    color: var(--magenta-pastel);
}
.ink_purple{
    color: var(--purple-pastel);
}
.ink_blue{
    color: var(--blue-pastel);
}
.ink_cyan{
    color: var(--cyan-pastel);
}
.ink_green{
    color: var(--green-pastel);
}
.ink_lemon{
    color: var(--lemon-pastel);
}
.ink_yellow{
    color: var(--yellow-pastel);
}
.ink_orange{
    color: var(--orange-pastel);
}


.ink_puro.brigth{
    color: var(--text-dark);
}
.ink_pink.brigth{
    color: var(--pink-dark);
}
.ink_magenta.brigth{
    color: var(--magenta-dark);
}
.ink_purple.brigth{
    color: var(--purple-dark);
}
.ink_blue.brigth{
    color: var(--blue-dark);
}
.ink_cyan.brigth{
    color: var(--cyan-dark);
}
.ink_green.brigth{
    color: var(--green-dark);
}
.ink_lemon.brigth{
    color: var(--lemon-dark);
}
.ink_yellow.brigth{
    color: var(--yellow-dark);
}
.ink_orange.brigth{
    color: var(--orange-dark);
}

.pastel,.glass,.smoke,.candy{
    border: none;
}

.pastel{
    background-color: var(--text-white);
}
.pastel.pink{
    background-color: var(--pink-pastel);
}
.pastel.magenta{
    background-color: var(--magenta-pastel);
}
.pastel.purple{
    background-color: var(--purple-pastel);
}
.pastel.blue{
    background-color: var(--blue-pastel);
}
.pastel.cyan{
    background-color: var(--cyan-pastel);
}
.pastel.green{
    background-color: var(--green-pastel);
}
.pastel.lemon{
    background-color: var(--lemon-pastel);
}
.pastel.yellow{
    background-color: var(--yellow-pastel);
}
.pastel.orange{
    background-color: var(--orange-pastel);
}


/* text decor and orientation */

.crayon{
    -webkit-text-stroke: 0.05rem currentColor;
}

.plumon{
    text-shadow: 0px 0px 0.5rem currentColor;
    -webkit-text-stroke: 0.02rem color-mix(in srgb, currentColor 80%, transparent);
}

.tags{
    display: none!important;
}

.a_der{
    text-align: right !important;
    padding-left: 7% !important;
}

.a_izq{
    text-align: left !important;
    padding-right: 7% !important;
}

.a_cent{
    text-align: center !important;
    align-self: center !important;
    padding-right: 7% !important;
}

/* 8<--------------------------------- */

/* banners */

.banner{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 30vh;
    background-color: color-mix(in srgb, var(--pink-candy) 80%, transparent);
    justify-content: space-around;
    align-items: center;
    border-radius: 5vh;
}

.banner img{
    height: 20vh;
    padding: 5vh;
    aspect-ratio: 1/1;
}

.working.banner{
    background-color: color-mix(in srgb, var(--yellow-candy) 80%, transparent);
}

@media (orientation:portrait){
    .banner{
        height: 10vh;
        border-radius: 2vh;
    }
    .banner img{
        height: 8vh;
        padding: 1vh;
    }
}

/* 8<--------------------------------- */


/* Image buttons */
.image_button {
    aspect-ratio: 1/1;
    max-width: 100% !important;
    cursor: pointer;
    background: transparent;
    border: none !important;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: auto 100%;
    align-self: center;
    padding: 0;
    margin: 0;
    color: rgba(244, 255, 215, 0);
    font-size: large;
    font-weight: bold;
    font-family: "Rosarivo", cursive !important;
}
.image_button:hover {
    background-position: top center;
}
.image_button:focus {
    background-position: top right;
    display: inline-block;
    animation:pulsar 5s infinite ease;
}

@media (orientation:portrait) or (max-width: 767px){
    .image_button {
        min-width: 5rem;
        max-width: 16rem;
    }
    
}

/* By space */
.image_button.grimorio{
    background-image: url('../images/buttons/grimorio.png');
}
.image_button.caldero{
    background-image: url('../images/buttons/caldero.png');
}
.image_button.forja{
    background-image: url('../images/buttons/forja.png');
}
.image_button.home{
    background-image: url('../images/buttons/home.png');
}
.image_button.contact{
    background-image: url('../images/buttons/contact.png');
}

/* 3d */
.image_button.printing{
    background-image: url('../images/buttons/3dprint.png');
}
.image_button.animate{
    background-image: url('../images/buttons/animate.png');
}
.image_button.texture{
    background-image: url('../images/buttons/texture.png');
}
.image_button.model{
    background-image: url('../images/buttons/model.png');
}
.image_button.render{
    background-image: url('../images/buttons/render.png');
}

/* dev */
.image_button.datasci{
    background-image: url('../images/buttons/datasci.png');
}
.image_button.gamedev{
    background-image: url('../images/buttons/gamedev.png');
}
.image_button.python{
    background-image: url('../images/buttons/python.png');
}
.image_button.webdev{
    background-image: url('../images/buttons/webdev.png');
}

/* blog */
.image_button.art{
    background-image: url('../images/buttons/art.png');
}
.image_button.ciber{
    background-image: url('../images/buttons/ciber.png');
}
.image_button.compsci{
    background-image: url('../images/buttons/compsci.png');
}
.image_button.gaming{
    background-image: url('../images/buttons/gaming.png');
}
.image_button.magic{
    background-image: url('../images/buttons/magic.png');
}
.image_button.maths{
    background-image: url('../images/buttons/maths.png');
}
.image_button.plan{
    background-image: url('../images/buttons/plan.png');
}
.image_button.pop{
    background-image: url('../images/buttons/pop.png');
}
.image_button.roko{
    background-image: url('../images/buttons/roko.png');
}
.image_button.story{
    background-image: url('../images/buttons/story.png');
}
.image_button.tops{
    background-image: url('../images/buttons/tops.png');
}

/* shop */
.image_button.atelier{
    background-image: url('../images/buttons/shop.png');
}
.image_button.kofi{
    background-image: url('../images/buttons/cafe.png');
}
.image_button.cults3d{
    background-image: url('../images/buttons/cults3d.png');
}
.image_button.thingy{
    background-image: url('../images/buttons/thingy.png');
}

.image_button.shop_accs{
    background-image: url('../images/buttons/accs.webp');
}
.image_button.shop_toys{
    background-image: url('../images/buttons/toys.webp');
}
.image_button.shop_tools{
    background-image: url('../images/buttons/tools.webp');
}
.image_button.shop_boxes{
    background-image: url('../images/buttons/boxes.webp');
}

.image_button.guide{
    background-image: url('../images/buttons/blog.webp');
}
.image_button.stationary{
    background-image: url('../images/buttons/plan.webp');
}
.image_button.others{
    background-image: url('../images/buttons/others.webp');
}
.image_button.softw{
    background-image: url('../images/buttons/dev.webp');
}
.image_button.commis{
    background-image: url('../images/buttons/art.webp');
}

/* social */
.image_button.insta{
    background-image: url('../images/buttons/insta.png');
}
.image_button.reddit{
    background-image: url('../images/buttons/reddit.png');
}
.image_button.ytube{
    background-image: url('../images/buttons/ytube.png');
}
.image_button.tiktok{
    background-image: url('../images/buttons/tiktok.webp');
}

/* 8<--------------------------------- */

/* overlays */

.page{
    height: 90vh;
    max-height: 100vh;
    margin: 5vh 0;
    width: 100%;
}

@media (orientation:portrait){
    .page{
    height: fit-content;
    max-height: fit-content;
    margin: 5vh 0;
    width: 100%;
}
}

.page.only_pc{
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;
}

.overlay_container{
    display: grid;
    max-height: 90vh;
    grid-template-rows: 100%;
    align-self: center;
}

.overlay,.overlay_content{
    grid-area: 1/1 !important;
    grid-column: 1;
    grid-row: 1;

}

.overlay_content .content{
    overflow-y: auto;
}

.overlay{
    pointer-events: none;
}

.pc.overlay_container{
    aspect-ratio: 1/1;
}

.pc.overlay_content.grided_screen .content{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    padding: 5%;
    column-gap: 4%;
}

.pc.overlay_content{
    aspect-ratio: 4/3;
    width: 83%;
    margin-top: 9%;
    margin-left: 8.5%;
    overflow-y: auto;
    display: grid;
    grid-template-rows: 80% 20%;
}

.pc.overlay_content img{
    width: 100%;
    height: auto;
}

.mouse{
    display: inline-block;
    animation: mouse 3s infinite ease;
    overflow: hidden;
}

/* 8<--------------------------------- */

/* animations */

.sprite{
    object-fit: cover!important;
    object-position: 0;
}

.sprite.square{
    object-fit: cover!important;
    aspect-ratio: 1/1 !important;
    object-position: 14.2%;
}

.sprite.square.charleston{
    display: inline-block !important;
    animation: charleston 5s infinite linear!important;
}



@keyframes charleston{
    0%{
        object-position: 0;
    }
    12.49%{
        object-position: 0;
    }
    12.5%{
        object-position: 14.28%;
    }
    24.99%{
        object-position: 14.28%;
    }
    25%{
        object-position: 28.57%;
    }
    37.49%{
        object-position: 28.57%;
    }
    37.5%{
        object-position: 42.85%;
    }
    49.99%{
        object-position: 42.85%;
    }
    50%{
        object-position: 57.14%;
    }
    62.49%{
        object-position: 57.14%;
    }
    62.5%{
        object-position: 71.42%;
    }
    74.99%{
        object-position: 71.42%;
    }
    75%{
        object-position: 85.71%;
    }
    87.49%{
        object-position: 85.71%;
    }
    87.5%{
        object-position: 100%;
    }
    100%{
        object-position: 100%;
    }
}

/* 8<--------------------------------- */

/* gradients */

.gradient.pink{
    background: var(--pink-candy);
    background: linear-gradient(180deg,
            var(--pink-candy) 5%, 
            var(--magenta-candy) 95%);
    scrollbar-color:  var(--pink-candy) var(--magenta-elegant) ;
}
.gradient.pink.glass{
    background: color-mix(in srgb, var(--pink-candy) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--pink-candy) 80%, transparent) 5%, 
            color-mix(in srgb, var(--magenta-candy) 80%, transparent) 95%);
}
.gradient.pink.pastel{
    background: var(--pink-pastel);
    background: linear-gradient(180deg,
            var(--pink-pastel) 5%, 
            var(--magenta-pastel) 95%);
}
.gradient.pink.pastel.glass{
    background: color-mix(in srgb, var(--pink-pastel) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--pink-pastel) 80%, transparent) 5%, 
            color-mix(in srgb, var(--magenta-pastel) 80%, transparent) 95%);
}

.gradient.magenta{
    background: var(--magenta-candy);
    background: linear-gradient(180deg,
            var(--magenta-candy) 5%, 
            var(--purple-candy) 95%);
    scrollbar-color:  var(--magenta-candy) var(--purple-elegant) ;
}
.gradient.magenta.glass{
    background: color-mix(in srgb, var(--pmagentacandy) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--magenta-candy) 80%, transparent) 5%, 
            color-mix(in srgb, var(--purple-candy) 80%, transparent) 95%);
}
.gradient.magenta.pastel{
    background: var(--magenta-pastel);
    background: linear-gradient(180deg,
            var(--magenta-pastel) 5%, 
            var(--purple-pastel) 95%);
}
.gradient.magenta.pastel.glass{
    background: color-mix(in srgb, var(--magenta-pastel) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--magenta-pastel) 80%, transparent) 5%, 
            color-mix(in srgb, var(--purple-pastel) 80%, transparent) 95%);
}

.gradient.purple{
    background: var(--purple-candy);
    background: linear-gradient(180deg,
            var(--purple-candy) 5%, 
            var(--blue-candy) 95%);
    scrollbar-color:  var(--purple-candy) var(--blue-elegant) ;
}
.gradient.purple.glass{
    background: color-mix(in srgb, var(--purple-candy) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--purple-candy) 80%, transparent) 5%, 
            color-mix(in srgb, var(--blue-candy) 80%, transparent) 95%);
}
.gradient.purple.pastel{
    background: var(--purple-pastel);
    background: linear-gradient(180deg,
            var(--purple-pastel) 5%, 
            var(--bluepastely) 95%);
}
.gradient.purple.pastel.glass{
    background: color-mix(in srgb, var(--purple-pastel) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--purple-pastel) 80%, transparent) 5%, 
            color-mix(in srgb, var(--blue-pastel) 80%, transparent) 95%);
}

.gradient.blue{
    background: var(--blue-candy);
    background: linear-gradient(180deg,
            var(--blue-candy) 5%, 
            var(--cyan-candy) 95%);
    scrollbar-color:  var(--blue-candy) var(--cyan-elegant) ;
}
.gradient.blue.glass{
    background: color-mix(in srgb, var(--blue-candy) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--blue-candy) 80%, transparent) 5%, 
            color-mix(in srgb, var(--cyan-candy) 80%, transparent) 95%);
}
.gradient.blue.pastel{
    background: var(--blue-pastel);
    background: linear-gradient(180deg,
            var(--blue-pastel) 5%, 
            var(--cyan-pastel) 95%);
}
.gradient.blue.pastel.glass{
    background: color-mix(in srgb, var(--blue-pastel) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--blue-pastel) 80%, transparent) 5%, 
            color-mix(in srgb, var(--cyan-pastel) 80%, transparent) 95%);
}

.gradient.green{
    background: var(--green-candy);
    background: linear-gradient(180deg,
            var(--green-candy) 5%, 
            var(--lemon-candy) 95%);
    scrollbar-color:  var(--green-candy) var(--lemon-elegant) ;
}
.gradient.green.glass{
    background: color-mix(in srgb, var(--green-candy) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--green-candy) 80%, transparent) 5%, 
            color-mix(in srgb, var(--lemon-candy) 80%, transparent) 95%);
}
.gradient.green.pastel{
    background: var(--green-pastel);
    background: linear-gradient(180deg,
            var(--green-pastel) 5%, 
            var(--lemon-pastel) 95%);
}
.gradient.green.pastel.glass{
    background: color-mix(in srgb, var(--green-pastel) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--green-pastel) 80%, transparent) 5%, 
            color-mix(in srgb, var(--lemon-pastel) 80%, transparent) 95%);
}

.gradient.lemon{
    background: var(--lemon-candy);
    background: linear-gradient(180deg,
            var(--lemon-candy) 5%, 
            var(--yellow-candy) 95%);
    scrollbar-color:  var(--lemon-candy) var(--yellow-elegant) ;
}
.gradient.lemon.glass{
    background: color-mix(in srgb, var(--lemon-candy) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--lemon-candy) 80%, transparent) 5%, 
            color-mix(in srgb, var(--yellow-candy) 80%, transparent) 95%);
}
.gradient.lemon.pastel{
    background: var(--lemon-pastel);
    background: linear-gradient(180deg,
            var(--lemon-pastel) 5%, 
            var(--yellow-pastel) 95%);
}
.gradient.lemon.pastel.glass{
    background: color-mix(in srgb, var(--lemon-pastel) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--lemon-pastel) 80%, transparent) 5%, 
            color-mix(in srgb, var(--yellow-pastel) 80%, transparent) 95%);
}

.gradient.yellow{
    background: var(--yellow-candy);
    background: linear-gradient(180deg,
            var(--yellow-candy) 5%, 
            var(--orange-candy) 95%);
    scrollbar-color:  var(--yellow-candy) var(--orange-elegant) ;
}
.gradient.yellow.glass{
    background: color-mix(in srgb, var(--yellow-candy) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--yellow-candy) 80%, transparent) 5%, 
            color-mix(in srgb, var(--orange-candy) 80%, transparent) 95%);
}
.gradient.yellow.pastel{
    background: var(--yellow-pastel);
    background: linear-gradient(180deg,
            var(--yellow-pastel) 5%, 
            var(--orange-pastel) 95%);
}
.gradient.yellow.pastel.glass{
    background: color-mix(in srgb, var(--yellow-pastel) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--yellow-pastel) 80%, transparent) 5%, 
            color-mix(in srgb, var(--orange-pastel) 80%, transparent) 95%);
}

.gradient.sunset{
    background: var(--orange-candy);
    background: linear-gradient(180deg,
            var(--purple-candy) 5%, 
            var(--pink-candy) 35%, 
            var(--orange-candy) 65%, 
            var(--yellow-candy) 95%);
    scrollbar-color:  var(--purple-candy) var(--purple-elegant) ;
}
.gradient.sunset.glass{
    background: color-mix(in srgb, var(--orange-candy) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--purple-candy) 80%, transparent) 5%, 
            color-mix(in srgb, var(--pink-candy) 80%, transparent) 35%, 
            color-mix(in srgb, var(--orange-candy) 80%, transparent) 65%, 
            color-mix(in srgb, var(--yellow-candy) 80%, transparent) 95%);
}
.gradient.sunset.pastel{
    background: var(--orange-pastel);
    background: linear-gradient(180deg,
            svar(--purple-pastel) 5%, 
            var(--pink-pastel) 35%, 
            var(--orange-pastel) 65%, 
            var(--yellow-pastel) 95%);
}
.gradient.sunset.pastel.glass{
    background: color-mix(in srgb, var(--orange-pastel) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--purple-pastel) 80%, transparent) 5%, 
            color-mix(in srgb, var(--pink-pastel) 80%, transparent) 35%, 
            color-mix(in srgb, var(--orange-pastel) 80%, transparent) 65%, 
            color-mix(in srgb, var(--yellow-pastel) 80%, transparent) 95%);
}

.gradient.fresh{
    background: var(--lemon-candy);
    background: linear-gradient(180deg,
            var(--cyan-candy) 5%, 
            var(--green-candy) 35%, 
            var(--lemon-candy) 65%, 
            var(--yellow-candy) 95%);
}
.gradient.fresh.glass{
    background: color-mix(in srgb, var(--lemon-candy) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--cyan-candy) 80%, transparent) 5%, 
            color-mix(in srgb, var(--green-candy) 80%, transparent) 35%, 
            color-mix(in srgb, var(--lemon-candy) 80%, transparent) 65%, 
            color-mix(in srgb, var(--yellow-candy) 80%, transparent) 95%);
}
.gradient.fresh.pastel{
    background: var(--lemon-pastel);
    background: linear-gradient(180deg,
            var(--cyan-pastel) 5%, 
            var(--green-pastel) 35%, 
            var(--lemon-pastel) 65%, 
            var(--yellow-pastel) 95%);
}
.gradient.fresh.pastel.glass{
    background: color-mix(in srgb, var(--lemon-pastel) 80%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--cyan-pastel) 80%, transparent) 5%, 
            color-mix(in srgb, var(--green-pastel) 80%, transparent) 35%, 
            color-mix(in srgb, var(--lemon-pastel) 80%, transparent) 65%, 
            color-mix(in srgb, var(--yellow-pastel) 80%, transparent) 95%);
}

/* bars */

.window_bar{
    scrollbar-width: thin;
}
.window_bar.icon_bar{
    height: 100%;
    display: inline-flex;
    width: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: auto;
    column-gap: 0.5rem;
}

.window_bar.icon_bar .icon{
    aspect-ratio: 1/1 !important;
    
}

.window_bar.icon_bar .spacer{
    width:4rem !important;
}

.window_bar.icon_bar > a{
    height: 100% !important;
    width: auto !important;
    flex-shrink: 0!important;
}

.window_bar.icon_bar > a > img{
    height: 80%;
    width: auto;
    padding-top: 10%;
}

.window_bar.pink{
    background: var(--pink-candy);
    background: linear-gradient(0deg,
                                var(--pink-elegant) 10%, 
                                var(--pink-candy) 30%, 
                                var(--pink-candy) 70%, 
                                var(--pink-pastel) 90%);
    scrollbar-color:  var(--pink-candy) var(--pink-elegant) ;
}
.window_bar.magenta{
    background: var(--magenta-candy);
    background: linear-gradient(0deg,
                                var(--magenta-elegant) 10%, 
                                var(--magenta-candy) 30%, 
                                var(--magenta-candy) 70%, 
                                var(--magenta-pastel) 90%);
    scrollbar-color:  var(--magenta-candy) var(--magenta-elegant) ;
}
.window_bar.purple{
    background: var(--purple-candy);
    background: linear-gradient(0deg,
                                var(--purple-elegant) 10%, 
                                var(--purple-candy) 30%, 
                                var(--purple-candy) 70%, 
                                var(--purple-pastel) 90%);
    scrollbar-color:  var(--purple-candy) var(--purple-elegant) ;
}
.window_bar.blue{
    background: var(--blue-candy);
    background: linear-gradient(0deg,
                                var(--blue-elegant) 10%, 
                                var(--blue-candy) 30%, 
                                var(--blue-candy) 70%, 
                                var(--blue-pastel) 90%);
    scrollbar-color:  var(--blue-candy) var(--blue-elegant) ;
}
.window_bar.cyan{
    background: var(--cyan-candy);
    background: linear-gradient(0deg,
                                var(--cyan-elegant) 10%, 
                                var(--cyan-candy) 30%, 
                                var(--cyan-candy) 70%, 
                                var(--cyan-pastel) 90%);
    scrollbar-color:  var(--cyan-candy) var(--cyan-elegant) ;
}
.window_bar.green{
    background: var(--green-candy);
    background: linear-gradient(0deg,
                                var(--green-elegant) 10%, 
                                var(--green-candy) 30%, 
                                var(--green-candy) 70%, 
                                var(--green-pastel) 90%);
    scrollbar-color:  var(--green-candy) var(--green-elegant) ;
}
.window_bar.lemon{
    background: var(--lemon-candy);
    background: linear-gradient(0deg,
                                var(--lemon-elegant) 10%, 
                                var(--lemon-candy) 30%, 
                                var(--lemon-candy) 70%, 
                                var(--lemon-pastel) 90%);
    scrollbar-color:  var(--lemon-candy) var(--lemon-elegant) ;
}
.window_bar.yellow{
    background: var(--yellow-candy);
    background: linear-gradient(0deg,
                                var(--yellow-elegant) 10%, 
                                var(--yellow-candy) 30%, 
                                var(--yellow-candy) 70%, 
                                var(--yellow-pastel) 90%);
    scrollbar-color:  var(--yellow-candy) var(--yellow-elegant) ;
}
.window_bar.orange{
    background: var(--orange-candy);
    background: linear-gradient(0deg,
                                var(--orange-elegant) 10%, 
                                var(--orange-candy) 30%, 
                                var(--orange-candy) 70%, 
                                var(--orange-pastel) 90%);
    scrollbar-color:  var(--orange-candy) var(--orange-elegant) ;
}

.frame_lace.lace_star{
    background-color:transparent;
    border: 1rem solid transparent; 
    border-image-source: url("../images/overlays/lace_frame_stars.svg");
    border-image-slice: 25.5%; 
    border-image-repeat: round;

    padding:0;
    margin:0;
    width:calc(24vw - 4rem) !important;
}

.frame_lace .content{
    padding:0 0.2rem;
    width:calc(100%-8rem) !important;
    margin:0;
    height: 100%;
    overflow: auto;
}

.frame_lace h3{
    margin: 0;
    padding: .5rem;
}

.frame_lace img{
    width:47%;
    height: auto;
}

.webring_block{
    width:100%;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    height: auto;
}

.webring_block a{
    height: 100% !important;
    width: 100% !important;
}

.webring_block.bis a.arrow img{
    width: 70%!important;
}

.webring_block a img{
    width: 100%!important;
    height: auto!important;
}

@media ((orientation:portrait)){
    .frame_lace.lace_star{
        width: auto !important;
        border: 2rem solid transparent; 
        border-image-source: url("../images/overlays/lace_frame_stars.svg");
        border-image-slice: 25%; 
        border-image-repeat: round;
    }
    .frame_lace img{
        width:31%;
        height: auto;
    }
}

/* tools button stuff */

.art_tool.long{
    aspect-ratio: 32/81;
    background-color: #1d1d1d00;
    overflow: hidden;
    padding: 0;
    border: none;
    display: inline-block;
}

.art_tool.long img{
    height: 100%;
    width: auto;
    object-fit: cover;
    object-position: left;
    padding: 0%;
    margin: 0;
}

.art_tool.long:hover{
    animation: agitar 3s infinite ease;
}

/* 8<--------------------------------- */

/* animations */

.agitar{
    display: inline-block;
    animation: agitar 3s infinite ease;
}
.agitar.lento{
    display: inline-block;
    animation: agitar 5s infinite ease;
}
.agitar.rapido{
    display: inline-block;
    animation: agitar 1s infinite ease;
}

@keyframes agitar{
    0%{
        transform: rotate(0deg); 
    }
    25%{
        transform: rotate(15deg); 
    }
    50% {
        transform: rotate(0deg); 
    }
    75%{
        transform: rotate(-15deg); 
    }
    100%{
        transform: rotate(0deg); 
    }
}

.pulsar{
    display: inline-block;
    animation: pulsar 3s infinite ease;
}
.pulsar.lento{
    display: inline-block;
    animation: pulsar 5s infinite ease;
}
.pulsar.rapido{
    display: inline-block;
    animation: pulsar 1s infinite ease;
}

@keyframes pulsar{
0%{
    transform: scale(1, 1); 
}
  50% {
    transform: scale(1.1, 1.1); 
  }
  100%{
    transform: scale(1, 1); 
  }
}

.swing{
    display: inline-block;
    z-index: 1;
    animation: swing 3s infinite ease;
}
.swing.lento{
    display: inline-block;
    animation: swing 5s infinite ease;
}
.swing.rapido{
    display: inline-block;
    animation: swing 1s infinite ease;
}

@keyframes swing{
    0%{
        transform: rotate(0deg); 
    }
    25%{
        transform: rotate(15deg); 
    }
    50% {
        transform: rotate(0deg); 
    }
    75%{
        transform: rotate(-15deg); 
    }
    100%{
        transform: rotate(0deg); 
    }
}

.circle{
    display: inline-block;
    z-index: 1;
    animation: circle 3s infinite ease;
}
.circle.lento{
    display: inline-block;
    animation: circle 5s infinite ease;
}
.circle.rapido{
    display: inline-block;
    animation: circle 1s infinite ease;
}

@keyframes circle{
  0% {
    transform: translate(-1rem,0) rotate(12deg);
  }
  12% {
    transform: translate(-0.8rem,0.8rem);
  }
  25% {
    transform: translate(0,1rem) rotate(12deg);
  }
  37%{
    transform: translate(0.8rem,0.8rem);
  }
  50% {
    transform: translate(1rem,0) rotate(12deg);
  }
  62%{
    transform: translate(0.8rem,-0.8rem);
  }
  75% {
    transform: translate(0,-1rem) rotate(12deg);
  }
  87%{
    transform: translate(-0.8rem,-0.8rem);
  }
  100%{
    transform: translate(-1rem,0) rotate(12deg);
  }
}

.counter_circle{
    display: inline-block;
    z-index: 1;
    animation:counter_circle 3s infinite ease;
}
.counter_circle.lento{
    display: inline-block;
    animation:counter_circle 5s infinite ease;
}
.counter_circle.rapido{
    display: inline-block;
    animation:counter_circle 1s infinite ease;
}

@keyframes counter_circle{
  0% {
    transform: translate(1rem,0) rotate(12deg);
  }
  12% {
    transform: translate(0.8rem,-0.8rem);
  }
  25% {
    transform: translate(0,-1rem) rotate(12deg);
  }
  37%{
    transform: translate(-0.8rem,-0.8rem);
  }
  50% {
    transform: translate(-1rem,0) rotate(12deg);
  }
  62%{
    transform: translate(-0.8rem,0.8rem);
  }
  75% {
    transform: translate(0,1rem) rotate(12deg);
  }
  87%{
    transform: translate(0.8rem,0.8rem);
  }
  100%{
    transform: translate(1rem,0) rotate(12deg);
  }
}

@keyframes mini_circle{
  0% {
    transform: translate(-0.5rem,0) rotate(12deg);
  }
  12%{
    transform: translate(-0.4rem,-0.4rem);
  }
  25% {
    transform: translate(0,-0.5rem) rotate(12deg);
  }
  37%{
    transform: translate(0.4rem,-0.4rem);
  }
  50% {
    transform: translate(0.5rem,0) rotate(12deg);
  }
  62%{
    transform: translate(0.4rem,0.4rem);
  }
  75% {
    transform: translate(0,0.5rem) rotate(12deg);
  }
  87%{
    transform: translate(-0.4rem,0.4rem);
  }
  100%{
    transform: translate(-0.5rem,0) rotate(12deg);
  }
}

@keyframes mini_circle_counter{
  0% {
    transform: translate(-0.5rem,0) rotate(12deg);
  }
  12% {
    transform: translate(-0.4rem,0.4rem);
  }
  25% {
    transform: translate(0,0.5rem) rotate(12deg);
  }
  37%{
    transform: translate(0.4rem,0.4rem);
  }
  50% {
    transform: translate(0.5rem,0) rotate(12deg);
  }
  62%{
    transform: translate(0.4rem,-0.4rem);
  }
  75% {
    transform: translate(0,-0.5rem) rotate(12deg);
  }
  87%{
    transform: translate(-0.4rem,-0.4rem);
  }
  100%{
    transform: translate(-0.5rem,0) rotate(12deg);
  }
}

@keyframes mouse{
    0%{
        transform: translate(0,0) scale(1, 1); 
    }
    25%{
        transform: translate(4rem,0) scale(0.9, 0.9); 
    }
    50% {
        transform: translate(0,0) scale(1, 1); 
    }
    75%{
        transform: translate(-2rem,0) scale(1.1, 1.1); 
    }
    100%{
        transform: translate(0,0) scale(1, 1); 
    }
}

@media (orientation:portrait){
    @keyframes mouse{
        0%{
            transform: translate(0,0) scale(1, 1); 
        }
        25%{
            transform: translate(4rem,2rem) scale(0.8, 0.8); 
        }
        50% {
            transform: translate(0,0) scale(1, 1); 
        }
        75%{
            transform: translate(-2rem,0) scale(1.1, 1.1); 
        }
        100%{
            transform: translate(0,0) scale(1, 1); 
        }
    }
}

/* 8<--------------------------------- */

/* Specifics */

#lang_screen{
    display: grid;
    grid-template-rows: 75% 25%;
    background-color: var(--green-candy);
    overflow-x: hidden;
    overflow-y: auto;
}

#lang_screen > div *{
    padding: 0;
    margin: 0;
}

#lang_container{
    padding: 10%;
    width: 80%;
    min-height: fit-content !important;
    height: 80% !important;
    background-image: url(../images/backgrounds/montanias_xp.webp);
    background-size: 100% auto;   
    background-repeat: repeat-y; 
    background-position: bottom center;
    overflow: auto;
}

#es_container a{
    color: var(--green-dark);
}

#es_container a:visited{
    color: var(--yellow-dark);
}

#en_container a{
    color: var(--blue-dark);
}

#en_container a:visited{
    color: var(--purple-dark);
}


#webrings{
    width: 90%;
    min-width: 0;
    height: auto;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    column-gap: 0.5rem;
    margin-left: 0;
    align-items: center;
    padding: 1% 5%!important;
}

#webrings > div{
    align-items: center;
    min-height: 70%;
    min-width: 20%;
    height: 80%;
    padding: auto;
    margin: 0;
    
}

#angel_protection{
    height: 100% !important;
    padding-left: 0;

}

#angel_protection a {
    height: 100% !important;
}

#angel_protection a img{
    height: 90% !important;
    width: auto;
    padding-left: 0;
    aspect-ratio: 1/1 !important;
}

.web_block{
    height: 70% !important;
    width: max-content;
    flex-shrink: 0;
}

.web_block img{
    height: 90% !important;
    width: auto !important;
    max-width: 100% !important;
}
.antipixel_block{
    min-height: 70%;
    height: 90%;
}

.antipixel_block img{
    min-height: 40%;
    height: 45%;
}

@media ((orientation:portrait) and (min-width: 767px)) or ((orientation:landscape) and (min-width: 1144)){
    #lang_container{
        padding: 2rem 2rem 1rem 2rem !important;
        width: calc(100%-5rem);
    }
    #webrings{
        width: calc(100%-1rem);
        height: 5rem;
        column-gap: 0.5rem;
        padding: 0.5rem!important;
    }

    #webrings > div{
        min-height: 4rem;
        min-width: 4rem;
    }

    #bisexual_webr,#blender_webr{
        min-width: 8rem !important;
    }
    .antipixel_block{
    min-width: 6rem !important;
    }
}

#hero_main{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
}

.decor{
    pointer-events: none !important;
}

.shelf{
    gap: 0;
    padding: 0;
    margin: 0;
    height: 100%;
}

.shelf .overlay_content{
    aspect-ratio: 1/1;
}

.shelf.col{
    display: grid;
    grid-template-columns: auto;
    gap: 0;
}

.shelf.col .overlay_content{
    height: 80%;
    width: auto;
    aspect-ratio: 1/1;
    margin-left: 15% !important;
}

.shelf.col.three_boxes > *{
    width: calc(100vh/3.8);
    height: auto;
}

.shelf.col .overlay_container{
    aspect-ratio: 9/8;
}

.shelf.row{
    height: auto;
    padding-bottom: 1rem;
}

.shelf.row .overlay_container{
    aspect-ratio: 1/1;
}

.shelf.row.three_boxes{
    display: grid;
    grid-template-columns: 5.56% auto auto auto 5.56% !important;
    gap: 0;
}

.shelf.row .decor.tall{
    height: 100%;
    width: 100%;
    aspect-ratio: 16/3!important;
}

.shelf.row.three_boxes .decor.wide{
    grid-column: 1/6;
    height: 100%;
}

.shelf.row .overlay_content{
    height: 80%;
    width: auto;
    aspect-ratio: 1/1 !important;
    margin-left: 10% !important;
}

.shelf.on_portrait{
        display: none!important;
}

@media ((orientation:portrait)){
    #hero_main{
        flex-direction: column;
        justify-content: space-between;
    }
    .shelf.on_lands{
        display: none;
    }
    .shelf.on_portrait{
        display: grid!important;
    }
}

#guestbook_container{
    display: grid;
    grid-template-columns: 50% 45%;
    column-gap: 5%;
}

#guestbook{
    overflow: auto;
    background-color: var(--dark-screen);
    scrollbar-width: thin;
    scrollbar-color: var(--pink-pastel) var(--dark-screen) ;
}

.sign{
    display: grid;
    grid-template-columns: 40% auto;
    column-gap: 1rem;
    padding: 0.4rem 1.2rem;
    background-color: var(--wood-screen);
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.datos div,.firma{
    background-color: var(--dark-screen);
    padding: 0.2rem 0.6rem;
    border: currentColor solid 1px;
    border-radius: 0.2rem;
}
.datos div p,.firma p{
    margin: 0.3rem;
}

.datos{
    padding: 0.6rem 0;
}

.firma{
    padding: 0.4rem;
    margin: 0.6rem 0;
}

#firma_container{
    width: auto;
    background-color: color-mix(in srgb, var(--purple-dark) 80%, transparent);
    padding: 1rem;
    color: var(--text-white);
    padding-top: 1.5rem;
}

#firma_container input,select,textarea{
    background-color: color-mix(in srgb, var(--dark-screen) 80%, transparent);
    border: var(--pink-pastel) solid 0.1rem;
}

#firma_container .submit{
    color: var(--pink-pastel);
    padding: 0.5rem;
    margin-top: 0.5rem;
}

#firma_container textarea{
    width: 100%;
    margin-top: 0.5rem;
    height: 5rem;
}

#herramientas_firma{
    aspect-ratio: 145/81;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-top: 1rem;
}

#lapicera button{
    height: auto;
    width: 30%;
}

#acuarelas_box{
    height: 100%;
    
}

#main_info{
    display: grid;
    grid-template-columns: 50% 50%;
    row-gap: 0.5rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

#acuarelas{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 20% 20% 20% 20% 20%;
    height: 100%;
    aspect-ratio: 43/81;
}

#acuarelas_box img{
    height: 100%;
}

@media ((orientation:portrait)){
    #guestbook_container{
        display: flex;
        flex-direction: column-reverse;
        width: calc(100%-6rem);
    }
}