@font-face {
    font-family: Gameboy;
    src: url(/fonts/GamegirlClassic-9MVj.ttf)
}
@font-face {
    font-family: Slabo;
    src: url(/fonts/Slabo27px-Regular.ttf)
}
@font-face {
    font-family: DroidSansNerd;
    src: url(/fonts/DroidSansMNerdFont-Regular.otf);
}

#icon {
    font-family: DroidSansNerd;
    padding-right: 15px;
}

@keyframes rainbow {
    0% {color: #ff0000;}
    20% {color: #ffff00;}
    40% {color: #ff5f00;}
    60% {color: #00ff00;}
    80% {color: #0000ff;}
    100% {color: #ff0000;}
}

:root {
    --bg: #9984d4;
    --fg: #592E83;
    --sel: #331b4b;
}
body {
    background-color: var(--bg);
    display: flex;
    flex-direction: row;
    justify-content: center;
}
div.intro p {
    margin: 5px 15px;
    margin-left: 10px;
}

.links p {
    margin: 15px 10px 5px;
}
.links h2 {
    margin: 5px ;
}

p, b ,li , h2, span {
    color: var(--fg);
    font-family: Slabo;
}
h2 {
    margin: 10px 0;
}
a {
    transition: all 0.3s;
}
a:link {
    color: white;
    font-style: italic;
}
a:visited {
    color: var(--fg);
}
a:hover {
    color: var(--sel);
}

.rainbow {
    animation: rainbow 2s infinite;
    text-decoration: none;
    font-weight: bold;
}
::selection {
    background: var(--fg);
    color: var(--bg);
}


#header {
    min-width: 700px;
    width: 65vw;
    min-height: 175px;
    border: 2px var(--fg) solid;
    border-bottom: 0;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
#pagecontent {
    min-width: 700px;
    width: 65vw;
    border: 2px var(--fg) solid;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
#abtme {
    p {
        margin: 0;
        padding-left: 30px;
        font-size: 15px;
    }
    p::before {
        content: "↳";
        padding: -7px;
    }
    li {
        padding-top: 5px;
    }
}

div.column {
    flex: 0.9;
    padding: 7px;
    display: flex;
    flex-direction: column;
}
div.content {
    flex: 3 2;
    justify-content: space-between;
}
div#intro {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
div.chglog {
    border: 2px var(--fg) solid;
    overflow-y: scroll;
    max-height: 140px;
}
div.column + div {
    border-left: 2px var(--fg) solid;
}

div#pagecontent > div.column {
    height: 65vh;
}

.chgdate {
    color: var(--bg);
    font-weight: bold;
    background-color: var(--fg);
    margin: 0;
    padding: 2px;
    padding-left: 5px;
}
.chgcontent {
    margin: 0;
    padding-left: 15px;
}

.pfp {
    height: 160px;
    width: 160px;
    margin: 15px 10px;
    padding: 1px;
    border: 3px var(--fg) solid;
    margin-left: auto;
}

ul {
    padding: 0;
    margin: 5px;
}
li {
    overflow: visible;
    margin: 0px;
    padding-left: 15px;
    position: relative;
    list-style: none;
    font-size: 17px;
}
li::before {
    content: "\00f7";
    left: 0;
    position: absolute;
}