/* ==================================================
   ROOT (EDIT THESE TO CHANGE THEME)
================================================== */



:root {

    /* Main pink color used for:
     - title
     - buttons
     - links
     - borders
     - hover effects
     - profile description text */
    --primary-color: #ffbbd7;

    /* Brown text color used throughout the layout */
    --text-color: #b79c8b;

    /* accent background color used for:
     - profile description box
     - status bubble outline glow */
    --accent-bg: rgba(255, 240, 245, 0.767);

    /* Light color used in button and card gradients */
    --card-bg: #FDF6F9;

    /* Main white container background */
    --container-bg: snow;

    /* Overall page background */
    --page-bg: #fdf1f6;


    /* Profile picture */
    --profile-picture: url(https://file.garden/anKSOW1rZXZuEam6/psfp);

    /* Banner picture */
    --banner-picture: url(https://file.garden/anKSOW1rZXZuEam6/thething.png);


    /* Scallop border settings */
    --border-width: 9px;
    --border-style: solid;

    /* Scallop Border image */
    --border-image: url(https://files.catbox.moe/ulku11.png) 7 fill round;




    /*
If you want to change the border, you can go to:
https://scripted.neocities.org/images

There are lots of different border styles you can choose from, plus other tutorials and fun things you can add to your site too

When you open the page, click on a border you like and it will show you some code underneath it.

Copy the values it gives you (url, border width, and fill style) and replace the ones above.

Make sure they all match properly:
- the URL replaces the current border image URL
- the border width should match the number shown
- the fill round settings should match the number shown

Example:
if the border width says 8px instead of 9px, change it to 8px above so everything lines up correctly.
*/

    /* ==================================================
   GLOBAL / BODY
================================================== */



    html {
        overscroll-behavior: none;



    }

    /* Hide all scrollbars (Chrome, Firefox, Safari, Edge, Etc) */

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: transparent;
    }

    * {
        scrollbar-width: none;
    }

    * {
        -ms-overflow-style: none;
    }

    * {
        cursor: url("data:application/octet-stream;base64,AAACAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAA7XP/AInoPQD///8ACSBJALTj/wBtxv8A1rr/AK+h/wAOPZIAW8H/AAB50gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARAAAAEQAAAAAAAAAAAAAAJOUQAk5AAAAAAAAABEBEACamTkJqQAAAAAAAAARARAJqZmpmakAAAAAAAAAAQAQmTOpkzqpAAAAAAAAAAEREJpVqmqquQAAAAAAAAAAAJmbqrubu5kAAAAAAAAAAAmbqqqruZm1kAAAAAAAAACbqqVVqquQmpAAAAAAAAAAl3pTM1p3kAmQAAAAAAAAAJcKUAA6B5AAAAAAAAAAAACXAFMDUAeQIgAAAAAAAAAJmlWqOqVamSIAAAAAAAAAm5uqqrqqq5uSIgAAAAAAAJtbuqu7qruFsiAAAAAAAACVibu7u7u5WFkAAAAAAAAARFmZu7u5mZVEAAAAAAAAAERJCZmZmQCURAAAAAAAALBEQAAAAAAABEQAAAAAAACwAAAAAAAAAAAAAAAAAAAAuwAAAAAAAAAAAAAAAAAAALu7AAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////8/P///Bj//JwI//yYAP/+0AD//hAA///AAP//gAB//wAEf/8ABn//AAf//wAE//4AAP/8AAA//AAAf/wAAP/8AAD//CAw//R/+P/3////8/////D////w=="), auto;
    }
}

.linkse {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.linkse img {
    gap: 5px;
    margin: 10px;
}

.linkse img:hover {
    transform: scale(1.1);
}


.textbox {
    overflow: scroll;
    overflow-x: hidden;
    height: 10em;
    padding: 1rem;
    border: 3px solid;
    border-image-slice: 1;
    border-color: #ffbbd7;
    border-style: dashed;
    max-height: 200px;
    background-color: #ffffff;
}






.backimage {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 20;
    background: transparent url("https://graphic.neocities.org/tumblr_inline_mo65v4N86Y1qz4rgp.gif") repeat-x scroll 0% 0%;

}

body {
    min-height: 100vh;
    margin: 0;
    font-family: "basiic";
    color: var(--text-color);




    display: flex;
    flex-direction: column;
    align-items: center;
    /* if you don’t want to use a variable for any color (or anything else),
   you can just remove it and use a hex code or any other value instead.

   example:
   background: #fdf1f6;

   you can change colors anywhere in the code!

   the :root section is just to make editing easier :)
*/
    background: var(--page-bg);
    background-image: url(https://file.garden/anKSOW1rZXZuEam6/wbafevr);
    background-size: 100%;
    background-attachment: fixed;

    background-repeat: repeat;

}


/* CUSTOM FONT */
@font-face {
    font-family: basiic;
    src: url(https://files.catbox.moe/jtvuhg.ttf);
}

/* WRAPPER */

.wrapper {
    transform: scale(0.9);
    /* change the number to make the layout bigger or smaller
                            
                            1 and up = default or bigger layout
                            0.9 and lower = smaller layout
                        */

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin-top: -30px;
}

/* ==================================================
   OUTER + MAIN CONTAINERS
================================================== */

/* this is the pink scallop border */
.container-outer {
    border-width: var(--border-width);
    border-style: var(--border-style);
    border-image: var(--border-image);
    opacity: .9;
}

/* this is the white inner container */
.container {
    margin: 10px;
    padding: 20px;
    max-width: 800px;
    min-width: 800px;
    background: var(--container-bg);
    border-radius: 20px;
}

.clique {

    color: rgb(104, 104, 163);
}

.clique-link {
    color: #8c8ed8;
    background-color: rgba(240, 248, 255, 0.63);
    text-decoration: none;
}

/* ==================================================
   HEADER
================================================== */
.header {
    position: relative;
}

.site-title {
    font-size: 30px;
    letter-spacing: 0.3rem;
    font-weight: bold;
    color: var(--primary-color);
    font-family: "garamond";
}

/* this banner area is very customizable!
   you can use one big image that covers the whole area (like it does now),
   or use a small image that repeats (tiles) */
.banner {
    height: 360px;
    border-radius: 10px;
    border: 3px solid var(--primary-color);
    background: var(--banner-picture);
    opacity: 0.;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* replace for a repeating or tiled bg!
    
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
*/

/* ==================================================
   PROFILE SECTION
================================================== */

/* controls the profile picture area and description box positioning */
.profile-unit {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: -336px;
    padding-left: 20px;
    margin-left: 250px;
    margin-bottom: 195px;

    position: relative;
    z-index: 5;
}

.profile-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pic {
    opacity: 1;
    transition: ease-in-out 200ms;
}

.pic:hover {
    transform: scale(1.2) translateX(-7px);

}

/* PROFILE PICTURE FRAME */
.profile-border {
    width: 130px;
    height: 130px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-width: var(--border-width);
    border-style: var(--border-style);
    border-image: var(--border-image);
}

/* PROFILE PICTURE */
.profile {
    width: 110px;
    height: 110px;
    border-radius: 10px;

    background-image: var(--profile-picture);
    background-size: 100%;
    background-repeat: no-repeat;
}

/* STATUS BUBBLE */
.status-bubble {
    font-size: 11px;
    padding: 3px 6px;

    color: var(--text-color);
    background: var(--page-bg);

    border-radius: 999px;
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 0 2px var(--accent-bg);

    white-space: nowrap;
}

/* STATUS / DESCRIPTION BOX */
.cover-desc {
    font-size: 12px;
    width: 100%;
    max-width: 360px;
    height: 40px;

    overflow: auto;

    color: var(--primary-color);
    background-color: var(--accent-bg);

    padding: 10px;
    margin: 3px;
    border-radius: 6px;

    position: relative;
    top: 70px;
    transition: ease-in-out 200ms;


}

.cover-desc:hover {
    transform: scale(1.2) translateX(23px) translateY(4px);

    color: rgb(233, 155, 182);
}

/* ==================================================
   NAVIGATION BUTTONS
================================================== */
.nav {
    margin-top: 14px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.btn {
    padding: 16px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;

    color: var(--primary-color);
    background-image: linear-gradient(to bottom, var(--page-bg), var(--card-bg));

    border-radius: 80px;
    box-shadow: 0 0 0 2px var(--primary-color);

    transition: ease-in-out 200ms;
}

/* BUTTON HOVER */
.btn:hover {
    transform: translateY(-5px) scale(1.08) rotate(-1deg);
    box-shadow: 0 6px 0 var(--primary-color);
}

.btn:active {
    transform: scale(0.95);
    box-shadow: 0 3px 0 var(--primary-color);
}

/* ==================================================
   MAIN TEXT BOX
================================================== */
.main-text {
    margin-top: 20px;
    max-height: 500px;
    overflow: auto;

    font-size: 13px;
    text-align: justify;
    padding: 0;

    border-width: var(--border-width);
    border-style: var(--border-style);
    border-image: var(--border-image);
    transition: ease-in-out 200ms;
}

/* TEXT INSIDE */
.main-text p {
    padding: 10px;
    letter-spacing: 0.07rem;
}

.main-text img {
    padding: 10px;
    letter-spacing: 0.07rem;
    transition: ease-in-out 200ms;
}

@keyframes rwdcur177201 {

    0%,
    49.9%,
    100% {
        cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABj0lEQVRYhd1WS2rDQAyVlZrQzZBlzpID9C7d2OQkxt30Lt0GepTQpfGqZhhNF0bOxIwnkj+09MEQ48ij955GsgFmAqvGY9X4uc8vAlaNt468dbSYBK5F6lcJLHHhaQ0CXWFgDz0JOh8yzbNqB1Jqu8Ko3VARwKrxXWFEcZsQkELjhJhASj2qqj4TYe9L1uoO0PmQ7d/a+QqWwhF5R72ylHKOcUQiB0RzwBH5vL6pxwwgtj1mAByX1y04Ir9DfAaAb0meyeSsKHTB0bTycVxqf1Ubfn71v7Y0kNftcPpZuS3NXZwESQJsvS3NsOmjzcM4Jppy4X+8DTcnkNctnI799el4O+kAtynIdodxEky2Idf//cUMJBixe3wAx8RtaWCH08NaVQJOHMKWZlDPJKTq1QReP6ZH8dgBiXqARAl2iFk4AcMEsXubITbhpGv1SbgF1ATyur07/dL/ViEgnfGad4EIXM/LlfzlGq8zL46RfhOIv+amOmKMMOZRC6oIMIkwSQxMTpJcTWBMJAZp4j+DH6f8wKHjKg2nAAAAAElFTkSuQmCC) 14 0, auto;
    }

    50%,
    99.9% {
        cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABkUlEQVRYhd1WS2rDMBAdj2tCNyLLnCX3yTYmJzHutscJ9CihS+NVjdAoCzOOYmRlxh9a+kAkWGPNe2+ksQBmAqvGY9X4ue8vAlaNt468dbSYBK5F6lcJLHHhbQ0C3dnADnoSdNlnmnfVDqTUdmejdkNFAKvGd2cjituEgBQaJ8QEUupRVfWZCM++ZKzuAF322e6jna9gKRyRd9QrSynnGEckckDUBxyRL+qHeswAYstjBsBxRd2CI/I54jsA/EjyTCZnRaELjqaVj+NS66uO4dd3/2tLA0XdDrufldvSPMVJkCTA1tvSDIu+WjyMY6IpF/7H13BzAkXdwvHQ/z8eHjsd4NEF2e4wToLJY8j1p8tnTwJOw1zsGW/AMXFbGshxulmrSsCJQ9jSDOqZhFS9mgBWp8m5sQMS9QCJEuSImSPybHOYIPZsM8Q6nHSs3gm3gJpAUbdPx1A6twoBaY/XfAtE4Hpeb+Svt3ideXCM9E4gvs2Fd4LU7g9jXh1BFQEmESaJgclJkqsJjInEIE38Z3AHeIe+ZwyXlZ8AAAAASUVORK5CYII=) 14 0, auto;
    }
}

/* LINKS */
.main-text a {
    color: var(--primary-color);
    text-decoration-style: wavy;
    transition: ease-in-out 200ms;

}

.main-text a:hover {
    font-style: italic;
}

/* STICKY HEADER */
.text-box-headers {
    position: sticky;
    top: 0;
    z-index: 10;

    padding: 10px;
    margin: 0 2px 5px;
    letter-spacing: 0.09rem;

    font-size: 20px;
    text-align: center;
    line-height: 20px;
    font-family: "garamond";

    background: var(--container-bg);
    border-bottom: 1px dashed var(--text-color);
    border-radius: 5px 5px 0px 0px;
}

.main-text img {
    overflow: hidden;
    transition: ease-in-out 100ms;
}

.main-text img:hover {
    transform: scale(1.02);
}



/* ==================================================
   GRID / CARDS
================================================== */


.grid {
    margin-top: 20px;
    display: grid;

    /*
   change the 3 below to control
   how many cards appear per row
    */
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.card {
    height: 100px;
    padding: 10px;
    overflow-y: auto;

    text-align: justify;
    background-image: linear-gradient(to bottom, var(--page-bg), var(--card-bg));

    border: 2px solid var(--primary-color);
    border-radius: 10px;

    transition: all 0.25s ease;
}

.card p {
    letter-spacing: 0.07rem;
}

/* HOVER EFFECTS */
.card:hover {
    transform: translateY(-6px) rotate(1deg) scale(1.02);
    box-shadow: 0 8px 0 var(--primary-color);
    opacity: 1;
}

.card.image-card:hover img {
    opacity: .8;
}

.card:nth-child(even):hover {
    transform: translateY(-6px) rotate(-1deg) scale(1.02);
    opacity: 1;
}

/* IMAGE CARD */
.card.image-card {
    padding: 0;
    height: 120px;
    overflow: hidden;
}

.card.image-card img {
    width: 100%;
    height: 100%;
    opacity: .5;
    object-fit: cover;
    display: block;
}

/* ==================================================
   FOOTER
================================================== */
footer {
    opacity: 1;
}

footer .inner p {
    font-size: 13px;
    text-align: center;
}

footer a {
    color: var(--primary-color);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline wavy 1.5px;
}

/* ==================================================
   MOBILE
================================================== */
@media (max-width: 600px) {

    .grid {
        align-content: center;
    }

    .profile-unit {
        margin-top: -60px;
        padding-left: 0;
        text-align: center;
        transform: scale(0.9);
    }

    .btn {
        transform: scale(0.9);
        line-height: 0.5;
    }
}