    <style>

    @font-face{
        src: url('/fonts/junipy.ttf');
        font-family: junipy;
    }

/* STRUCTURE */
    body{
        background-image: var(--main-bg);
    }

    #container{
        margin: 40px auto;
        display: grid;
            grid-template-rows: 300px 30px 30px 1fr;
            grid-template-areas: 'header'
                                 'nav'
                                 'recent'
                                 'main';
        max-width: 600px;
        min-height: 830px;
            max-height: 830px;
            height: 830px;
        border: 1px solid var(--accent2);
        font-family: junipy;
    }

    header{
        grid-area: header;
        background-image: var(--header-bg-img);
            background-size: cover;
        text-align: right;
            align-content: flex-end;
        padding-right: 10px;
    }

    nav{
        grid-area: nav;
        background-color: var(--accent1);
            padding: 6px;
            padding-left: 10px;
            padding-right: 300px;
        display: flex;
            justify-content: space-evenly;
        border-top: 1px solid var(--accent2);
        color: var(--accent1);
    }

    recent{
        grid-area: recent;
        background-color: var(--accent2);
            color: var(--divcolor);
        padding: 6px;
        padding-left: 30px;
    }

    main{
        grid-area: main;
        display: grid;
            grid-gap: 20px;
            grid-template-columns: 200px 1fr;
            grid-template-rows: 290px 1fr;
        grid-template-areas: 'over about'
                             'under about';
        padding: 20px;
        background: var(--maincolor);
        font-size: 16px;
    }

/* div decoration */

    .over, under, about{
        background-color: var(--divcolor);
        padding: 10px;
        border: 1px solid var(--accent2);
           /*border-image: url(https://file.garden/aKkE4rq5LD-L0q5I/index2/New%20Project%20-%202025-10-12T173946.851.png);
            border-image-slice: 15 fill;
            border-image-width: 15px;
            border-image-repeat: round;*/
    }

    about{
        grid-area: about;
    }

    .templates{
        overflow: auto;
        height: 160px;
        display: grid;
            grid-template-rows: 1fr 1fr;
            grid-template-columns: 1fr 1fr;
            grid-gap: 10px;
            grid-template-areas: '1 2' '3 4';
        padding: 5px;
    }

/* misc */
    a{
        color: var(--accent3);
        text-decoration: none;
        transition: 0.5s;
    }
    a:hover{text-decoration: underline; text-decoration-style: dotted; transition: 0.5s; color: var(--accent4)}

    h1, .text{filter: opacity(60%); font-size: 36px; color: var(--divcolor); margin-bottom: 0px; transition: 0.5s}
    h1:hover{filter: none; transition: 0.5s;}
    .text:hover{text-decoration: none; transition: 0.5s; color: var(--divcolor); filter: none;}

    h2{
        font-size: 16px;
        font-weight: 100;
        position: relative;
        top: -18px;
        background-color: var(--accent2);
            color: var(--maincolor);
        width: fit-content;
        padding-left: 10px;
        padding-right: 10px;
        border: 1px solid var(--accent3);
        margin: 0px;
    }

    .normal{
        text-align: center;
        width: auto;
        margin: auto;
        position: inherit;
    }

    h3{
        color: var(--accent3);
        margin-bottom: 5px;
    }

    iframe{width: 85%; color: lightgray; float: right; margin-top: -17px; height: 16px; border: transparent;}

    select{width: max-content; grid-area: nav; justify-self: flex-end; border-radius: 0; font-family: junipy;}

    article{margin-bottom: 15px;}

    hr{border: 2px dotted var(--accent3);}

/* animation */

    .zoom:hover{transform: scale(0.9); transition-duration: 0.5s;}
    .zoom{transition-duration: 0.5s}

/* THEMES */

 :root{
        --main-bg: url(https://www.transparenttextures.com/patterns/batthern.png);
        --header-bg-img: url(https://i.pinimg.com/1200x/a3/ae/28/a3ae28637d56320fed4870205e038ae0.jpg);
        --maincolor: #D8DFDE;
            --divcolor: white;
            --accent1: #9197AE;
            --accent2: #636B82;
            --accent3: #414A61;
            --accent4: #272f44;
    }

.catboo{
        --main-bg: url(https://i.pinimg.com/1200x/07/6d/68/076d68bf5d2627cb366b789965d3f339.jpg);
        --header-bg-img: url(https://i.pinimg.com/originals/bf/de/43/bfde434abdae2f1d273a03bb983f7394.gif);
        --maincolor: #efe4db;
            --divcolor: #fffdf7;
            --accent1: #a3c5a4;
            --accent2: #567e5c;
            --accent3: #38623e;
            --accent4: #204225;
    }

/* animation */
    @keyframes wiggle{
        0% {transform: translateX(0px);}
        25% {transform: translateX(15px);}
        50% {transform: translateX(0px);}
        75% {transform: translateX(15px);}
        100% {transform: translateX(0px);}
    }

    .wiggle{animation: wiggle 4s infinite linear;}

</style>
