style.css

/* Variables */
:root {
  /* Responsive */
  --extra-large-device-width:          1024px;
  --large-device-width:                992px;
  --medium-device-width:               768px;
  --small-device-width:                544px;
  --extra-small-device-width:          320px;

  /* Colors */
  --primary-color:                     #3cbac8;
  --secondary-color:                   #ff7f66;
  --tertiary-color:                    #f2dbc1;

  --background-color:                  #f6f6f6;
  --border-color:                      #d3d3e5;
  --font-color:                        #666666;
  --font-color-light:                  #f9f9f9;
  --link-color:                        #4183c4;
  --link-color-active:                 #f2472c;

  /* Elements */
  --border:                            1px solid var(--border-color);

  /* Typography */
  --font-family:                       -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Reset */
* {
  box-sizing: border-box;
}

/* Elements */
a,
a:visited,
a:active {
	text-decoration: none;
	color: var(--link-color);
}

a:hover {
	text-decoration: none;
	color: var(--link-color-active);
}

ul,
ul > li {
	list-style: none;
  margin: 0;
  padding: 0;
}

/* Layout */
html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
}

header,
main,
footer {
  padding: 1rem;
  height: 100%;
  width: 100%;
  max-width: var(--extra-large-device-width);
  margin: 0 auto;
}