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

:root {
    --background: #100b13;
    --background-image:url('../assets/starblink.gif');
    --box-background: rgba(34, 9, 48, 0.4);
    --main-color:#7107AF;
    --main-color-dk:#441261;
    --alt-color:#6ba5f7;
    --accent-1:#B5E61D;
    --accent-2:#EB53D3;
    --spacing:5px;
    --border:1px solid black;

    --margin:10px;
    --boxelement-size:200px;
    --boxelement-padding:20px;
}
body {
    margin: 0;
    box-sizing: border-box;
    font-family: "FreePixel";

    color: var(--main-color);
    background-color: var(--background);
    background-image: var(--background-image);
    background-attachment:fixed;
    background-repeat: repeat;
}

h1,h2,h3,p,::placeholder {
    color: var(--main-color);
    margin-top: 0;
}
.marginless {
    margin-top: 0;
    margin-bottom: 0;
}
input[type=text] {
    font-family: "FreePixel";
    font-size: 24px;
    width:80%;
    color: var(--main-color);
    background: rgba(113, 7, 175, 0.2);
    border-color: rgba(113, 7, 175, 0.4);
}

.container {
    width: 800px;
    margin: 0 auto;

    border-top: none;
}

.box {
    padding: var(--boxelement-padding);
    box-shadow: inset 0 2px 20px;
    border-width: 1px;
    border-color: var(--main-color);
    background-color: var(--box-background);
}
.textbox {
    padding: var(--boxelement-padding);
    box-shadow: inset 0 1px 20px;

    border-width: 1px;
    border-color: var(--main-color);
    background-color: var(--box-background);

    text-align: center;
    margin: 0 auto;
    height: calc(var(--boxelement-size) - (var(--boxelement-padding)/4)*6);
    margin-bottom: var(--margin);
}
.picbox {
    padding: calc(var(--boxelement-padding)/4);
    box-shadow: inset 0 1px 20px;

    border-width: 1px;
    border-color: var(--main-color);
    background-color: var(--box-background);

    margin: 0 auto;
    width: var(--boxelement-size);
    height: var(--boxelement-size);
    margin-bottom: var(--margin);
}

.fitimg{
    width:200px;
    height:200px;
    object-fit: fill;
}

.flair {
    position:absolute;
    content:'';
    top:10px;
    height:40px;
    width:40px;
    background-image:url('../assets/star.gif');
    background-repeat:no-repeat;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}

#leftFlair {
    right:10px;
}
#rightFlair {
    left:10px;
}

#flex {
    display: flex;
}

#searchbar {
    width: 100%;
    margin-bottom: var(--margin);
}
#mainbox {
    min-width: calc((var(--boxelement-size) + var(--margin))*2);
    width: 200%;
}
#sidebox {
    width: var(--boxelement-size) + var(--margin);
    margin-right: var(--margin);
}

#banner {
    text-align: center;
    height:100px;
}


@media screen and (min-height: 1500px) {
    :root {
        zoom:115%;
    };
}