@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    /*palettes based on my fursona's reference sheet*/
    --palette01: rgba(213, 184, 230, 255);
    --palette02: rgba(255, 227, 241, 255);
    --palette03: rgba(255, 167, 200, 255);
    --palette04: rgba(63, 64, 64, 255);
    --palette05: rgba(252, 230, 244, 255);
    --palette06: rgba(255, 255, 255, 255);
    --palette07: rgba(213, 183, 235, 255);

    /*background stuff*/
    --bg: rgba(0, 0, 0, 255);
    --bg2: url("https://64.media.tumblr.com/a7760e10f8740d9a8f6ed54c4d98415f/3bd51013282e8957-4f/s400x600/21beb61562bde0b0c8eed5784cb29782b17593ea.gifv");

    /*border stuff*/
    --bstyle: dashed;
}

body {
    background-color: var(--bg);
    width: 1000px;
}

p, a, h1, h2, h3, h4, li {
    color: white;
    font-family: "Source Code Pro", monospace;
    margin: 5px auto;
    font-style: normal;
}
a:hover {
    color: var(--palette03);
}

.left {
    padding: 15px;
    float: left;

    border-color: var(--palette01);
    border-style: var(--bstyle);
    background-image: var(--bg2);
    background-size: cover;
}
.left .her {
    height: 200px;
    border-color: var(--palette05);
    border-style: solid;
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50;
}

.content {
    overflow: auto;
    display: inline-block;
    margin-left: 10px;
    max-height: 709px;
    width: 630px;
    padding: 15px;
    
    border-color: var(--palette01);
    border-style: var(--bstyle);
    background-image: var(--bg2);
    background-size: cover;
}
::-webkit-scrollbar {
    display: none;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 15px;
}