/*.test {
    color: red;
    background-color: blue;
}*/

body {
    color: #403c3c;
    background-image: url(https://i.imgur.com/PyHvj70.jpeg);
    background-size: 250px;
    font-family: 'Times New Roman', Times, serif;
}

@font-face {
    font-family: "headings"; 
    src: url("Tempting.ttf") format("truetype");
    /* or: */
    src: url("Tempting.ttf") format("opentype"); /
}

h1, h2, h3{
    font-family: headings, 'Times New Roman';
}

.container {
    background-color: #faf2f0;
    color: #7a5c61;
    width: 800px;
    margin: -10px;
    display: flex;
}

.leftside {
    padding: 20px;
    width: 70%;
}

.rightside {
    padding: 10px;
    width: 29%;
    float: left;
    height: inherit;
    border: 1px solid transparent;
    border-image: url(GbostlyBorder.png) 30 round;
}

#rightimg {
    size: 168%;
    height: 200px;
    position: absolute;
    left: 325px;
    z-index: 1;
    margin-top: 10px;
}

a {
    color: black;
}

/*This is all the little lace boxes (like the one in navigation)*/

.box-center {
    margin: 1em 0; /* Change center to 0 to auto */
    width: 100%; /* width */
}

.u01 {
    /*This makes the top edge of the lace boxes. I reccomend not touching this code.*/
    background: url(f-ue.gif) repeat-x;
    height: 23px;
    margin: 0 23px;
}

.s01 {
    /*This makes the bottom edge of the lace boxes. I reccomend not touching this code.*/
    background: url(f-sita.gif) repeat-x;
    height: 23px;
    margin: 0 23px;
}

.box-top {
    /*This makes the top corners of the lace boxes. I reccomend not touching this code.*/
    background-image: url(f-kado1.gif), url(f-kado2.gif);
    background-position:
        top left,
        top right;
    background-repeat: no-repeat, no-repeat;
    height: 23px;
}

.box-center {
    /*This makes the side edges of the lace boxes. I especially reccomend not touching this code. (it took me a long time to fix)*/
    background-image: url(f-migi.gif), url(f-hidari.gif);
    background-position:
        top right,
        top left;
    background-repeat: repeat-y, repeat-y;
}

.box-inner {
    /*This is the inside of the boxes! I'd avoid the margins (if something looks off change the specific element margins instead like I've done) but aside from that you can do some fun stuff here!*/
    background: white; /* Background color */
    margin-left: 23px;
    margin-right: 23px;
    margin-top: -20px;
    margin-bottom: -20px;
    padding: 10px;
    font-size: smaller;
    /*The most I've done atm is make the font in here slightly smaller. Mostly so it fits better on the right side.*/
}

.box-bottom {
    /*This makes the bottom corners of the lace boxes. I reccomend not touching this code.*/
    background-image: url(f-kado3.gif), url(f-kado4.gif);
    background-position:
        top left,
        top right;
    background-repeat: no-repeat, no-repeat;
    height: 23px;
}

/*End of lace boxes*/

/*This styles lists (like the one in the navigation)*/
li a {
    color: #7a5c61;
    /*Makes links in lists them the same color as other text*/
    text-decoration: none;
    /*Removes the underline from links in lists*/
}

li a:hover {
    text-decoration: underline;
    /*Makes links in lists underlined on hover*/
}

.rightside ul {
    /*This only defines the list elements in "rightside". To affect all lists, just remove the .rightside*/
    list-style-type: none;
    /*Removes the dots*/
    margin-left: -30px;
    margin-bottom: -10px;
    /*Makes it line up a bit better*/
}

/*End of list styling*/