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


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

html{
    background-color: #322d28;
}

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

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

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

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

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

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

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

/* notes */

.note.box{
    background-color: rgba(60, 43, 66, 0.918);
    width: auto;
    height: auto;
    max-height: 90dvh;
    border-radius: 20px;
    border: 3px solid rgba(162, 18, 214, 0.781);
    padding: 0;
    margin: 0;
    color: #f9f0e8;
}

.note.title{
    background-color: rgba(162, 18, 214, 0.781);
    margin: 0;
    padding: 0.2rem;
    border-radius: 15px 15px 0 0;
}

.note.text{
    padding: 0;
    margin: 1rem 0.5rem 1rem 1rem;
    text-align: justify;
    max-height: 70dvh;
    width: fit-content;
    overflow-y: scroll;
    scrollbar-color: #7b3e83 #ffffff00;
    scrollbar-width: thin;
}

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

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

/* pages */

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

/* buttoners */
.buttoner{
    display: inline-flex;
    flex-direction: row;
    padding: 0.5rem;
    background-image: url("../images/backgrounds/wood_pale.webp");
    border-radius: 30px;
    align-self: center;
    margin: auto;
    max-width: fit-content;
    max-height: fit-content;
    flex-wrap: wrap;
}

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

.buttoner div{
    background-color: rgba(117, 77, 38, 0.788);
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: 20px;
}

.buttoner div button{
    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;
    }
}

/* Image buttons */
.image_button {
    aspect-ratio: 1/1;
    min-width: 8rem;
    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;
    color: #322d28;
    text-shadow: 0px 0px 20px #f9f0e8;
}
.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');
}

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

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