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

    /* pastels */
    --pink-pastel: #f995a9;
    --magenta-pastel: #f995ef;
    --purple-pastel: #bc95f9;
    --blue-pastel: #808fff;
    --cyan-pastel: #95d8f9;
    --green-pastel: #88dd69;
    --lemon-pastel: #c5e467;
    --yellow-pastel: #ffda60;
    --orange-pastel: #faa85c;

    /* glass */
    --pink-glass: #f995a9cc;
    --magenta-glass: #f995efcc;
    --purple-glass: #bc95f9cc;
    --blue-glass: #808fffcc;
    --cyan-glass: #95d8f9cc;
    --green-glass: #88dd69cc;
    --lemon-glass: #c5e467cc;
    --yellow-glass: #ffda60cc;
    --orange-glass: #faa85ccc; 

    /* smokey glass */
    --pink-smoke: #a329419a;
    --magenta-smoke: #a329979a;
    --purple-smoke: #5829a39a;
    --blue-smoke: #2937a39a;
    --cyan-smoke: #1a719c9a;
    --green-smoke: #3c85219a;
    --lemon-smoke: #6e8a1c9a;
    --yellow-smoke: #9c7c089a;
    --orange-smoke: #8f4c0d9a; 
}

/* 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_bg.webp");
    background-repeat: repeat;
    background-size: contain;
    margin: 0 auto 0 0;
    padding: 0 auto 0 0;   
}

body{
    margin: 0 auto 0 0;
    padding: 0 auto 0 0;
}

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


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

@media (orientation:portrait) or (max-width: 767px){
    main{
        width: 90dvw;
    }
}

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

p{
    font-size: large;
}
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;
}
.medievalmini{
    font-family: 'JacquardBastard', fantasy !important;
    font-weight:normal !important;
}

.biggest_letters{
    font-size: 3rem !important;
}

.big_letters{
    font-size: 2rem !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;
}

/* footer */
footer{
    width: calc(100%-2rem);
    background: var(--footer-color);
    background: linear-gradient(0deg,var(--footer-color) 0%, hsla(from var(--footer-color) h s l / 0.7) 75%, #ffffff00 100%);
    margin: 0;
    padding: 1rem;
}

footer  p {
    width: 100%;
    font-size: 1.5rem;
    color: #eee;
    align-self: center;
}

footer button{
    width: 8rem;
}

footer .signature{
    display: grid;
    grid-template-columns: 50% 50%;
}

/* pages */

.page{
    height: 90vh;
    max-height: 100vh;
    margin: 5vh 0;
    padding-bottom:4rem;
    position: relative;
}

@media (orientation:portrait) or (max-width: 767px){
    p{
        font-size: 2.5rem !important;
    }
    h1{
        font-size: 4rem;
    }
    h2{
        font-size: 3.5rem;
    }
    h3{
        font-size: 3rem;
    }
    .biggest_letters{
        font-size: 9rem !important;
    }
    .big_letters{
        font-size: 7rem !important;
    }
    .page{
        display: flex !important;
        flex-direction: column !important;
        row-gap: 1rem;
        min-height: max-content;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

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

/* notes */

.note.box{
    background-color: rgba(60, 43, 66, 0.918);
    width: auto;
    height: auto;
    border-radius: 20px;
    border: 5px solid rgba(162, 18, 214, 0.781);
    padding: 0;
    margin: 0;
    margin-bottom: 2rem!important;
    color: #f9f0e8;
    break-inside: avoid;
}

.note.box.pink{
    background: var(--pink-smoke);
    background: linear-gradient(0deg, var(--pink-smoke) 0%, hsl(from var(--pink-smoke) h 50% 20% / 100%) 100%);
    border: 5px solid var(--pink-pastel);
}
.note.box.magenta{
    background: var(--magenta-smoke);
    background: linear-gradient(0deg, var(--magenta-smoke) 0%, hsl(from var(--magenta-smoke) h 50% 20% / 100%) 100%);
    border: 5px solid var(--magenta-pastel);
}
.note.box.purple{
    background: var(--purple-smoke);
    background: linear-gradient(0deg, var(--purple-smoke) 0%, hsl(from var(--purple-smoke) h 50% 20% / 100%) 100%);
    border: 5px solid var(--purple-pastel);
}
.note.box.blue{
    background: var(--blue-smoke);
    background: linear-gradient(0deg, var(--blue-smoke) 0%, hsl(from var(--blue-smoke) h 50% 20% / 100%) 100%);
    border: 5px solid var(--blue-pastel);
}
.note.box.green{
    background: var(--green-smoke);
    background: linear-gradient(0deg, var(--green-smoke) 0%, hsl(from var(--green-smoke) h 50% 20% / 150%) 100%);
    border: 5px solid var(--green-pastel);
}

.note.box.yellow{
    background: var(--yellow-smoke);
    background: linear-gradient(0deg, var(--yellow-smoke) 0%, hsl(from var(--yellow-smoke) h 50% 20% / 100%) 100%);
    border: 5px solid var(--yellow-pastel);
}

.note.title{
    background-color: rgb(156, 26, 196, 0.781);
    margin: 0;
    padding: 0.2rem;
    border-radius: 15px 15px 0 0;
}

.note.title *{
    color: #1d1d1d;
    padding-left: 1rem;
}

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

.note.text{
    padding: 0;
    margin: 1rem 0.5rem 1rem 1rem;
    text-align: justify;
    max-height: 70vh;
    width: fit-content;
    overflow-y: auto;
    scrollbar-color: #9d2bac #ffffff00;
    scrollbar-width: thin;
}
.note.text.pink{
    scrollbar-color: var(--pink-pastel) #ffffff00;
}
.note.text.magenta{
    scrollbar-color: var(--magenta-pastel) #ffffff00;
}
.note.text.purple{
    scrollbar-color: var(--purple-pastel) #ffffff00;
}
.note.text.blue{
    scrollbar-color: var(--blue-pastel) #ffffff00;
}
.note.text.cyan{
    scrollbar-color: var(--cyan-pastel) #ffffff00;
}
.note.text.green{
    scrollbar-color: var(--green-pastel) #ffffff00;
}
.note.text.lemon{
    scrollbar-color: var(--lemon-pastel) #ffffff00;
}
.note.text.yellow{
    scrollbar-color: var(--yellow-pastel) #ffffff00;
}
.note.text.orange{
    scrollbar-color: var(--orange-pastel) #ffffff00;
}

.note p{
    padding: 0;
    margin: 0;
}

@media (orientation:portrait) or (max-width: 767px){
    .note.title{
        font-size: xx-large!important;
    }
}

/* fotos */

figure{
    width: 90%;
    padding: 5%;
    background-color: var(--purple-glass);
    break-inside: avoid;
    margin: 0;
    border-radius: 1rem;
}

figcaption{
    font-weight: 600;
    font-size: large !important;
    padding: 0.5rem 0.5rem 0 0.5rem;
}

figure img{
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

figure,.yt_wrapper{
    font-weight: 600;
    font-size: large;
    color: #1d1d1d;
}

figure.pink,.yt_wrapper.pink{
    background-color: var(--pink-glass);
}
figure.purple,.yt_wrapper.magenta{
    background-color: var(--magenta-glass);
}
figure.purple,.yt_wrapper.purple{
    background-color: var(--purple-glass);
}
figure.blue,.yt_wrapper.blue{
    background-color: var(--blue-glass);
}
figure.blue,.yt_wrapper.cyan{
    background-color: var(--cyan-glass);
}
figure.green,.yt_wrapper.green{
    background-color: var(--green-glass);
}
figure.green,.yt_wrapper.lemon{
    background-color: var(--lemon-glass);
}
figure.yellow,.yt_wrapper.yellow{
    background-color: var(--yellow-glass);
}
figure.yellow,.yt_wrapper.orange{
    background-color: var(--orange-glass);
}
/* youtube */

.yt_wrapper{
    background-color: #322d28B2;
    break-inside: avoid;
}

.yt_wrapper p{
    width: 90%;
    padding: 0 5% 5% 5%;
}

.yt {
    position: relative;
    display: block;
    width: 100%; /* width of iframe wrapper */
    height: 0;
    margin: auto;
    padding: 0% 0% 56.25%; /* 16:9 ratio */
    overflow: hidden;
}
.yt iframe {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

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

.chapter{
    background-color: #a83cc9d7;
    padding: 1rem;
    margin-bottom: 2rem
}

.chapter.letter{
    margin: auto 18%;
}

@media (orientation:portrait) or (max-width: 767px){
    .chapter.letter{
        margin: auto 5%;
    }
}

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

section{
    margin-bottom: 1em;
    background-color: var(--dark-screen);
    padding: 1.5rem;
    color: var(--text-white);
}

.point{
    margin-bottom: 1em;
    columns: 3;
    column-gap: 1.5rem;
    padding: 1.5rem;
}

.point > p{
    text-align: justify;
}

@media (orientation:portrait) or (max-width: 767px){
    .point{
        columns: 1 !important;
    }
}

.letter{
    text-align: center;
}

body > header{
    width: 100%;
    padding: 2rem 10%;
    background-color: #9340ffce;
    margin-bottom: 2rem;
    width: 80%;
}

body > header.pink{
    background-color: var(--pink-glass);
}
body > header.magenta{
    background-color: var(--magenta-glass);
}
body > header.purple{
    background-color: var(--purple-glass);
}
body > header.blue{
    background-color: var(--blue-glass);
}
body > header.cyan{
    background-color: var(--cyan-glass);
}
body > header.green{
    background-color: var(--green-glass);
}
body > header.lemon{
    background-color: var(--lemon-glass);
}
body > header.yellow{
    background-color: var(--yellow-glass);
}
body > header.orange{
    background-color: var(--orange-glass);
}


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

/* entrys */
.entry_box button{
    width: 100%;
    margin: 1rem 0;
    background-color: var(--main-background);
    color: var(--text-white);
}

.tags{
    display: none !important;
}

/* buttoners */
.buttoner{
    display: inline-flex;
    flex-direction: row;
    padding: 0.5rem;
    background: #ab672b;
    background: radial-gradient(circle,rgba(171, 103, 43, 0.89) 0%, rgba(219, 199, 46, 0.4) 100%);
    border-radius: 30px;
    align-self: center;
    margin: auto;
    max-width: fit-content;
    max-height: fit-content;
}

.buttoner.vertical{
    flex-direction: column;
}

.buttoner.pink{
    background: var(--pink-smoke) ;
    background: radial-gradient(circle,var(--pink-smoke) 0%, var(--magenta-smoke)  100%);
}

.buttoner.purple{
    background: var(--purple-smoke);
    background: radial-gradient(circle,var(--purple-smoke) 0%, var(--blue-smoke) 100%);
}

.buttoner.yellow{
    background: var(--yellow-smoke);
    background: radial-gradient(circle,var(--yellow-smoke) 0%, var(--green-smoke) 100%);
}

.buttoner.blue{
    background: #43347d;
    background: radial-gradient(circle,var(--blue-smoke) 0%, var(--cyan-smoke) 100%);
}

.buttoner.green{
    background: #347d46;
    background: radial-gradient(circle,var(--green-smoke) 0%, var(--lemon-smoke) 100%);
}

footer > .buttoner{
    background: #ff000000 !important;
}

.buttoner div{
    border: 3px solid rgba(57, 50, 61, 0.349);
    margin: 0.5rem;
    padding: 0.5rem;
    padding-bottom: 1rem;
    border-radius: 20px;
    display: grid!important;
    grid-template-columns: max-content;
    row-gap: 0.5rem;
    align-items: center;
}

.buttoner div button,img{
    width: 8rem;
}
.buttoner div p{
    font-family: 'Jacquard', fantasy !important;
    font-size: 2em;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding-top: 0 auto;
}

@media (orientation:portrait) or (max-width: 767px){
    .buttoner{
        height: min-content;
    }
    .buttoner.vertical{
        flex-direction: row !important;
        margin: 0 auto;
    }
    .buttoner div button{
        width: 12rem!important;
    }
}

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

/* Switch style y eso */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(241, 241, 241);
  -webkit-transition: .6s;
  transition: .6s;
  height: 2.6rem;
  width: 4.3rem;
}

.slider:before {
  position: absolute;
  content: "";
  height: 2rem;
  width: 2rem;
  left: 0.3rem;
  bottom: 0.3rem;
  background-color: rgb(53, 52, 52);
  -webkit-transition: .6s;
  transition: .6s;
}

input:checked + .slider {
  background-color: rgb(192, 99, 184);
}

input:focus + .slider {
  box-shadow: 0 0 10px rgb(192, 99, 184);
}

input:checked + .slider.pink{
  background-color: var(--pink-pastel);
}

input:focus + .slider.pink{
  box-shadow: 0 0 10px var(--pink-pastel);
}

input:checked + .slider.purple{
  background-color: var(--purple-pastel);
}

input:focus + .slider.purple{
  box-shadow: 0 0 10px var(--purple-pastel);
}

input:checked + .slider.yellow{
  background-color: var(--yellow-pastel);
}

input:focus + .slider.yellow{
  box-shadow: 0 0 10px var(--yellow-pastel);
}

input:checked + .slider.blue{
  background-color: var(--blue-pastel);
}

input:focus + .slider.blue{
  box-shadow: 0 0 10px var(--blue-pastel);
}

input:checked + .slider.green{
  background-color: var(--green-pastel);
}

input:focus + .slider.green{
  box-shadow: 0 0 10px var(--green-pastel);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 1.15rem;
}

.slider.round:before {
  border-radius: 50%;
}

/* Image buttons */
.image_button {
    aspect-ratio: 1/1;
    min-width: 5.5rem;
    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
}

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

/* By space */
.image_button.blog{
    background-image: url('../images/buttons/blog.webp');
}
.image_button.dev{
    background-image: url('../images/buttons/dev.webp');
}
.image_button.t3d{
    background-image: url('../images/buttons/3d.webp');
}
.image_button.home{
    background-image: url('../images/buttons/home.webp');
}
.image_button.contact{
    background-image: url('../images/buttons/contact.webp');
}

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

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

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

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

.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.webp');
}
.image_button.reddit{
    background-image: url('../images/buttons/reddit.webp');
}
.image_button.ytube{
    background-image: url('../images/buttons/ytube.webp');
}
.image_button.tiktok{
    background-image: url('../images/buttons/tiktok.webp');
}

/* gifs */
.alive_icon{
    aspect-ratio: 1/1!important;
    min-height: 8rem;
    max-height: 24rem;
}

.linker .alive_icon{
    width: 80%!important;
    padding: 0 10%;
}

 @media (orientation:portrait) or (max-width: 767px){
    .alive_icon{
    aspect-ratio: 1/1!important;
    min-height: 8rem;
    max-height: 80%;
}
 }

.icon{
    aspect-ratio: 1/1!important;
    min-height: 8rem;
    max-height: 10rem;
}

.lace_line{
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 100%;
}

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



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