/*** Containers for CSS grid ***/  
    .index-container {

        border-radius: 15px;
        background-color: rgba(234, 217, 229, 0.9);
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            "header header header header"
            "nav nav nav nav"
            "intro intro intro intro"
            "avatar avatar tamanotchi tamanotchi"
            "avatar avatar button button"
            "neighbours neighbours other-buttons other-buttons"
            "whats-new whats-new to-do to-do"
            "footer footer footer footer";
        grid-gap: 20px;   
    }

    .fuck-ai-container {
        border-radius: 15px;
        background-color: rgba(234, 217, 229, 0.9);
	    
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            "header header header header"
            "nav nav nav nav"
            "intro intro intro intro"
            "wip wip wip wip"
            "done done done done"
            "footer footer footer footer";
        grid-gap: 20px;   
    }
    
    
    
    .list-container {
        border-radius: 15px;
        background-color: rgba(234, 217, 229, 0.9);
        padding: 15px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header header"
            "nav nav"
            "intro intro"
            "main main"
            "footer footer";
        grid-gap: 20px;   
    }
    
    .abyss-container {
        border-radius: 15px;
        padding: 15px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header header"
            "nav nav"
            "intro intro"
            "main main"
            "footer footer";
        grid-gap: 20px;
    }

    /* element assignment */
    header { grid-area: header; }
    nav { grid-area: nav; }
    main { grid-area: main; }
    footer { grid-area: footer; }
    aside { grid-area: aside; }
    .intro { grid-area: intro; }
    .button { grid-area: button; }
    .tamanotchi { grid-area: tamanotchi; }
    .whats-new { grid-area: whats-new; }
    .to-do { grid-area: to-do; }
    .neighbours { grid-area: neighbours; }
    .avatar { grid-area: avatar; }
    .about-me { grid-area: about-me; }
    .other-buttons { grid-area: other-buttons; }
    .wip { grid-area: wip; }
    .done { grid-area: done; }
/*** containers for CSS grid end ***/



body {
    background:url('Fish-Background-sm-sparkle2.jpg');
    
    color: darkslateblue;
    width: 80%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 20px;
    font-family: Arial, Helvetica, sans-serif;
}

/* Abyss styling section */
    body#body-abyss {
        background: black;
        color: darkslateblue;
        width: 75%;
        max-width: 900px;
        margin: 0 auto;
        padding: 20px 20px;
        font-family: Arial, Helvetica, sans-serif;
    }


    nav#nav-abyss {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    nav#nav-abyss button {
        border-radius: 50px;
        border: 2.5px solid darkslateblue;
        background: darkslateblue;
        padding: 5px 0px;
        color: #99C8C7;
        width: 200px;
        margin: 0px 20px;
    }

    nav#nav-abyss button:hover {
        background: linear-gradient(to right, magenta, cyan, gold);
        color: darkslateblue;
    }
        
    section#section-abyss {
        display: block;
        color: #99C8C7;
        background: none;
        border: 3px solid transparent;
        border-image: linear-gradient(to right,  magenta, cyan, gold);
        border-image-slice: 1;
        border-radius: 0px;
        padding: 20px;
        margin: 20px 0px;
    }
/* Abyss styling section end */




/*** page specific elements ***/

/* index page elements */

    /* box for avatar image */
        .avatar {
            display: block; 
            background: #EAD9E5;
            color: darkslateblue;
            border: 3px solid transparent;
            border-image: linear-gradient(to right, magenta, cyan, gold);
            border-image-slice: 1;
            border-radius: 0px;
        }

        .avatar img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    /* box for avatar image end */

    .neighbours {
        display: block;
    }

    .tamanotchi, .button {
        display: block;
        text-align: center;
        justify-content: center;  
    }
/* index page elements end */

/* fuck-ai page elements */
    .wip, .done {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .wip-item, .done-item {
        box-sizing: border-box;
        width: 100%;
        margin: 10px 0px;
    }

    .wip-item img, .done-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: top;
    }
/* fuck-ai page elements end */

    

/*** general styling ***/

* {
    box-sizing: border-box;
}

header {
    border: 3px solid transparent;
    border-image: linear-gradient(to right, magenta, cyan, gold);
    border-image-slice: 1;
    border-radius: 0px;
    text-align: center; 
}

/* navigation bar */
    nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 20px 0px;
    }

    button {
        border-radius: 50px;
        border: 2.5px solid darkslateblue;
        background: #99C8C7;
        padding: 5px 0px;
        color: darkslateblue;
        width: 200px;
        margin: 0px 20px;
    }

    button:hover {
        background: linear-gradient(to right, magenta, cyan, gold);
    }
/* end navigation bar */

aside {
    display: block;  
}

/* comment: anything that needs a rainbow border gets a section tag */
section {
    display: block; 
    background: #EAD9E5;
    color: darkslateblue;
    border: 3px solid transparent;
    border-image: linear-gradient(to right, magenta, cyan, gold);
    border-image-slice: 1;
    border-radius: 0px;
    padding: 20px;
    margin: 20px 0px;
}

footer {
    color: darkslateblue;
    margin: 0px 15px;    
}

/* scrollbox */
    .scrollbox {
        height: 200px;
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: #a40739 #a40739;
        scroll-behavior: smooth;
    }

        /* (Respect reduced-motion preferences) */
    @media (prefers-reduced-motion: reduce) {
        .scrollbox { scroll-behavior: auto; }
    }
/* scrollbox end */

/* comment: box for introduction text */
.intro {
    text-align: center;
}

/* images */
    .image-container {
        margin: 20px 0px;  
    }

    .image-container img, .glitter-gif img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
/* images end */

/* text, headings, links etc. */
    h1 {
        text-align: center;
        font-family: "Courier New", monospace;
        color: purple;
    }
    
    h2 {
        text-align: center;
        font-family: "Courier New", monospace;
        color: darkmagenta;
    }

    h6 {
        text-align: center;
    }
     
    a {
        color: darkslateblue;  
    }

    a:hover {
        color: #a40739;  
    }

    hr {
        color: darkslateblue;
    }

    li:not(:first-of-type) {
        padding-top: 0.7em;
    }

    li:not(:last-of-type) {
        padding-bottom: 0.7em;
    }  
/* text, heading, links etc. end */

/* Rainbow Killi Fish - https://www.cursors-4u.com/cursor/rainbow-killi-fish */
    * {
      cursor: url('https://cdn.cursors-4u.net/previews/rainbow-killi-fish-77004045-32.webp') 32 32, auto !important;
    }
/* End www.Cursors-4U.com Code */