/*
         Cool Town & Bread Co. Wikipedia
         guest book
         post push notifs
         Sitemap for google
         new badge
         Evil Szpieg Mode on like Evil szpieg month
         
*/


body {
    background-color: black;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    padding:0px; margin:0px;
}


main {
    width: 90vw;
    margin: 0 auto 8px auto;
    padding:4px;
	background-color:#292726;
	color:white;
    border: 4px solid #84756B;
    border-radius:10px;
    
}

.page-main-title {
    margin: 0 auto 0px auto;
    transform:translateY(4px);
	background-color:#292726;
    font-family: 'TF2Build', arial, sans-serif;
    color:#C9BCA3;
    border: 3.5px solid #84756B;
    margin-top:10px;
    padding-top:6px;
    border-bottom:none;
    width:240px;
    border-radius:10px 10px 0px 0;
    font-size: 32px;
    text-align:center;
}

article {
    font-family: 'TF2Build', arial, sans-serif;
    padding:8px;
    background-color:#292726;
    border:none;
    margin-bottom:5px;
}

Backpack {
    font-family: 'TF2Build', arial, sans-serif;
    margin-left:auto ; margin-right:auto;
    height:512px;
    background-color:#3C362F;;
    border-radius:8px;
    overflow:scroll;
    display: grid;
    grid-template-columns: repeat(10, 138px);
    grid-auto-rows: 130px;

}

.art-piece {
    height:120px;
    width:128px;
    border-radius:20px;
    background-color: #B2B2B25F;
    border: 4px solid #B2B2B2;
    margin:8px;
    background-position-x: center;
    background-position-y:20%;
    background-size:cover;
    background-repeat:no-repeat;
    padding:0px;
}

.new-artpiece {
    font-family: 'TF2Build', arial, sans-serif;
    color:black;
    background-color:#FFD800;
    border-radius: 0 5px 0 5px;
    width:50px;
    font-size:18px;
    margin:0px;
    position:relative;
    right:calc(-73px);
    bottom:calc(50% - 5px);


}

.art-piece:hover {
    cursor:pointer;
}

.PageButton {
    background-color:#776B5F;
    border-radius:8px;
    border:none;
    margin:0;
    margin-left:8px;
    margin-bottom:16px;
    min-height:28px;
    min-width:64px;
    padding:4px;
    
    a {color:#ECE4CE; text-decoration: none; font-family:TF2Build; font-size:24px;};

}

.PageButtonSelected {
    background-color:#BA5B4A;
    
}


@media only screen and (max-width: 850px) {
    backpack {
        grid-template-columns: repeat(3, 96px);
        grid-auto-rows: 102px;
    }


    .art-piece {
        height: 80px;
        width:86px;
    }

    .new-artpiece {
        right:calc(-42px);
        bottom:calc(50% - 5px);

    }

    main {
        border-width: 2px;
        
    }
    
    .page-main-title {
        
        transform:translateY(2px);
        border: 2px solid #84756B;
        border-bottom:none;
        width:120px;
        font-size: 16px;
    }

    
}