/* CUSTOMIZING ZONE!!!

if you want to customize the colors, you can change them up here by changing these values! */

:root {
    --leafcolor: #718227;
    --boxbgcolor: #9fb348;
    --bordercolor: #323a0d;
    --textcolor: #eee3c8;
    --linkcolor: #decf92;
    --contrastcolor: #f7ea76;
}

/* and here are the two fonts used, so you can change them up here if you want. */

body {
    font-family: 'Montserrat', 'verdana', sans-serif;
    font-size: 10pt;
}

.container h1 {
    font-family: 'Coiny', 'Arial Black', sans-serif;
    font-size: 52pt;
}


/* you can change the bullet point for lists with this. just delete it if you want normal bullet points! */

ul li {
    list-style-type: "✿ ";
}


/* below is the rest of the layout! */


/* overall CSS */

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--leafcolor) var(--textcolor);
}

body {
    background-color: var(--textcolor);
}

::selection {
    background-color: var(--contrastcolor);
    color: var(--bordercolor)
}

a {
    font-weight: bold;
    color: var(--linkcolor);
}

a:visited {
    color: var(--bordercolor);
}

a:hover,
a:focus {
    color: var(--contrastcolor)
}

button {
    cursor: pointer;
    background-color: var(--contrastcolor);
    font: inherit;
    font-size: smaller;
    border: 1px var(--bordercolor) solid;
    border-radius: 10px;
    padding: 6px;
}

button:active {
    filter: brightness(80%);
}

blockquote {
    border-left: 5px solid var(--contrastcolor);
    padding-left: 20px;
    text-align: left;
}

ul {
    padding-left: 80px;
    text-align: left;
    list-style-position: inside;
}

ol {
    list-style-position: inside;
    padding-left: 80px;
}

img {
    max-width: 100%;
}

summary {
    cursor: pointer;
}

hr {
    width: 50%;
    border-top: var(--bordercolor) 1px solid
}

/* leaf shape stuff. the border-radius gives the div the leaf shape, and shape-left and shape-right make the text fit inside that shape. */

.container {
    margin: 100px auto;
    background-color: var(--leafcolor);
    width: 700px;
    border-bottom-left-radius: 600px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 600px;
    border-top-left-radius: 0px;
    height: 700px;
    position: relative;
    text-align: justify;
    color: var(--textcolor);
    border: 1px solid var(--bordercolor);
}

.shape-left {
    float: left;
    shape-outside: polygon(0.12% -0.44%, 0.96% 11.71%, 0px 696px, 100.14% 99.76%, 99.63% 92.1%, 88.73% 89.24%, 71.98% 84.13%, 51.53% 75.38%, 33.62% 65.34%, 19.96% 54.53%, 8.5% 41.32%, 14px 224px, 0.1% 21.32%, 0.24% 0.09%, 41.45% 0.35%, 73.01% 2.96%, 96% 7.67%, 84.51% -0.7%);
    width: 50%;
    height: 700px;
    shape-margin: 15px;
}

.shape-right {
    float: right;
    width: 50%;
    height: 700px;
    shape-outside: polygon(347px 2px, 3px 2px, 1.7% 8.3%, 19.91% 12.96%, 40.06% 20.36%, 59.25% 30.24%, 72.02% 38.47%, 81.85% 47.44%, 90% 56.61%, 95.1% 64.9%, 98.67% 75.97%, 100.02% 84.84%, 99.11% 96.48%, 98.85% 99.85%, 60.55% 99.92%, 37.99% 98.25%, 20.44% 96.14%, -1.55% 92%, 21.97% 99.59%, 99.62% 101%);
    shape-margin: 10px;
}

/* end of leaf shape */


/* this is the pagetitle h1 specifically, the one inside the leaf. */
.container h1 {
    position: absolute;
    text-align: left;
    top: -50px;
    left: -20px;
    letter-spacing: 3px;
    line-height: 1;
    text-shadow: -1px -1px 0 var(--leafcolor), 1px -1px 0 var(--leafcolor), -1px 1px 0 var(--leafcolor), 1px 1px 0 var(--leafcolor);
}

/* this is for the three miniboxes. they're all in a container called topright. */

.topright {
    position: absolute;
    right: 0;
    width: 250px;
    top: 50px;
}

.topright ul {
    padding-left: 0;
}

.topright details {
    position: absolute;
}

.topright summary {
    background: var(--leafcolor);
    border: 1px solid var(--bordercolor);
    border-radius: 5px;
    padding: 2px;
    padding-left: 15px;
    padding-right: 20px;
    width: fit-content;
    list-style-type: "+ ";
}

.topright details[open] summary {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom: none;
    list-style-type: "- "
}

.updatescontent {
    background-color: var(--boxbgcolor);
    color: var(--bordercolor);
    height: 200px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid var(--bordercolor);
    position: relative;
    z-index: 3;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--textcolor) var(--bordercolor);
    padding: 15px;
    text-align: left;
    font-size: small;
    width: 250px;
}

.updatescontent p {
    margin-top: 0;
}

#two {
    margin-top: 50px;
    margin-left: 50px;
}

#three {
    margin-top: 100px;
    margin-left: 100px;
}

#vines {
    margin-top: -20px;
    z-index: 1;
    position: absolute;
    pointer-events: none;
}

/* end of top right miniboxes. */

/* this is the container for the big round button that opens the popup! */
.buttonbox {
    position: absolute;
    bottom: 0;
}

/* and this is the styling for the button itself. */
.buttonbox button {
    width: 150px;
    height: 150px;
    border-radius: 100%;
    border: 1px solid var(--bordercolor);
    background-color: var(--leafcolor);
    cursor: pointer;
    font: inherit;
    font-weight: bold;
    font-size: 16pt;
    color: var(--textcolor);
}

/* end of button stuff. */

/* this is the styling for the popup page */

#popuppage {
    overflow: auto;
    height: 650px;
    width: 600px;
    margin: 120px auto;
    color: var(--bordercolor);
    background: var(--textcolor);
    border: 1px solid var(--bordercolor);
    padding: 15px;
    border-radius: 5px;
    resize: both;
}

/* this is the styling for the button that closes the popup page. */
#close {
    position: absolute;
    top: 0;
    right: 5px;
    background-color: transparent;
    font: inherit;
    border: none;
}

#popuppage h2, #popuppage h1 {
    margin-top: 0;
}


/* below is the styling for small screens and mobile! a lot of things move around; "topright" goes on the bottom left, for one thing... */

@media only screen and (max-width: 600px) {

    .container {
        border-radius: 10px;
        width: 95%;
        padding: 20px;
        height: unset;
        margin-bottom: 150px;
    }

    blockquote {
        margin: auto;
    }

    ul,
    ol {
        padding-left: 20px;
    }

    .container h1 {
        margin-top: 30px;
        margin-left: 10px;
        font-size: 35pt;
    }

    .shape-left {
        display: none;
    }

    .shape-right {
        display: none;
    }

    .buttonbox {
        bottom: -120px;
        right: 0;
    }

    .buttonbox button {
        height: 100px;
        width: 100px;
    }

    .topright {
        top: unset;
        bottom: -100px;
        left: 0;
        height: auto;
    }

    #one,
    #two,
    #three {
        margin: unset;
        position: static;
    }

    #vines {
        display: none;
    }

    #popuppage {
        width: 100%;
    }
}