:root{
    
    /* general colors */
    --websitebackgroundcolor: pink;
    --pagecontentmaincolor: white;
    --pagecontentaccentcolor: lightpink;
    
    --navbuttoncolor: white;
    
    --textcolor: #323232;
    --linkcolor: #AB1844;
    
    /* collecting page header/deck colors */
    --collectingcolor-red: #ffdbdb;
    --collectingcolor-orange: #ffeee2;
    --collectingcolor-yellow: #fcfade;
    --collectingcolor-green: #e2fce6;
    --collectingcolor-blue: #dff2fd;
    --collectingcolor-purple: #e3e3ff;
    --collectingcolor-brown: #e9d4b7;
    --collectingcolor-gray: #d4d4d4;
    --collectingcolor-special: white;
}
@font-face {
  font-family: "pixely";
  src: url(https://episode83.neocities.org/webpixel-bitmap.bold.otf);
}


/* DO NOT CHANGE BELOW UNLESS YOU KNOW WHAT YOU'RE DOING */

/* GENERAL */



body{
    background-color: var(--websitebackgroundcolor);
    /* background image instead of color */
    /* background-image: ? */
     font-family: "pixely";
     font-size: 18px;
     color: #e22e64;
}
p{
    color: #690f29;
    margin: 0px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 0px;
}

a{
    color: var(--linkcolor);
}
hr{
    border: 1px solid var(--pagecontentaccentcolor);
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 30px;
}
.flex{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.fcol{
    flex-direction: column;
}
.center{
    justify-content: center;
    align-items: center;
    margin: auto;
}
.spaceevenly{
    justify-content: space-evenly;
}
.tleft{
    text-align: left;
}
.section{
    margin: 5px;
}
.marginimage{
    margin: 5px;
}
.cardimage{
    margin: 0px;
}

#middle{
    min-height: 500px;
    width: 900px;
    padding: 10px;
    background-color: var(--pagecontentmaincolor);
    margin-left: 10px;
    margin-right: 10px;
}


/* HEADER */
#websiteheader{
    margin-bottom: 20px;
    color: var(--linkcolor);

}
.navbutton{
    color: #AB1844;
    background-color: var(--navbuttoncolor);
    text-decoration: none;
    padding: 7px;
}


/* HOME PAGE */
#avatar{
    width: 80px;
}
.portfoliobutton{
    border: none; 
    background-color: transparent;
}
.portfoliohidden{
    background-color: var(--pagecontentmaincolor);
    width: 110px;
    border: 1px solid var(--pagecontentaccentcolor);
    position: absolute; 
    display: none; 
    text-align:left
}
.pendingsection{
    margin: 5px; 
    margin-top: 0px;
}
#crayonscontainer{
    display:flex; 
    width: 200px; 
    justify-content: space-evenly;
}
.crayoncount{
    display: flex; 
    flex-direction: column; 
    text-align: center; 
    margin-right: 5px;
}

/* COLLECTING PAGE */
.deckred{
    background-color: var(--collectingcolor-red);
}
.deckorange{
    background-color: var(--collectingcolor-orange);
}
.deckyellow{
    background-color: var(--collectingcolor-yellow);
}
.deckgreen{
    background-color: var(--collectingcolor-green);
}
.deckblue{
    background-color: var(--collectingcolor-blue);
}
.deckpurple{
    background-color: var(--collectingcolor-purple);
}
.deckbrown{
    background-color: var(--collectingcolor-brown);
}
.deckgray{
    background-color: var(--collectingcolor-gray);
}
.deckspecial{
    background-color: var(--collectingcolor-special);
}
.deckCOLORNOTFOUND{
    background-color: none;
}
.deckdiv{
    display:inline-block;
    margin:5px;
}
.deckimgdiv{
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    width: 275px;
}
.deckheader{
    text-align: center;
    font-size: 15px; 
    margin: 0px; 
    padding: 5px;
}
.decklink{
    text-align: center;
    font-size: 15px; 
    margin: 0px;
}
.neededdeckcolumn{
    display:flex; 
    flex-direction: column; 
    padding:10px;  
    margin: 10px; 
    min-width: 90px;
}