:root {
    --accent-color1: black;
    --accent-color2: pink;
    --accent-color3: rgb(138, 154, 91);
}

body {
    background-color: rgb(138, 154, 91);
    color: black;
    text-align: center;
}

h1 {
    font-size: 11vh;
    margin-bottom: 0;
    padding-bottom: 0;
}

h3 {
    margin: 0;
    padding: 0;
}

/*lace border from hillhouse.neocities.org */
#lacebox {
    display: block;
    background-color: black;
    padding: 0;
    width: 60%;
    height: 60vh;
    overflow: scroll;
    margin: auto;
    color: var(--accent-color3);
    border: 40px solid transparent; /* change the number here to make the border bigger or smaller! for best results keep it between 40-84px. */
    border-image-source: url("imgs/lace.png");
    border-image-slice: 84; /* don't change this! */
    border-image-repeat: round; /* this makes the border smoothly fit any size container */
    border-image-outset:1; /* this puts the border outside your container */
}
#lacebox > .container-content {
    margin:calc(0px - var(--borderwidth));
}

.mainbox {
    border: 2px dotted var(--accent-color3);
    border-radius: 25px;
    margin: auto;
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

#changelog {
    padding: 20px;
    width: 20%;
    height: 30%;
}

#currently {
    padding: 20px;
    width: 20%;
    height: 30%;
}

#statuscafe {
    display: inline-block;
    width: 30%;
    padding: .5em;
    background-color:  var(--accent-color3);
    border: 1px solid var(--accent-color2);
    color: black;
}
#statuscafe-username {
    margin-bottom: .5em;
    color: black;
}
#statuscafe-username > a {
    color: black;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    color: black;
}

ul { 
    padding: 10px;
    list-style-type: "𓆣 "; 
}

a {
    color: var(--accent-color3);
}
  
a:visited {
    color: var(--accent-color3);
}
  
a:hover {
    color: var(--accent-color2);
}
  
a:active {
    color: var(--accent-color3);
}