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


body {
    background-color: var(--bgdarker);
    font-family: "Outfit";
    color: var(--txt);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5vw;
}

body > div {
    background-color: var(--bg);
    width: 50%;
    padding: 1vw;
    border-radius: 10px;
}

    a {
        text-decoration:none;
        background-color: var(--accent);
        border-radius: 5px;
        padding: 2px;
        font-style: bold;
        cursor: pointer;
        color: var(--bg);
    }

    /* 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;

            }


 .returnHomePoetry {
    display: block;
 }


        .finalTxt {
            background-color: var(--accent2);
            color: var(--bg);
            border-radius: 5px;
            cursor: pointer;
        }

        .finalTxtHidden {
            display: none;
        }

        .finalTxtHidden.revealed {
            display: flex;
            background-color: var(--bg);
        }


            .footPoetry {
                display: flex;
                justify-content: space-evenly;
            }

        .commentBox {
            display: flex;
            flex-direction: column;
            text-align: justify;
        }

        .commentary {
        background-color: var(--bgdarker);
        color: var(--txt);
        }

        .commentaryTxt {
        visibility: hidden;
        background-color: var(--accent);
        color: var(--bg);
        padding: 10px;
        position: absolute;
        border-radius: 10px;
        }

        .commentary:hover .commentaryTxt {
        visibility: visible;
        display: block;
        width: 20vw;
        }


.octButtons {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 5px;
}

.octButtons > a {
background-color: var(--bgdarker);
color: var(--txt);
}

.octButtons > a:hover {
background-color: var(--accent3);}

@media only screen and (max-width: 768px) { 
.octButtons {
    display: flex;
    flex-direction: column;
}

}