/*
This is a CSS comment
Cascading
    Style
        Sheets

As im sure you've read in the HTML doc CSS works based on a hirearchy

elements overule the default settings of a site
classes overule elements and the default settings of a site
ids overule everything and are at the top of the hirearchy

*/

/*
Sets the background color and general text color of the site
color sets most elements to that color
there is no specific text-color option
*/
body {
    background-color: rgb(255, 222, 130);
    color: rgb(0, 0, 0);
}

/*
Sets up the page title and tells it to remain centered on the page, no size so its just
the default
*/
#pageTitle {
    text-align: center;
}

/*
width: 10%;
this tells the computer that this elements width should be 10% that of the width of the container
in this case the container is the webpage itself
the distinction is important because other containers exist such as <canvas> and <div>
<div> separates elements into its own container
and <canvas> lets you draw and do a bunch of stuff to it in javascript
*/
#titleSeparator {
    width: 10%;
    min-width: 280px;
}

/*
Theoretically we can put all the css of the webpage in one document but that gets messy and 
confusing

The rest of this doc is the same old stuff I allready discussed
*/
.gameLink {
    text-align: center;
}
.gameLink a {
    color: rgb(255, 20, 147);
}

/*
General game canvas stuff, centers the canvas and gives default dimensions and color for adjustment. I would recommend
overwriting the dimensions and color with an id
*/
.gameContainer {
    width: 100%;
/*This tells everything within the div container to align itself to the center*/
    text-align: center;
}
.gameCanvas {
    min-width: 100px;
    min-height: 100px;
    background-color: white;

/*This tells the canvas to listen to the div's text-align*/
    display: inline;
}