html {
font-size: 10px;
font-family: "Dosis", sans-serif; /*font family from the Google Fonts service */
background-color: #3d3846;
}
h1 {
margin: 0;
padding: 20px 0;
font-size: 60px;
text-align: center;
text-shadow: #fc0 1px 0 10px;
/* The first pixel value sets the horizontal offset of the shadow from the text: how far it moves across.
* The second pixel value sets the vertical offset of the shadow from the text: how far it moves down.
* The third pixel value sets the blur radius of the shadow. A larger value produces a more fuzzy-looking shadow.
* The fourth value sets the base color of the shadow. */
}
p,
li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
color: red;
}
body {
width: 900px;
margin: 0 auto; /* auto is a special value that divides the available horizontal space evenly between left and right. */
background-color: #241f31;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
/* The element is a block element, meaning it takes up space on the page and can accept margin, padding, and other box properties.
* ![]()
(image) elements, on the other hand, are inline elements: by default, they don't accept margin values in the same way block elements do.
* For the auto-margin trick to work on this image, we must give it block-level behavior by using display: block;. */
/* Finally, we set the max-width property to 100%
*to ensure that if the image is larger than the width set on the body,
* it will be constrained to 600px and won't stretch wider. */
}
.done { /* this class will style any element it's applied to, making it look like a completed task with a strikethrough*/
text-decoration: line-through solid black 2px;
}