/*Here's JUST THE COLORS AND DECOR, for you to customize to your aesthetic taste.*/

:root {
    --main-color: #700;
    --light-color: #faef6b;
    --mediumlight-color: #dcdcdc;
    --medium-color: #500;
    --dark-color: black;
}

/*"Main color" = background & scrollbar.
"Light-color" = links.
"Mediumlight-color" = links on hover.
"Medium-color" = background of sidebar boxes.
"Dark-color" = text, borders, and scrollbar background.*/

@media screen and (min-width: 900px) {
#bg{
position:fixed;
bottom: 0px;
right: -20px;
opacity: 1;

}
}

i {font-style: normal; color: #6be1fa}

#bg a {text-decoration: none;}
#bg img {
  
 max-height: 702px; 
 image-rendering:pixelated;
}
#bg p { text-align:center; font-weight: normal;}

.postcontainer { margin-bottom: 30px; margin-right: 5px; 
    max-width: 350px;}
    .postcontainer img { max-width: 328px; }

.dumbstuff
{float:right;
display:block; 
padding-left:14px;
padding-bottom:5px; 
max-width: 150px; 
min-width: 150px;
color: var(--light-color);

}


ul {
    list-style-type: "✦ ";
}
/*This is the bullet point in lists.*/




/*This makes italicized text cursive and a bit bigger so it's legible. It's a bit silly, so delete it if you want it to be normal italics.*/


h2::before,
h3::before {
    content: "⁎*☆ ";
}

h2::after,
h3::after {
    content: " ☆*⁎"
}

/* Uncomment this if you want the layout to be centered instead of on the left side of the page:*/

/* #header, .container, .footer, h1 {margin:auto;} */

/*And here's the rest of the layout. You can fuck with it however you want, too.*/

@font-face { font-family: Dys; src: url('/dys.otf'); font-weight: regular; }
@font-face { font-family: Dys; src: url('/dysb.otf'); font-weight: bold; }
@font-face { font-family: Dys; src: url('/dysi.otf'); font-style: italic; }
@font-face { font-family: Dys; src: url('/dysbi.otf'); font-weight: bold; font-style: italic; }

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

body {
    background: linear-gradient(180deg,rgba(107, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    font-family: 'MS UI Gothic', Arial, sans-serif;
font-size:10pt;
color: #fbb;
}

::selection {
    background: var(--dark-color);
    color: var(--light-color);
}

h1 {
    font-size: 33pt;
    width: 700px;
    padding: 5px;
    margin-top: -15px;
    margin-bottom: -12px;
    margin-left: 5px;
    font-family: Times;
    font-style: italic;
}

h2 {
    margin:0 auto;
    text-align: center;
    color: var(--light-color);
}

h3 {
    margin: 0;
}


u {
    text-decoration: dotted underline 1px
}

a {
    font-weight: bold;
    color: var(--light-color);
    text-decoration: dotted 1px underline;
}

b,h1 { color: var(--light-color);}

a:focus,
a:hover {
    color: white;
    font-size: unset;
}

ul {
    text-align: left;
    padding-left: 15px;
    padding-right: 0;
    margin: 0;
    line-height: 1.2;
}

#header {width: 700px;
    height: 240px;}

#header {
    border: 1px var(--dark-color) solid;

}





.container {
    width: 700px;
    display: flex;
    border: 1px var(--dark-color) solid;
    margin-top: 0px;
    background-color: var(--main-color);
    
}



.sidebar {
    width: 175px;
    padding: 10px;
    gap: 10px;
    display: flex;
    font-size: small;
    flex-direction: column;
    align-items: center;
}

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

.sidebar p {margin-top:2px;
margin-bottom:2px;}

.sidebarbox {
    width: 150px;
    padding: 10px;
    border: 1px var(--dark-color) solid;
    background-color: var(--medium-color);
    max-height: 250px;
    overflow: auto;
    text-align: center;
}

.main {
    width: 350px;
    padding: 10px;
    border-left: 1px solid var(--dark-color);
    border-right: 1px solid var(--dark-color);
    text-align: justify;
    line-height:1;
    overflow-x: hidden;
    max-width: 350px;
    
}

.main a::after {
    content: "»";
    font-size: smaller;
    font-weight: normal;
}

.main a::before {
    content: "«";
    font-size: smaller;
    font-weight: normal;
}

.footer {
    width: 700px;
    text-align: center;
    font-size: smaller;
}

#profilepic {
    width: 100px;
    height: 100px;
    margin: auto;
    margin-bottom: 10px;
    margin-top:10px;
    outline: var(--dark-color) 1px solid;
    outline-offset: 6px;
}

.music {
    font-size: 9pt;
    overflow: hidden;
}

.marquee span {
    width: max-content;
    display: inline-block;
    animation: marquee 10s linear infinite;
    padding-left: 100%;
}

.marquee span:hover {
    animation-play-state: paused
}

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

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