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

li { list-style: none;}

/*-Heredan propiedades del body-*/
h1, h2, h3, h4, h5, h6, strong{
    font-size: inherit;
    font-weight: inherit;}

a {
    display: block;
    color: inherit;
    text-decoration: none;}

/*-En caso de que haya enlaces en párrafos-*/    
p a {display: inline;}

img, video, iframe {
    display: block;
    max-width: 100%;
    width: 100%;}  

svg {
    display: block;
    fill: currentColor;}    

/*-Para formularios-*/
form, input, textarea, label, button, fieldset, legend, select{
    background-color: transparent;
    color: inherit;
    display: block;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;}

    /* textarea, input, label {width: 100%;}     */

:root {
    font-size: 100%;
    font-family: var(--font-shantell);
    font-weight: 500;
    color: var(--color-black);

    /*---[VARIABLES]---*/
    /*-Colores principales-*/
    --color-black: #1C1C1C;
    --color-black-opacity: #1c1c1c45;
    --color-white: #FFFFFF;
    --color-white-opacity: #ffffff85;
    --color-grey: #3e3e3e;
    --color-yellow: #FFB94F;
    --color-red: #DF4949;
    --color-blue: #43A7FF;
    --color-darkblue: #1b6db1;;
    --color-green: #95D950;
    --color-green-opacity: #9cc529e0;
    --color-brown: #9e2b1c;

    /* BORDERS */
    --border-black: 1px solid var(--color-black);
    --border-white: 1px solid var(--color-white);

    /* MEDIDAS DEFAULT */
    --reg-value: 15px;

    /* FUENTES */
    --font-baskerville: "Libre Baskerville", serif;
    --font-shantell: "Shantell Sans", cursive;
    --font-montserrat: "Montserrat", sans-serif;

    --font-bold: bold;
    --font-bolder: 700;
    --font-italic: italic;

    --font-mayus: uppercase;
    --font-versalita: small-caps;
    
    --font-smaller: 10;
    --font-small: 13;
    --font-regular: 15px;
    --font-big: 18px;
    --font-bigger: 21px;

    --text-border-white: 1px 0 var(--color-white), -1px 0 var(--color-white), 0 1px var(--color-white), 0 -1px var(--color-white),
             1px 1px var(--color-white), -1px -1px var(--color-white), 1px -1px var(--color-white), -1px 1px var(--color-white);
    --text-border-black: 1px 0 var(--color-black), -1px 0 var(--color-black), 0 1px var(--color-black), 0 -1px var(--color-black),
             1px 1px var(--color-black), -1px -1px var(--color-black), 1px -1px var(--color-black), -1px 1px var(--color-black);

    /* TRANSITIONS - OTHERS */
    --transition-default: all .2s ease-in-out;
    --shadow-default: 5px 5px 3px var(--color-black-opacity);
}

html{scroll-behavior: smooth; overflow: hidden; overflow: hidden;}

body {background-image: url(../Resources/Fondos/Background.png); overflow: hidden;}
/*-------------- RESET END --------------*/

.Main{
    min-height: 100vh;
    overflow: hidden;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

/* Decoracion del fondo */
.Background-img{    
    position: absolute;
    z-index: -1;
    width: auto;
    max-width: 100vh;

    overflow: hidden;
}
.Background-left{left: -180px; height: 115%;}
.Background-right{right: -300px; height: 145%;}

/* Aviso post it...! */
.Aviso-responsive{
    padding: 50px 25px 25px;

    background: url(Resources/Fondos/Post-it-azul.png) center no-repeat;
    background-size: cover;
    width: 100%;
    max-width: calc(793px / 4);
    height: 100%;
    max-height: calc(793px / 4);

    position: absolute;
    z-index: 2;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--reg-value);

    font-size: 13px;
    rotate: -5deg;
    cursor: grab;

    transition: opacity .2s ease-in;;
}
.Aviso-p.Cerrar{
    position: absolute;
    top: 0.5px;
    right: 0.5px;
    font-size: 25px;

    pointer-events: all;
    cursor: pointer;
    transition: var(--transition-default);
}
.Aviso-p.Cerrar:hover{opacity: 0.6;}
.Aviso-p{pointer-events: none;}


/* Postal */
.Postcard-wrapper{
    /* border: var(--border-black); */
    background-position: center;
    background-size: cover;
    margin: var(--reg-value);

    width: 100%;
    height: 100%;
    max-width: calc(1520px / 2.2);
    max-height: calc(979px / 2.2);

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    position: relative;
    z-index: 0;
    transition: var(--transition-default);
    animation: postcardFade ease-in-out 1s;

    /* box-shadow: var(--shadow-default) ; */
}
@keyframes postcardFade {
    0% {opacity: 0%;
        top: -50px}
    100% {opacity: 100%;
        top: 0}
}

/* Sección del askbox!!  */
.Askbox{
    background: url(Resources/Fondos/Fondo_Libreta.png);
    background-size: cover;
    width: calc(1976px / 2.3);
    height: calc(1383px / 2.3);
    padding: 15px;

    position: absolute;
    cursor: grab;

    /* transition: opacity .2s ease-in; */

    z-index: 10;
}
.Askbox-open{
    background: url(Resources/Dividers/Kraftpaper.png) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100%;
    max-width: calc(673px / 3);
    max-height: calc(255px / 3);

    position: absolute;
    top:-60px;
    right: 25%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    text-shadow: var(--text-border-white);
    font-size: 14px;
    transition: var(--transition-default);

    cursor: pointer;
    rotate: 5deg;
    z-index: 3;
}
.Askbox-open:hover{transform: scale(1.05);}
.Askbox-close{
    background: url(Resources/Dividers/Washi_Bluetiger.png) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100%;
    max-width: calc(375px / 1.8);
    max-height: calc(73px / 1.8);

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    cursor:pointer;
    position: absolute;
    top:10px;
    left: -45px;
    rotate: -30deg;
    z-index: 2;

    text-shadow: var(--text-border-white);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 3.5px;

    transition: var(--transition-default);
}
.Askbox-close:hover{transform: scale(1.05); rotate: -25deg;}

.Askboxsticker-left{
    width: 100%;
    max-width: 150px;

    position: absolute;
    bottom: 35px;
    left: -50px;
    rotate: -20deg;
    z-index: 2;
}
.Askboxsticker-right{
    width: 100%;
    max-width: 200px;

    position: absolute;
    top: -30px;
    left: 230px;
    rotate: 20deg;
    z-index: 2;
}

.Askboxsticker-header{
    width: 100%;
    max-width: 300px;
    
    position: absolute;
    right: 60px;
    top: 0;
    z-index: 2;
}

.Askbox-postit{
    background: url(Resources/Fondos/Post-it.png) no-repeat center;
    /* background-color: red; */
    background-size: cover;
    width: calc(793px / 2.2);
    height: calc(793px / 2.2);
    padding: 55px 25px;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--reg-value);

    position: absolute;
    top: 100px;
    left: 20px;
    rotate: -10deg;
    z-index: 1;
    
    text-align: center;
    text-shadow: var(--text-border-white);
}
.Askbox-p.Small{font-size: 13px;}

.Askboxsticker-left, .Askboxsticker-right, .Askbox-postit, .Askboxsticker-header{pointer-events: none;}

.Askbox-sections{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: var(--reg-value);

    height: 95%;
    width: 100%;
}

.Askbox-li{
    height: 100%;
    width: calc(100% / 2);
    padding: 20px;
}

/* .Askbox-p{
    border-image: url(https://64.media.tumblr.com/28ecafc4c9daab5e42496f39a5c6c5f9/tumblr_inline_s1uuvtYAQR1relqgm_500.png) 9 round;
    border-width: 9px;
    border-style: solid;

    padding: 10px;} */
.Askbox-li.Chat{
    padding: 0px 5px 0px 30px;
    margin-top: 20px;
}

.Askbox-chat{
    height: 100%;
    border-radius: 20px;
    }
.Askbox-li.Chat::before{
    content: '';
    /* background-color: red; */
    height: 130px;
    width: 100%;
    max-width: 372px;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 20.5px;
    background: linear-gradient(#F7F7F7, #F8F8F8, #F2F2F2, #F2F2F200);
    border-radius: 20px;
}


/* [Cosas juntas para todas las secciones!] */
.Postcard-stickers, .About-stickers, .Interests-stickers, .Extra-stickers {pointer-events: none;}
.Main-washi{
    width: 100%;
    height: 100%;
    max-width: calc(375px / 2);
    max-height: calc(73px / 2);

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    position: absolute;
    left: -35px;
    top: 10px;
    rotate: -25deg;
    z-index: 2;

    /* El texto de dentro de la washi tape :) */
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 3.5px;
    text-shadow: var(--text-border-white);
}
.Postcard-stickers .Main-washi{background: url(/Resources/Dividers/Washi_Vintage.png) no-repeat center; background-size: cover;}
.About-stickers .Main-washi{background: url(/Resources/Dividers/Washi_Bluetiger.png) no-repeat center; background-size: cover;}
.Interests-stickers .Main-washi{background: url(/Resources/Dividers/Washi_Unicorn.png) no-repeat center; background-size: cover;}
.Extra-stickers .Main-washi{background: url(/Resources/Dividers/Washi_Cats.png) no-repeat center; background-size: cover;}

.Postcard, .About, .Interests, .Extra{overflow: hidden;}


.Postcardsticker-left{
    position: absolute;
    max-height: 180px;
    width: auto;
    left: -25px;
    bottom: -30px;
    z-index: 2;

    rotate: -10deg;}
.Postcardsticker-right{
    position: absolute;
    max-height: 160px;
    width: auto;
    right: -40px;
    bottom: 80px;
    z-index: 2;
    rotate: 10deg;
}


/* Especificaciones para el Js */
.Bg-front.isClicked,
.Bg-back.isHidden,
.Askbox.isHidden,
.Askbox-open.isHidden,
.Sello.isHidden,
.Postcard.isHidden,
.Postcard-stickers.isHidden,
.About.isHidden,
.About-stickers.isHidden,
.Interests.isHidden,
.Interests-stickers.isHidden,
.Extra.isHidden,
.Extra-stickers.isHidden,
.Background-img.isHidden,
.Aviso-responsive.isHidden {opacity: 0; pointer-events: none;}



/* Este es el sellito :) */
.Sello{
    width: auto;
    height: auto;
    transition: var(--transition-default);

    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
}
.Sello:hover{
    rotate: 5deg;
    cursor: pointer;
}
.Sello:active{opacity:0.8;transform: scale(0.95);}


/* Disposición genérica de las secciones :D */
.Postcard, .About, .Interests, .Extra{
    height: 90%;
    width: 95%;

    overflow: hidden;
    position: absolute;
    transition: var(--transition-default);
}

.Postcard{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--reg-value);

    padding-left: 10px;
}

.Bg-front{
    cursor: pointer;
    position: absolute;
    z-index: 2;
    transition: var(--transition-default);}


.Bg-front:hover {transform: scale(1.02);}
.Bg-front:active {transform: scale(1);}



/* Aquí empieza la main page!! */
.Postcard-photo{
    /* background-color: rgb(131, 72, 72); */
    height: 100%;
}
.Postcard-img{
    height: 100%;
    width: auto;
    max-width: 350px;
    rotate: -1deg;
}



/* Aquí empieza la info */
.Postcard-ul{
    width: 100%;
    height: 100%;
    color: var(--color-brown);

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

/* .Postcard-li{background-color: var(--color-white-opacity);} */

.Postcard-li.Desc{
    width: 60%;

    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--reg-value);
}
.Intro{
    margin-bottom: 25px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
}
.Intro-p {
    padding: 10px 5px 2px 5px;
    border-bottom: 2px dashed var(--color-brown);
    font-size: 11.5px;
}
.Intro-p:last-child::after{
    content: '';
    /* background-color: red; */
    display: flex;
    position: absolute;
    width: 34%;
    height: 23px;

    border-bottom: 2px dashed var(--color-brown);
    margin: 8px 0 0 -5px
}

.Postcard-li.Botones::after{
    content: '';
    /* background-color: red; */
    display: flex;
    position: absolute;
    width: 35%;
    height: 20px;

    border-bottom: 2px dashed var(--color-brown);
    margin: -10px 0 0 -5px
}    

.Botones-ul{
    padding: 5px 0px;
    /* height: 90%; */
    width: 100%;
    margin-left: 15px;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    gap: var(--reg-value);
}
.Botones-li{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: 100%;
    max-width: calc(376px / 1.6);
    max-height: calc(70px / 1.6);
    padding: 5px 70px;
    text-align: center;
    color: var(--color-white);
    text-shadow: var(--text-border-black);

    cursor: pointer;
    transition: var(--transition-default);
}
.Botones-li:nth-child(odd) {background-image: url('/Resources/Dividers/Washi_Orange.png'); rotate:3deg;}
.Botones-li:nth-child(even) {background-image: url('/Resources/Dividers/Washi_Strawberry.png'); rotate: -3deg;}

.Botones-li:hover {transform: scale(1.03);
box-shadow: var(--shadow-default); rotate: inherit;}
.Botones-li:active {transform: scale(1);}

.Postcard-li.Socials{width: 100%; height: 100%;}
.Socials-ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;

    margin-left: 10px;
}
.Socials-li{
    width: 100%;
    height: 100%;
    max-width: 35px;
    max-height: 36px;

    cursor: pointer;
    transition: var(--transition-default);
}
.Socials-li:hover{transform: scale(1.07); box-shadow: var(--shadow-default);}
.Socials-li:active{transform: inherit; box-shadow: inherit;}



/* [Aquí empieza el about!!] */
/* Aunque primero van los stickers... ojito  */
.Aboutsticker-left{
    width: auto;
    height: 130px;

    position: absolute;
    right: -30px;
    bottom: 120px;
    rotate: -10deg;

}
.Aboutsticker-right{
    width: auto;
    height: auto;

    position: absolute;
    right: -60px;
    bottom: -10px;

    z-index: 2;
}
/* .About-askbox{
    left: 45px;
    bottom: -100px;

    position: absolute;
    pointer-events:fill;
    z-index: 2;
    
    width: 55%;
    height: auto;
    rotate: -2deg;
    box-shadow: var(--shadow-default);

    border-image: url(https://64.media.tumblr.com/28ecafc4c9daab5e42496f39a5c6c5f9/tumblr_inline_s1uuvtYAQR1relqgm_500.png) 9 round;
    border-width: 9px;
    border-style: solid;
} */


.About-photo {
    height: 100%; 
    max-height: 190px; 
    width: auto;

    position: absolute;
    left: -60px;
    top: 20px;
    rotate: -10deg;
    z-index: 0; 
}

.About {    
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--reg-value);
}
.About-main{
    width: 80%;
    height: 100%;
    padding: 0 15px 0 150px;


    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--reg-value);
}

.About-h1{
    font-size: 25px;
    padding-bottom: 5px;
    border-bottom: 2px dashed var(--color-brown);
}
.About-p{
    background-color: var(--color-white-opacity);
    padding: 5px;

    font-size: 13px;
    text-align: justify;
    line-height: 25px;

    border: var(--border-white);
    outline: var(--border-black);
    text-shadow: var(--text-border-white);
}

.About-extra{
    /* background-color: red; */
    padding: 0 15px 15px 15px;
    width: 100%;
    height: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--reg-value);
}
.About-extra .About-p{width: 500px;}
.About-extra .About-p:last-child{width: 400px;}



/* [Aquí empiezan los likes!!] */
/* Aunque primero van los stickers... DE NUEVO!!!  */
.Interestssticker-left{
     width: auto;
    height: auto;

    position: absolute;
    left: -65px;
    top: 30px;

    z-index: 1;
}
.Interestssticker-right{
    width: auto;
    height: auto;

    position: absolute;
    right: -70px;
    bottom: -35px;

    z-index: 4;
}

.Sticker-anilist,
.Sticker-backloggd,
.Sticker-letterboxd {
    background-color: red;
    position: absolute;
    height: 100%;
    width:  100%;
    max-height: 64px;
    max-width: 123px;

    pointer-events: all;
    cursor: pointer;
    z-index: 3;
    transition: var(--transition-default);
}

.Sticker-anilist:hover,
.Sticker-backloggd:hover,
.Sticker-letterboxd:hover{transform: scale(1.06);}
.Sticker-anilist:active,
.Sticker-backloggd:active,
.Sticker-letterboxd:active{transform: scale(1.02);}

.Sticker-anilist{
    background: url(Resources/Stamps/Sello_Anilist.png) no-repeat center;
    background-size: cover;
    left: -70px;
    bottom: 95px;
    rotate: -10deg;
}
.Sticker-backloggd{
    background: url(Resources/Stamps/Sello_Backloggd.png) no-repeat center; background-size: cover;
    left: -40px;
    bottom: 20px;
    rotate: 5deg;
}
.Sticker-letterboxd{
    background: url(Resources/Stamps/Sello_Letterboxd.png) no-repeat center; background-size: cover;
        left: -65px;
    bottom: -50px;
    rotate: -5deg;
}



.Interests {
    width: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;

    z-index: 2;

}
.Interests-main{
    /* background: url(../Resources/Fondos/test.png) no-repeat center;
    background-size: 140%; */
    
    width: 60%;

    margin: 10px 0;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;

    
}
.Interests-p{
    background-color: var(--color-white-opacity);
    padding: 5px 10px;

    border: var(--border-black);
    outline: var(--border-white);

    text-shadow: var(--text-border-white);
}
.Favoritos-botones{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--reg-value);
    margin: 5px 0px 15px;
}
.Favoritos-boton{
    background:center no-repeat;
    background-size: cover ;
    width: 99px;
    height: 28px;

    transition: var(--transition-default);
    text-shadow: var(--text-border-white);
    cursor: pointer;
}
.Favoritos-boton:hover, .Favoritos-boton.isActive{transform: scale(1.04);
box-shadow: var(--shadow-default);}
.Favoritos-boton:active{transform: scale(1.02); box-shadow: 2px 2px 3px var(--color-black-opacity);}

.Favoritos-boton.Series{background-image: url(Resources/Stickers/Otros/Stamp_Lemons.png);}
.Favoritos-boton.Juegos{background-image: url(Resources/Stickers/Otros/Stamp_Limes.png);}
.Favoritos-boton.Otros{background-image: url(Resources/Stickers/Otros/Stamp_Oranges.png);}

.Favoritos-seccion{
    background: url(Resources/Fondos/Lined_Paper.png) no-repeat center;
    background-size: cover;
    width: 100%;
    max-width: 500px;
    height: 100%;
    max-height: 275px;
    padding: 35px 5px 10px;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-content: flex-start;
    gap: 10px;

    overflow: auto;
    box-shadow: var(--shadow-default);
    display: none;
    pointer-events: none;
    transition: var(--transition-default);

    position: absolute;
    bottom: 0px;
    z-index: 3;
}

.Favoritos-img{
    height: 100%;
    max-height: 110px;
    width: 100%;
    max-width: 110px;

    border: var(--border-white);
    outline: var(--border-black);
    overflow: hidden;

    transition: var(--transition-default);
}
.Favoritos-img:hover{transform: scale(1.09); box-shadow: var(--shadow-default);}
.Favoritos-img:active{transform: scale(1.07); box-shadow: inherit;}
.Favoritos-seccion.isActive{display: inherit; pointer-events: inherit;}



/* TEXTOS, COSAS POR DEFECTO... */
.BoldText {font-weight: 700;}



/* OTROS... */
/* Estilo para las Tooltips */


#s-m-t-tooltip {
    background-color: var(--color-yellow);
    max-width: 300px;
    color:var(--color-white);
    
    padding: 8px;
    margin: 21px;
    
    font-size: 12px;
    font-family: var(--font-montserrat);
    text-align: center;
    text-transform: lowercase;
    letter-spacing: 1.6px;

    border: var(--border-black);
    outline: var(--border-white);
    
    z-index:10;
    box-shadow: var(--shadow-default);
}



/* RESPONSIVE.. */

@media (max-width:480px) {
    

}