/* 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"),
}

@font-face {
    font-family: "Bebas Neue";
    src: url(../fonts/Bebas_Neue/BebasNeue-Regular.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);
}

   
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--bgdarker);
    font-family: "Outfit";
}

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

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

    mark {
        color: var(--txt);
        background-color: var(--accent3);
    }

/*Would you believe this is all for the homepage?*/
.wrapper {
    display: grid;
    grid-template-areas: "header header header"
    "pfp abt abt"
    "items items pro"
    "footer footer footer";
    grid-template-columns: 1fr 2fr 0.5fr;
    grid-template-rows: 0.5fr 3fr 1fr 0.5fr;
    gap: 1vw;
    width: 80vw;
    height: 60vw;
}

.wrapper > * {
    border-radius: 20px;
}

header {
    grid-area: header;

    background-color: var(--accent);
    color: var(--bg);
    text-align: center;
}


.pfp {
    grid-area: pfp;
    display: grid;
    grid-template-columns: 1fr;

    background-color: var(--accent2);
    overflow: hidden;
}

.pfp > * {
    grid-area: 1/1;
}


     #ratingButton {
        background-color: var(--accent3);
        color: var(--bg);
        font-size: 1rem;
        z-index: 4;
        height: 2rem;
        width: 4rem;
        margin: 1rem;
    }

    #ratingButton:hover {
        background-color: var(--bgdarker);
        color: var(--accent);
    }



    .statuscafepfp { 
        z-index: 2; 
        align-self: end; /* Pins to top */
        justify-self: end;  /* Pins to right */
        background-color: var(--bg);
        padding: 1.5vw;
        width: 90%;
    }
    #statuscafe-username {
        color: var(--accent3);
    }
    #statuscafe-content {
        color: var(--txt);
    }
    .pfpImg {
        width: 100%;
        z-index: 1;
    }
    .pfp > span {
        display: none;
    }

.abt {
    grid-area: abt;
    background-color: var(--bg);
    color: var(--txt);
    padding: 3vw;
    
    font-size: 1.2rem;
    text-align: justify;

    overflow-y: scroll;
    scrollbar-color: var(--txt) transparent;
}

.abt > * {
    color: var(--txt);
}

    .readMore {
        display: none;
    }

.items {
    grid-area: items;
    background-color: var(--accent3);


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

    .items img {
        max-width: 100%;
    }

.pro {
    grid-area: pro;
    background-color: var(--accent);

    overflow: hidden;

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

}
    .pro > img {
        height: 100%;
    }
    
    .pro:hover {
        filter: grayscale(80%);
    }

    .pro > span {
        display: none;
    }

footer {
    grid-area: footer;
    width: 100%;
    background-color: var(--accent2);

    display: flex;
    flex-direction: column;

    color: var(--bg);
    text-align: center;
}

    .bulletinBoard {
        text-decoration: wavy underline var(--accent3);
        font-size: 1.5rem;
    }

    .bulletinBoard:hover {
        color: var(--txt);
        text-decoration: wavy underline var(--txt);
        cursor: pointer;
    }

        .boardContents {
        display: none;
        }

        .boardContents.revealed {
        display: flex;

        background-color: var(--bg);
        }

            .changeTheme {
            flex: 1;

            display: flex;
            flex-direction: column;

            padding: 1vw;
            background-color: var(--accent3);
            }

            .webrings {
            flex: 3;

            background-color: var(--bg);
            color: var(--txt);
            padding: 1vw;
            height: 10vw;
            overflow-y: scroll;
            scrollbar-color: var(--accent) transparent;
            }

            .changelog {
            flex: 1;
            background-color: var(--accent);
            text-align: left;

            height: 10vw;
            padding: 1vw;

            overflow-y: scroll;
            scrollbar-color: var(--bg) transparent;
            }


            @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);}
        }

/* HOME OVER TIME FOR SUBPAGES*/

.subpageContainer {
    display: grid;
    grid-template-areas: "header header header"
    "nav main aside"
    "nav main aside"
    "footer footer footer";

    grid-template-columns: 0.5fr 2fr 0.5fr;
    grid-template-rows: 0.5fr 3fr 1fr 0.5fr;

    gap: 1vw;
    width: 80vw;
    height: 60vw;
}
.subpageContainer > * {
    border-radius: 20px;
}

.subpageContainer > nav, main {
    padding: 2vw;
}

nav {
    grid-area: nav;
    background-color: var(--accent3);

    display: flex;
    flex-direction: column;
    gap: 0.5vw;
}

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

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

    .elevator {visibility: hidden;}


main {
    grid-area: main;
    background-color: var(--bg);
    font-size: 1.2rem;
    color: var(--txt);
    overflow-y: scroll;
    scrollbar-color: var(--accent) var(--bg) ;
}

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

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

    .promptBox {
        display: block;
        background-color: var(--bgdarker);
        border-radius: 15px;
        color: var(--txt);
    }
    .promptBox:hover {
        background-color: var(--accent3);
        cursor: pointer;
    }

    .answerBox {
        display: none;
    }

    .answerBox.revealed {
        display: block;
    }

    .buttonContainer {
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        gap: 0.5vw;
        color: var(--accent3);
    }

    .buttonContainer > * {
        width: 100%;
        background-color: var(--bgdarker);
        font-size: 2rem;
        border-radius: 15px;
        padding: 0.5vw;
        text-decoration: none;
    }


    .buttonContainer > a:hover, span:hover {
        background-color: var(--accent);
    }

    .parentButton {
        cursor: pointer;
    }

        .childButton {
            display: none;
        }

        .childButton.revealed {
            display: flex;
            flex-direction: column;
            width: 95%;
            gap: 0.5vw;
            background-color: var(--bgdarker);
            font-size: 1.2rem;
            color: var(--txt);
        } 

        .childButton > span:hover {
            background-color: transparent;
        }

        .childButton > a:hover {
            background-color: var(--bg);
            color: var(--txt);
        }

        /* Site Buttons/ Socials*/

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

.siteButtonContainer > a > img {
  width: 88px;
}

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


@media (max-width: 600px)  {

.wrapper {
display: flex;
flex-direction: column;
flex: 1;
gap: 3vw;
}

.wrapper > header {
    display: none;
}


    .pfp {
    order: 2;
    flex-shrink: 0;
    position: relative;

    }

    .pfp > img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: top -50px left 0;

    }

    .pfp > span {
    display: block;
    position: absolute;
    font-size: 4rem;
    bottom: 0;
    left: 0;
    padding-left: 5%;
    z-index: 3;
    color: var(--bg);
    font-family: "Bebas Neue";
    }

    .statuscafepfp {
            display: none;
        }

.abt {
order: 3;
flex: 2;
padding: 5vw;
}

    .readMore {
        display: inline;
    }

    .moreText {
        display: none;
    }

    .moreText.revealed {
        display: block;
    }

.pro {
order: 4;
flex: 1;
position: relative;
}

    .pro > img {
        width: 150px;
    }

    .pro > span {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        padding-left: 5%;

        color: var(--bg);
        font-size: 3rem;
        font-family: "Bebas Neue";
    }

.items {
display: grid;
grid-template-columns: auto auto auto;
order: 5;
flex: 2;
}

footer {
order: 6;
flex: 1;
}

        .boardContents.revealed {
        flex-direction: column;
        }

#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);}

    /* SUB PAGES*/
.subpageContainer {
    display: flex;
    flex-direction: column;

    gap: 1vw;
}

.subpageContainer > header {
    order: 2;
    width: 100%;
    font-size: 0.8rem;
}

    nav {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;

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

        background-color: transparent;
        text-align: center;
        flex: 1;
        order: 1;
    }

            nav > a {
                background-color: var(--accent3);
                width: 90%;
                border-radius: 5px;
                padding: 1vw;
            }

            nav > button {
                height: 90%;
                padding: 1vw;
            }

        aside {
            display: none;
        }

        .subpageContainer > main {
            order: 3;
            flex-shrink: 0;
        }
                        .elevator {
                        visibility: visible;

                        position: fixed;
                        bottom: 0;
                        right: 0;

                        background-color: var(--accent2);
                        border-radius: 5px;
                        color: var(--bg);
                    }



}