/* ---------------------------------------
---------- UNIVERSAL STYLES -------------- */



/* ---- ROOT ---- */

:root {
  --primary-color: #1B7FA0;
  --secondary-color: #EC0038;
}

* {
  box-sizing: border-box;
}



/* ---- BODY ---- */

body {
  margin: 0;
  font-family: "Nunito";
}



/* ---- BUTTON ---- */

button {
  width: 200px;
  height: 60px;
  border-radius: 4px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
  background-color: var(--secondary-color);
  color: white;
  font-family: "Nunito";
  font-size: 1.25rem;
  border: none;
}

button.unstyled {
  unset: all;
}

button:hover {
  cursor: pointer;
}



/* ---- HEADER TAGS ---- */

h1,
h2,
h3 {
  font-family: "Roboto";
}

h1 {
  font-size: 2.5rem;
  font-weight: 900;
}



/* ---- ANCHOR TAGS ---- */

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
  z-index: 10;
}

.link {
  text-decoration: underline;
}



/* ---- TITLE ---- */

.title span {
  display: inline-block;
}

.title span::after {
  margin-top: 5px;
  content: "";
  height: 5px;
  background: var(--secondary-color);
  border-radius: 5px;
  display: block;
}

.title {
  color: var(--primary-color);
}



/* ---- HEADER ---- */

header,
article {
  width: 80vw;
  margin: 0 auto;
}

header {
  margin-top: 50px;
}



/* ---- MAIN ---- */

main h2 {
  color: var(--primary-color);
  width: 80vw;
  margin: 50px auto 0 auto;
}

main p {
  font-weight: 600;
}



/* ---- ARTICLE ---- */

article section {
  margin-top: 25px;
  margin-bottom: 0;
}

.content-image {
  width: 300px;
  height: 200px;
  margin-top: 16px;
  margin-bottom: 50px;
  border-radius: 4px;
}