@font-face {
    font-family: "FreePixel";
    src: url("FreePixel.ttf") format("truetype");
}

:root {
    --background-img: url("stars3.gif");
    --background: #251a2d79;
    --main-color-dk: #370c5a;
    --main-color: #EB53D3;
    --accent-1: #6eebff;
    --accent-2: #d625e3;
    --content-spacing: 5px;
    --banner: url("miau.jpg");
    --titleBars: #330b3f;
    --text-color: white;
    --border: 2px solid rgb(34, 34, 34);
    --arrows: url('arrow.png');
    --img-size: 250px;
}

html,
body {
    margin: 20;
    box-sizing: border-box;
    font-family: "FreePixel";
}

body {
    background-image: var(--background-img);
    color: var(--text-color);
    background-attachment: fixed;
}

#container,
.topbar img {
    max-width: 850px;
    margin: 0 auto;
}

h1,
.title {
    margin: 50px;
}

h3,
.header {
    margin-top: 50px;
}

.content {
    background-color: var(--background);
    border: var(--border);
    margin: 40px;
    padding: 10px;
    width: 600px;
    height: auto;
}

img {
    width: var(--img-size);
    height: auto;
    margin-left: 175px;
}

footer {
    border: var(--border);
    height: 25px;
    margin-top: var(--content-spacing);
    background-color: var(--background);
    text-align: center;
}

a {
    color:var(--accent-2);
}