/* idea i'm putting here: do something with js to draw a background made of
*  randomly positioned white circles on black bg, so it looks like stars :3
*/

img, a, div, span, body, h1, h2 {
    padding: 0;
    margin: 0;
}

h1 {
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    color: #cd8e7f;
}

h2 {
    color: #e9b7aa;
}

hr {
  border: none;
  border-top: 3px solid #c7b388;
  border-bottom: 3px solid #c7b388;
  overflow: visible;
  text-align: center;
  height: 0.1em;
  width: 100%; /* ok cool */
}

p {
    margin: 0.5em;
}

@font-face {
    font-family: "Inter";
    src:
        local("Inter"),
        url("./fonts/InterVariable.woff2") format("woff2");
}

html {
    font-size: 18px;
  font-variant-emoji: text;
}

body {
    font-family: 'Inter', 'Arial', 'DejaVu Sans', sans-serif;
    font-weight: 450;

    /* i'm having a hard time making up my mind on these */
    /*
    color: #b3cd88;
    color: #a5c473;
    */
    color: #96af6e;
    background-color: #f1eee7;

    /* silly tiling background */
    background-image: url("testwine.png"), url("tile.png");
    background-repeat: no-repeat, repeat;
    /*background-position: 0% 100%, 0% 0%;*/

    background-image: url("tile.png");
    background-repeat: repeat;
    background-position: 10% 10%;
    /*
    */
}

#titlebar {
    background-color: #f1eee7;
    /* align the elements of the titlebar */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    /* center the titlebar */
    margin: 0;
    margin-left: auto;
    margin-right: auto;

    /* offset stuff below*/
    margin-bottom: 2em;
    margin-top: .5em;

    /* a nice little width */
    width: 45em;

    /* pad the sides of the bar a lil bit */
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.2em;

    border: 0.35em solid #b3cd88;
    border-color: #c9d5b5;/**/
    border-radius: 0.65em;
    border-radius: 1em;

    /* hide the top of the bar, and don't round the corners there */
    /*
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 1em;
    */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */
}

.ds {
    box-shadow: #f8d2c9 1em 1em;
}

.comment {
    color: #b3a380;
}

#sitename {
}


#stats {
    display: flex;
    align-items: center;
    gap: 1.2em;/**/
}

#deco {
    color: #e9b7aa;
    color: #cd8e7f;
    font-size: larger;
}

#riseset {
    margin-left: auto;
    margin-right: auto;
    color: #cd8e7f;
    color: #c37865;
}

#illum {
    color: #cd8e7f;
    color: #c37865;
    max-width: 10em;
}

#moonicon {
    font-size: 2em;
    height: 1em;
}

#canvas {
}

/* main site content woah!!!! */
#main {
    display: flex;
    justify-content: left;
    flex-direction: column;

    background-color: #f1eee7;
    border: 0.35em solid #b3cd88;
    border-color: #c9d5b5;/**/
    border-radius: 0.65em;
    border-radius: 1em;

    /* a nice little width */
    width: 45em;
    min-width: 45em;

    /* TEMP */
    /*min-height: 20em;*/

    /* center the titlebar */
    margin: 0;
    /*
    margin-left: auto;
    margin-right: auto;
    */
    margin-bottom: 1em;

    /* pad the sides of the bar a lil bit */
    /*padding: 0.5em 1em;*/
    padding: 1em;
    padding-bottom: 0.25em;
}

#buttons {
    align-self: center;

    padding-top: 0.75em;

    /* make it go to the bottom of the container (#main, in this case) */
    margin-top: auto;
}

.bm {
    border: 2px #000 solid;
}


/*
.fall {
    transition: color 1.0s, border-color 1.0s;
    &:hover {
        color: #d03d11;
        border-color: #d03d11;
    }
}
*/

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.sidebar {
    box-sizing: border-box;
    border-radius: 1rem;
    max-width: 10rem;
    min-width: 10rem;
    margin-inline: 1.5rem;
}

.real {
    background-color: #f1eee7;
    border: 0.35rem solid #c9d5b5;
    /*font-size: smaller;*/
    padding: 1rem;
    box-shadow: #f8d2c9 1rem 1rem;
    /* oh i bet fucking with the font size changes what an em is?
     * hahhahahaaaa yeah ok i got it
    */
}

#fake {

}

#bottombar {
    background-color: #851d2e;
    background-color: #8e2f4a;
    text-align: center;
    color: #f1eee7;
    position: fixed;
    bottom: 0;
    width: 100%;
}

a:link {
    color: #70874a;
}

a:visited {
    color: #851d2e;
    color: #8e2f4a;
}

.sig {
    color: #8e2f4a;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

/* define your limiting container */
.marquee {
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
/* this is the tray moving around your container */
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee 35s linear infinite; /* here you select the animation */
}
.marquee span:hover {
  animation-play-state: paused;
}

/* hide stuff when the screen is small
 * maybe change this to be some % rather px? 60%?
 * so that way screen size doesn't fuck things up
 */
/* read this later:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
 */
@media (max-width: 1200px) {
  #sideways {
    /*display: none;*/
    visibility: hidden;
    /* TODO: this is where we'd make the other panel visible */
  }

  .sidebar {
    visibility: hidden;
  }
}

/* try to do stuff for phones? idk */
@media (max-width: 500px) {
    #main {
        font-size: x-large;
    }
}

.zany {
    text-shadow:
        -4px -4px 0 #00ff00,
         4px -4px 0 #00ffff,
        -4px  4px 0 #ffff00,
         4px  4px 0 #ff00ff;
}

#sideways {
    color: #8e2f4a;
    span {
        /*background-color: #f1eee7;
            */
        /* ok this is actually kinda cool, saving for later */
        /*
        text-shadow:
            -4px -4px 0 #0f0,
             4px -4px 0 #0f0,
            -4px  4px 0 #0f0,
             4px  4px 0 #0f0;
        */
    }
    margin-left: 0%;
    z-index: -1;
    font-size: 5em;
    position: fixed;
    writing-mode: sideways-lr;
    margin-bottom: 1em;
}