/* The body and html selectors target the entire webpage. The properties set here are applied to the whole page. */
body, html {
    margin: 0; /* Removes the space around the edges of the page. */
    padding: 0; /* Removes the space between the edge of the page and the content. */
    width: 100%; /* Sets the width of the page to fill the entire viewport. */
    height: 100%; /* Sets the height of the page to fill the entire viewport. */
    font-family: 'Arial', sans-serif; /* Sets the default font for the page. */
    background: #eee; /* Sets the background color of the page. */
}

/* The header and footer selectors target the <header> and <footer> HTML elements. */
header, footer {
    text-align: center; /* Centers the text within these elements. */
    padding: 10px; /* Adds space around the content within these elements. */
    background-color: #333; /* Sets the background color of these elements. */
    color: white; /* Sets the text color within these elements. */
}

/* The section selector targets the <section> HTML elements. */
section {
    width: 80%; /* Sets the width of these elements to 80% of their containing element. */
    margin: 20px auto; /* Centers these elements horizontally within their containing element. */
    background: white; /* Sets the background color of these elements. */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds a shadow effect to these elements. */
    padding: 20px; /* Adds space around the content within these elements. */
    position: relative; /* Sets the position property to relative, which can be used with positioning properties. */
}

/* The canvas selector targets the <canvas> HTML elements. */
canvas {
    width: 100%; /* Sets the width of these elements to fill their containing element. */
    max-width: 600px; /* Limits the maximum width of these elements to 600px. */
    height: auto; /* Keeps the canvas square on any screen. */
    aspect-ratio: 1 / 1;
    display: block; /* Changes these elements to block-level, which starts on a new line and takes up the full width. */
    margin: auto; /* Centers these elements horizontally within their containing element. */
    background: #000; /* Sets the background color of these elements. */
}

/* The button selector targets the <button> HTML elements. */
button {
    padding: 10px 20px; /* Adds space around the content within these elements. */
    margin: 10px; /* Adds space around these elements. */
    cursor: pointer; /* Changes the cursor to a pointer when hovering over these elements. */
}

/* The input[type="color"] selector targets the <input> HTML elements of type color. */
input[type="color"] {
    padding: 5px; /* Adds space around the content within these elements. */
    margin: 10px; /* Adds space around these elements. */
    cursor: pointer; /* Changes the cursor to a pointer when hovering over these elements. */
}