/* --- PAGE --- */
/* Body pretty much styles the entire website since in HTML everything is in body. */
body {
    /* Use sans-serif if Arial isn't installed on the user's computer. */
    font-family: Arial, sans-serif;
    /* The background color of the ENTIRE page. */
    background-color: #362f2f;
    /* The text color of the ENTIRE page. */
    color: #fff;
    /* Since margin is set to 0, there will be no space between the edge of the page and the content. */
    margin: 0;
}


/* --- LAYOUT --- */
/* Sets unordered lists to the left. */
ul {
    /* Makes the lists only as wide as they need to be so they won't take up the entire width of the page. */
    display: inline-block;
    /* Body centers everything, but the lists need to be readable, so it's aligned to the left. */
    text-align: left;
    /* Calculates equal space for left and right. Could also be used for top and bottom, but kind of confusing. */
    margin: 0 auto;
}

/* Styles the screenshots. */
.screenshot {
    /* Sets the width so it won't take up the entire page. */
    width: 95%;
    /* If someone's on a huge screen then the image won't be crazy big. */
    max-width: 1200px;
    /* Since screenshots are typically wide, it'll automatically scale the height properly. */
    height: auto;
    /* Adds a little space above the image. */
    margin-top: 20px;
    /* Adds a outline around the image. */
    border: 3px solid black;
    /* Rounds the corners of the image. */
    border-radius: 10px;
    /* Horizontal offset. Vertical offset. Blur. Red green blue and alpha (transparency). */
    box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.4);
}


/* --- HEADINGS --- */
h1 {
    /* Changes the color of the title. */
    color: #03b600;
}