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

    /* pastels */
    --pink-pastel: #daacb5;
    --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: #9f4758;
    --magenta-dark: #9a4a8f;
    --purple-dark: #6f50a1;
    --blue-dark: #575bb1;
    --cyan-dark: #438085;
    --green-dark: #537d4d;
    --lemon-dark: #707f44;
    --yellow-dark: #857643;
    --orange-dark: #a87546;
}

/* 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");
}

/* 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); 
}

@media (min-width: 1360px){
    html{
        font-size: calc(2vw); 
    }
}

@media (orientation:portrait){
    html{
        font-size: calc(1.5vh); 
    }
}

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;
}

.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;
}

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

@media (orientation:portrait){
    .medieval{
        font-size: 400%;
    }
    .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;
    }

}

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

/* overlays */

.page{
    height: 90vh;
    max-height: 100vh;
    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{
    pointer-events: none;
}

.overlay_content{
    background-color: var(--blue-pastel);
}

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

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

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

.blue_bar{
    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) ;
    scrollbar-width: thin;
}


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

/* animations */

@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: calc(100%-4rem) auto;
    background-color: var(--green-candy);
    overflow-x: hidden;
    overflow-y: auto;
}

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

#lang_container{
    padding: 2rem 2rem 1rem 2rem !important;
    width: calc(100%-4rem);
    min-height: fit-content !important;
    height: calc(100%-4rem) !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: calc(100%-1rem);
    min-width: 0;
    height: 4rem;
    display: inline-flex;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    column-gap: 0.5rem;
    margin-left: 0;
    align-items: center;
    padding: 0.5rem!important;
}

#webrings > div *{
        width: 100%;
}

#webrings > div{
    align-items: center;
    min-height: 3rem;
    min-width: 3rem;
    padding: auto;
    margin: 0;
}

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

@media ((orientation:portrait) and (min-width: 767px)) or ((orientation:landscape) and (min-width: 1367)){
    #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;
    }
}