@import "reset.css";

@font-face {
    font-family: Cardinal; /* set name */
    src: url(assets/fonts/Cardinal.ttf); /* url of the font */
}
@font-face {
    font-family: Citadel;
    src: url(assets/fonts/Citadel\ of\ Blackrose.ttf);
}
@font-face {
    font-family: Sunflower;
    src: url(assets/fonts/Sun\ Flower.otf)
}
.light{
    --color-background: #ede0c2; /* Background */ 
    --color-dropshadow: #46361e00;
    --color-text: #3a2a1d;
    --color-accent: #46754d;
    --color-section-background: #6b8565;
    --palette-6: #111;
    --font: Cardinal;
    --banner-img: url(assets/banner/light.png);
    --banner-pos: 50% 20%;
    --symbol: url(assets/sun.svg);
}
.dark{
    --color-background: #2c2334; /* Background */
    --color-dropshadow: #975cdb;
    --color-text: #f3e7ab;
    --color-accent: #f3e7ab;
    --color-section-background: #251f32;
    --palette-6: #111;
    --font: Cardinal;

    --banner-img: url(assets/banner/dark.png);
    --banner-pos: 90% 50%;

    --symbol: url(assets/moon.svg);

}
/* :root{
} */

body{
    width: 70%;
    margin: auto;
    color: var(--color-text);
	background-color: var(--color-background);
    max-height: 100%;
    font-size: 300%;
    font-weight: bolder;
    font-family: 
        var(--font);
    transition: 
        color 1s, 
        background 1s;
}

#theme-switch{
    display: block;
    position: absolute;
    width:  10%;
    height: 10%;
    left:   2%;
    top:    1.5rem;
    fill: var(--color-dropshadow);
    background-image: var(--symbol);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    &:hover{
        transform: scale(1.2)
    }
    &:active{
        transform: scale(.9);
    }

}
aside{
    position: absolute;
    display: grid;
    right: 3%;
    width: 10%;
    height: 40rem;
    >a{
        display: inline-block;
        position: relative;
        /* width: 100%; */
        height: 100%;

        background: var(--color-text);
        mask-position: center;
        mask-size: contain;
        mask-repeat: no-repeat;
        &#bsky_ico{
            mask-image: url(assets/socials/bsky.svg);
        }
        &#fur_ico{
            
            mask-image: url(assets/socials/fur.svg);
        }
        &#twitter_ico{
            mask-image: url(assets/socials/twitter.svg);
        }
    }
}
main{
    margin: auto;
    margin-top: 2rem;
    max-width: 20em;
    >.img{
        box-shadow: 0px 0px 5px 5px var(--color-text);
        width: 100%;
        height: 20rem;
        display: block;
        background-image: var(--banner-img);
        background-size: cover;
        background-position: var(--banner-pos);
        background-repeat: no-repeat;

    }
    >h1{
        color: var(--color-text);
        text-shadow: 0px 0px 25px var(--color-dropshadow);
        font-size: clamp(1rem, -0.4286rem + 11.4286vw, 6rem);
        text-align: center;

        >span{
            display: inline-block;
            transform: scale(1);
            transition: transform 0.1s;
            &:hover{
                transform: scale(1.5);
                color: var(--color-accent);
            }
        }
        
    }

    >nav{
        height: 3em;
        width: 100%;
        display: block;
        padding: 30px;
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 2%;
        place-items: center;
            a{
                color: var(--color-section-background);
                background: var(--color-accent);
                text-align: center;
                width: 100%;
                height: 100%;
                text-decoration: none;
            }
    }
    >section{
        background: var(--color-section-background);
        width: 100%;
        height: 20rem;
    }
}

.light .dark-only{
    display: none;
}
.dark .light-only{
    display: none;
}
.decorations{
        
    .deco1{
        background: var(--color-accent);
        mask-image: url(assets/decorators/deco2.svg);
        mask-position: center;
        mask-size: contain;
        mask-repeat: no-repeat;

        position: absolute;
        user-select: none;
        pointer-events: none;

        left: 10%;
        top: -7rem;
        margin: auto;
        min-width: 80%;
        height: 20rem;

    }
    .splatter{
        z-index: -1;
        background: radial-gradient(var(--color-accent), var(--color-dropshadow));
        mask-image: url(assets/decorators/splatter.svg);
        /* mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0) 10%); */
        mask-position: center;
        /* mask-size: 10px 10px; */
        mask-size: cover;
        position: fixed;
        mask-repeat: repeat;
        user-select: none;
        pointer-events: none;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    .deco-heart{
        background: var(--color-accent);
        mask-image: url(assets/decorators/hearts.svg);
        mask-position: center;
        mask-size: contain;
        position: absolute;
        mask-repeat: round;
        user-select: none;
        pointer-events: none;
        top: 20%;
        left: 0px;
        width: 15%;
        height: 30rem;

    }
    .deco-cute{
        background: var(--color-accent);
        mask-image: url(assets/decorators/deco1.svg);
        z-index: -1;
        mask-position: center;
        mask-size: contain;
        position: absolute;
        mask-repeat: round;
        user-select: none;
        pointer-events: none;
        top: 0%;
        left: 0px;
        width: 15%;
        height: 100%;

    }

}