/* FONTS */

 @font-face {
    font-family: "Balsamiq Sans";
    src: url(../fonts/BalsamiqSans-Regular.ttf) format("truetype"),
}

@font-face {
    font-family: "Outfit";
    src: url(../fonts/Outfit/Outfit-VariableFont_wght.ttf) format("truetype"),
}
 
   :root {
    --bgdarker: #ebe5d5; /* Use for body */
    --bg: #fcfcf0;      /* Use for main */
    --txt: #281e1e;     /* Use for text */
    --accent: #4a3432;  /* Use for asides and links */
    --accent2: #736b9b; /* Use for buttons */
    --accent3: #e07e3d; /* Use for buttons */
    --transbg: rgba(255, 255, 255, 0.8);
    --longcat: url(../images/orangOobie.png);

    --buttonRounded: 20px;
    }

[data-theme='calicoLight'] {
    --bgdarker: #ebe5d5; /* Use for body */
    --bg: #fcfcf0;      /* Use for main */
    --txt: #281e1e;     /* Use for text */
    --accent: #4a3432;  /* Use for asides and links */
    --accent2: #736b9b; /* Use for buttons */
    --accent3: #e07e3d; /* Use for buttons */
    --transbg: rgba(255, 255, 255, 0.8);
    --longcat: url(../images/orangOobie.png);
}

[data-theme='russianBlueDark'] {
    --bgdarker: #151415; /* Use for body */
    --bg: #32343f;      /* Use for main */
    --txt: #e6e6e6;     /* Use for text */
    --accent: #258d42;  /* Use for asides and links */
    --accent2: #ebe5d5; /* Use for buttons */
    --accent3: #185288; /* Use for buttons */
    --transbg: rgba(0, 0, 0, 0.8);
    --longcat: url(../images/blueOobie.png);
}


[data-theme='primaryPurr'] {
    --bgdarker: #f2f3ed; /* Use for body */
    --bg: #ffffff;      /* Use for main */
    --txt: #02001a;     /* Use for text */
    --accent: #bb2c2c;  /* Use for asides and links */
    --accent2: #235789; /* Use for buttons */
    --accent3: #edb034; /* Use for buttons */
    --longcat: url(../images/primaryOobie.png);
}

        /* ONLY FOR THE INDEX */

        @keyframes spinny {
        0% {transform: rotate(0deg);}
        25% {transform: rotate(15deg) scale(1.2);}
        50% {transform: rotate(0deg);}
        75% {transform: rotate(-15deg) scale(1.3);}
        100% {transform: rotate(0deg);}
        }

        @keyframes rainbowWheel {
        0% {background-position: 0% 50%;}
            50% {background-position: 100% 50%;}
            100% {background-position: 0% 50%;}
        }


        .homeWrapper {
            justify-content: center;
            align-items: center;
            display: flex;
            gap: 5vw;
            font-family: "Balsamiq Sans";
            margin: 2vw;
        }

        .homeWrapper > * > img {
            height: 25vw;
        }

        .homeWrapper > * > span {
            font-size: 4rem;
            color: var(--bg);
        }

        .homeWrapper > * {
            display: flex;
            flex-direction: column;

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

            width: 25vw;
            height: 40vw;
            background: var(--accent2);
            border-radius: 20px;
            text-decoration: none;
            
            overflow: hidden;
            cursor: pointer;
            
        }

        #noMoreSilly {
            grid-column: 1 / -1; 
            font-size: 1.5rem;
            margin: 0.5vw;
        }

        #sillyCont:hover:not(.active) {
            background: linear-gradient(22deg, rgba(255, 131, 110, 1) 10%, rgba(255, 219, 135, 1) 30%, rgba(138, 255, 122, 1) 50%, rgba(112, 174, 255, 1) 70%, rgba(239, 138, 255, 1) 90%), black;
            background-size: 500% 100%;
            animation: rainbowWheel 5s linear infinite;
        }

        #sillyCont:hover:not(.active) > span {
            animation: spinny 1s linear infinite;
            color: var(--bg);
        }

        #sillyMenu {
            visibility: hidden; 
            position: absolute;
            opacity: 0;

            transition: opacity 0.2s linear;

            display: grid;
            grid-template-columns: auto auto;
            align-items: center;
            justify-content: center;
        }

        #sillyMenu > a > img {
            width: 9.5vw;
            background-color: var(--transbg);
            border: var(--bg) 3px solid;
            border-radius: 20%;
            margin: 0.3vw;
        }

        #sillyMenu.show {
            visibility: visible;   
            opacity: 1;
        }

        #seriousCont:hover {
            filter: grayscale(60%) saturate(20%);
            transition: filter 0.2s linear;
        }

        @media (hover: hover) {
                #about:hover {content: url(../../assets/images/icons/hover/collarH.png);}
                #art:hover {content: url(../../../assets/images/icons/hover/paintingH.png);}
                #ocs:hover {content: url(../../../assets/images/icons/hover/mouseH.png);}
                #shiny:hover {content: url(../../../assets/images/icons/hover/tunaH.png);}
                #socials:hover {content: url(../../../assets/images/icons/hover/socialsH.png);}
                #write:hover {content: url(../../../assets/images/icons/hover/featherH.png);}
        }

          /* NOTICE BOARD ON INDEX */
                .bgUpdates {
                color: var(--bg);
                background-color: var(--accent);
                width: 57%;
                border-radius: 20px;
                text-align: center;
                align-content: center;
                overflow: hidden;
                }


                .updatesBanner {
                color: var(--bg);
                text-decoration: underline wavy var(--bg);
                }

                    .updatesBanner:hover {
                        color: var(--accent3);
                        cursor: pointer;
                    }

                .updatesContent {
                 display: none;
                }

                .updatesContent.revealed {
                 display: grid;
                grid-template-areas: 
                 "changeTheme webrings"
                 "changeTheme webrings"
                 "statuscafe statuscafe"
                 "what what";
                 grid-template-columns: 2fr 3fr;
                 justify-content: center;
                 align-items: center;
                 background-color: var(--bg);
                }

                .changeTheme {
                    grid-area: changeTheme;

                    display: flex;
                    flex-direction: column;
                    padding: 1vw;
                    background-color: var(--accent3);
                }

                .webrings {
                    grid-area: webrings;
                    
                    color: var(--txt);
                    padding: 1vw;
                    height: 5vw;
                    overflow-y: scroll;
                    scrollbar-color: var(--accent) transparent;
                }

                .statuscafe {
                    grid-area: statuscafe;
                    background-color: var(--accent2);
                    padding: 1vw;
                    color: var(--bg);
                }

                #statuscafe-username > a {
                    color: var(--accent3);
                }

                .what {
                    grid-area: what;
                }


/* ALL */


    .disabledLink {
      cursor: not-allowed;      /* Show the 'blocked' cursor */
        pointer-events: none;     /* Block all click events */
        text-decoration: none;
        color: var(--accent2);
        }


.elevator {visibility: hidden;}

body {
    background-color: var(--bgdarker);
    justify-items: center;
    font-family: "Balsamiq Sans";
}

hr {
    width: 100%;
    height: 3px;
    background-color: var(--accent3);
    border: none;

}

mark {
    background-color: var(--accent2);
    color: var(--bg);
}

h2, h3, h4, h5, h6 {
    color: var(--txt);
}



/* SUBPAGES */

.pagecontainer {
    width: 80vw;
    height: 60vw;
    display: grid;
    grid-template-columns: 1fr 3fr 0.5fr;
    grid-template-rows: 0.5fr 3fr 0.5fr;
    grid-template-areas:
    "header header header "
    "nav  main aside"
    "footer footer footer";
    font-family: "Balsamiq Sans"; 
}

.pagecontainer > nav, main {
    margin: 1vw;
    padding: 3vw;
    border-radius: 25px;
}

header { 
    grid-area: header;
    display: flex;
    text-align: center;
    justify-content: center;

    border-radius: 20px;
    padding: 1vw;
    margin: 1vw;
    background-color: var(--accent3);

}

    header > h1 {
    color: var(--accent1);
    }

nav    { 
    order: -1;
    grid-area: nav;
    background-color: var(--accent);
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
}

    nav a, p, span {
        font-size: 1.5rem;
        color: var(--bg);
        text-decoration: none;
        display: block;
    }


    nav a:hover {
        color: var(--txt);
        text-decoration: underline wavy var(--txt);
    }

    .currentPage {
        text-decoration: line-through solid var(--txt);
        color: var(--accent2);
    }


main   { 
    grid-area: main; 
    overflow-y: scroll;  
    background-color: var(--bg);
    scrollbar-color: var(--accent) transparent;
    text-align: justify;
}

        p, ul, li {
        color: var(--txt);
        font-size: 1.1rem;
        }

        a {
        color: var(--accent2);
        }

        a:hover {
            color: var(--accent3);
        }


aside  {
  grid-area: aside;
  background-image: var(--longcat);
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
}


footer { 
  grid-area: footer; 
  text-align: center;
  color: var(--txt);
}

    /* BUTTONS */

    button {
        background-color: var(--txt);
        color: var(--bgdarker);
        font-family: "Balsamiq Sans";
        border-radius: 10px;
        cursor: pointer;
    }


    .shinyButton {
        background-color: var(--bgdarker);
        border-radius: 15px;
        padding: 10px;
        font-size: 1.5rem;
        color: var(--accent2);
        display: block;
        text-decoration: none;
        margin: 1vw;
    }

    .shinyButton:hover {  
    background-color: var(--accent3);
    color: var(--accent2);
    cursor: pointer;
    transition: color 0.3s, background-color 0.3s;
    }

        /* NESTED BUTTONS */

            .parentButton {
                background-color: var(--bgdarker);
                border-radius: 15px;
                padding: 10px;
                font-size: 1.5rem;
                color: var(--accent2);
                margin: 1vw;
            }

            .parentButton:hover {  
            background-color: var(--accent3);
            cursor: pointer;
            transition: color 0.3s, background-color 0.3s;
            }

            .childButton {
                display: none;
            }

            .childButton.revealed {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 5px;
                margin-top: 5px;
            }

            .childButton a {
                background-color: var(--accent2);
                width: 90%;
                border-radius: 5px;
                padding: 5px;

                color: var(--bg);
                text-decoration: none;
            }

            .childButton > a:hover {
                background-color: var(--accent);
                transition: background-color 0.2s;
            }

            .childButton > p {
                padding: 0vw 2vw 0vw 2vw;
            }

            .childButton > p > a {
                text-decoration: underline wavy var(--txt);
                padding: none;
                background-color: transparent;
                color: var(--accent3);
            }

    /* IMAGES IN MAIN */

    .floatRight {
        float: right;
        width: 150px;
    }

    .floatLeft {
        float: left;
        width: 150px;
    }

    /* SOCIALS */

.siteButtonContainer {
  width: 100%;
  display: grid;
 grid-template-areas: "auto auto auto auto";
align-items: center;
justify-content: center;
}

.siteButtonContainer > a > img {
  height: 3vw;
}

.siteButtonContainer > a:hover > img {
  filter: brightness(50%);
}

/* ARCHIVES */

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

/* SITEMAP SPECIAL */

.sitemapSpecial {
    justify-items: center;
}

.sitemapSpecial * {
    font-size: 1.2rem;
    line-height: 1.8rem;
}

/* MEDIA QUERIES */
        @media only screen and (max-width: 768px) {

                    /* MAIN MOBILE */

                    .homeWrapper {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-family: "Balsamiq Sans";
                    width: 100%;
                    margin: 10vw;
                    }

                    .homeWrapper > * {
                        height: 25vw;
                        width: 60%;
                    }

                    .homeWrapper > * > span {
                        background-color: transparent;
                    }


                    .homeWrapper > * > img {
                        display: none;
                    }

                    .homeWrapper > * > span {
                        font-size: 3rem;
                        color: var(--bg);
                    }   

                    #sillyMenu {
                    visibility: hidden; 
                    position: absolute;
                    margin: auto;
                    opacity: 0;

                    transition: opacity 0.2s linear;

                    display: grid;
                    grid-template-columns: auto auto auto;
                    align-items: center;
                    justify-content: center;
                    }

                        #sillyMenu > a > img {
                        width: 20vw;
                        border-radius: 20%;
                        margin: 0.3vw;
                    }

                    .updatesContent.revealed {
                        display: flex;
                        flex-direction: column;
                    }

                    .webrings {
                        height: auto;
                    }

                    #about {content: url(../../assets/images/icons/hover/collarH.png);}
                    #art {content: url(../../assets/images/icons/hover/paintingH.png);}
                    #ocs {content: url(../../assets/images/icons/hover/mouseH.png);}
                    #shiny {content: url(../../assets/images/icons/hover/tunaH.png);}
                    #socials {content: url(../../assets/images/icons/hover/socialsH.png);}
                    #write {content: url(../../assets/images/icons/hover/featherH.png);}

                    /*NON-HOME PAGES*/

                    .pagecontainer {
                        display: flex;
                        flex-direction: column;
                    }

                        nav {
                        display: grid;
                        grid-template-columns: auto auto auto;
                        grid-template-rows: 1fr 1fr 1fr 1fr;
                        justify-content: center;
                        align-items: center;
                        gap: 1vw;
                        background-color: transparent;
                        }

                        nav > a, span {
                            font-size: 1rem;
                            background-color: var(--accent);
                            border-radius: 5px;
                            padding: 3vw;
                        }



                    main {
                        overflow: visible;
                        padding: 2.5vw;
                    }



                    aside {
                        display: none;
                    }

                    .elevator {
                        visibility: visible;

                        position: fixed;
                        right: 1vw;
                        bottom: 1vw;

                        padding: 2vw;
                        font-family: "Balsamiq Sans";
                        background-color: var(--accent2);
                        border-radius: 5px;
                        color: var(--bg);
                    
                    }

                    .floatLeft, .floatRight {
                        display: block;
                        float: none;
                        width: 50%;
                    }

        }


        /* EXPERIMENTAL */