Base CSS

Reset

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	line-height: 1em;
	scroll-behavior: smooth;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body {
	height: 100%;
}

html, body, h1, h2, h3, p, blockquote, pre, a, address, b, cite, code, em, i, span, strong, sub, sup, u, button, input, select, textarea, ol, ul, li, fieldset, form, label, table, caption, thead, tbody, tfoot, tr, th, td {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 100%;
	font-weight: normal;
}

a, a:link, a:visited {
  	text-decoration: none;
}

ul, ol {
  	list-style: none;
}

img, picture, video, canvas, svg, audio, iframe {
	display: block;
 	max-width: 100%;
	height: auto;
	border: none;
}

svg {
  	box-sizing: content-box;
}

svg:not(:root) {
	overflow: hidden;
}

input, button, textarea, select {
  	font: inherit;
  	font-family: inherit;
  	background: none;
  	color: inherit;
	border-radius: none;
	-webkit-border-radius: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

textarea {
  	resize: none;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner {
	border: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

p, h1, h2, h3 {
	overflow-wrap: break-word;
	font-size: inherit;
  	font-weight: inherit;
}

Description

• Reset styles ensure that any default styles applied by browsers are canceled out so that the user has total control over output.
• Reset styles prevent some differences between browsers in how they render HTML and CSS.
• Reset styles smooth out some of the awkward behaviors of browsers that most people don’t prefer (like text area resizing) and also add some widely popular behaviors (like smooth scrolling).

Formatting

body {
  	font-family: 'Arial', sans-serif;
}

.wrapper {
  	max-width: 1200px;
  	margin: 0 auto;
  	padding: 0 32px;
}

h1, h2, h3 {
    font-family: 'Times New Roman', serif;
}

h1 {
  	font-size: 48px;
  	margin: 0 0 48px 0;
}

h2 {
  	font-size: 38px;
  	margin: 48px 0 32px 0;
}

h3 {
  	font-size: 20px;
  	margin: 42px 0 28px 0;
}

p {
	line-height: 28px;
  	margin-bottom: 32px;
}

a {
  	color: #00ff00;
}

a:hover {
  	color: #0000ff;
}

img, picture, video, canvas, svg, audio, iframe {
	width: 100%;
  	margin-bottom: 32px;
}

ul, ol {
  	margin-bottom: 32px;
}

table {
  	width: 100%;
}

th, td {
  	padding: 16px;
  	border-bottom: 1px solid #ccc;
}

hr {
  	border: none;
  	border-top: 1px solid #ccc;
  	margin: 32px 0;
}

blockquote {
  	border-left: 2px solid #ccc;
  	margin: 1rem 0;
  	padding-left: 16px;
}

Description

• You should set your main text font on the body and your main heading font on all the headings at once.
• The main wrapper is set to 1200px; the widest your site content can get.
• Having top and bottom margins on your headings is important for providing good visual spacing.
• You generally want your images and media embeds to be 100% width.

Breakpoints

@media screen and (max-width: 1199px) {
	.wrapper {
		max-width: 992px;
	}
}

@media screen and (max-width: 991px) {
	.wrapper {
		max-width: 768px;
	}
}

@media screen and (max-width: 767px) {
	.wrapper {
		max-width: 100%;
		padding: 0 16px;
	}
}

Description

• When the screen is smaller than 1200px, the wrapper is 992px. This size is common for laptops.
• When the screen is smaller than 992px, the wrapper is 768px. This size is common for tablets.
• When the screen is smaller than 768px, the wrapper is 100% width. This size is for mobile devices.
• While these breakpoints are conventional, they can be adjusted. Additional sizes can be added to handle larger or smaller screens.