@font-face {
    font-family: "Pixel";
    src: url("fonts/pixelsix00.ttf");
}


:root {
    --cgreen: #4ceb91;
    --cpink: #ff87c9;
    --clight: #fff3e7;
    --barback: var(--cpink);
    --bartext: var(--clight);
    --noteback: var(--cgreen);
    --notetext: var(--clight);
    --contback: var(--clight);
    --conttext: var(--cpink);
    --divider: var(--cgreen);
    --extra-length: 128px;
}


html {
    
    background-color: #225245;

    color: var(--conttext);
    font-family: Pixel, "Brush Script MT", cursive;
    
}


#banner {
    margin: auto;
    width: 1096px;
    text-align: center;
}


#page {

    margin: auto;
    width: 1096px;
    /*display: grid;

    /*grid-template-columns: 2fr 5fr 2fr;
    /*grid-template-rows: auto auto;
    grid-template-areas:
        'menu content extra';
        /*'menu footer extra';
    
    gap: 12px;*/
    
}


.content {

    background-color: var(--contback);
    color: var(--conttext);
    margin-bottom: 12px;
    
}

/*.content::after {
    content: "";
    clear: both;
    display: table;
}*/


h1 {
    margin-top: 128px;
    font-size: 40px;
    color: var(--clight);
}

.window {

    background-color: var(--barback);
    color: var(--bartext);
    padding: 12px;
    margin: 0px;
    margin-bottom: -1.5px;
    
}

.window h2 {
    padding: 0px;
    margin: 0px;
    display: inline-block;
}

.note {

    background-color: var(--noteback);
    color: var(--notetext);
    padding: 12px;
    margin: 0px;
    
}

.note p {
    padding: 0px;
    margin: 0px;
    /*display: inline-block;*/
}

.otherside {
    float: right;
}


.checker {
    /*border-style: dashed;
    border-color: var(--divider);
    border-width: 2px;*/
    width: 100%;
    height: 6px;
    margin: 0px;
}


p {
    padding: 10px;
    margin: 0px;
    margin-top: 8px;
    font-size: 18px;
}

a {
    padding: 10px;
    margin: 0px;
    font-size: 18px;
    line-height: 30px;
    color: var(--cpink);
}

a:hover {
    color: var(--cgreen);
}

h3 {
    padding: 10px;
    margin: 0px;
    margin-top: 12px;
    margin-bottom: -16px;
    font-size: 24px;
}


#bounty {
    float: right;
    width: 128px;
    margin-top: -5px;
    margin-left: 4px;
    margin-bottom: -2px;
    background-color: var(--noteback);
    color: var(--notetext);
    text-align: center;
}

#bounty img {
    width: 100%;
}

#bounty p {
    padding: 6px;
    margin-top: 0px;
}


.middle {
    width: calc(56% - 6px);
    margin: auto;
    margin-bottom: 12px;
    padding-bottom: var(--extra-length);
}

.leftbar {
    float: left;
    width: calc(22% - 6px);
    padding-bottom: var(--extra-length);
}

.rightbar {
    float: right;
    width: calc(22% - 6px);
    padding-bottom: var(--extra-length);
}

/* im not gonna lie i didnt know what to call this*/
.green {
    color: var(--cgreen);
}