For this homework I started by following along this youtube tutorial for creating a quiz.
After I finished the tutorial, I went back and redid some of the HTML, deleted some redundant divs. Then redid most of the CSS.
Explanation for some of the CSS:

-'box-sizing: border-box;' property makes it so the specified width and height values apply to the entire box, including any padding and border.
-'width: 100vw;' and 'height: 100vh;' properties set the width/height of an element to 100% of the user's visible area of a web page.
-'text-decoration: none;' removes the underline from the text in the "button class".
-'border-radius: 4px;' sets the radius of the corners of an element's border. Makes it round.
-'.button:hover {
cursor: pointer;
box-shadow: 0 0 2.4rem 0 rgba(8, 114, 244, 0.6);
transition: transform 330ms;
transform: scale(1.05);
}' is a CSS code block that sets the hover state for an element with of class "button". 'cursor: pointer;' shows the cursos when hovered over the element. 'box-shadow: 0 0 2.4rem 0 rgba(8, 114, 244, 0.6);' creates a shadow around the button. 'transform: scale(1.05);' makes the button bigger by 5% when hovered over. 'transition: transform 330ms;' smooths out the transition of the shadow and scaling by transforming it for 330ms and not instantly.
'.button[disabled]:hover {
cursor: not-allowed;
box-shadow: none;
transform: none;
}' this makes it so when the button is in a disabled state. The cursor style changes to display a circle with a slash. And disables all the listed properties.