/* General */
body {
  background-color: rgb(248, 249, 252);
  font-family: "Raleway", sans-serif; /* Options: Asap, Raleway. More at https://fonts.google.com/ */
  color: #404040;
}

/* Header */
header {
  background: linear-gradient(90deg, #ffffff, #ffd966);
  /* ffd966 404040 b4c6e7 */
  border: 1px solid rgb(231, 229, 229);
  border-radius: 25px;
  padding: 1%;
}

/* Alignment of logo and company text and slogan */
.arcarius-logo {
  padding-top: 1%;
  flex: 1;
  margin-bottom: -2%;
}

/* These would benefit from variables */
/* Official Arcarius Mexen colors */
.arcarius-yellow {
  color: #ffd966;
}

.arcarius-grey {
  color: #404040;
}

.arcarius-blue {
  color: #b4c6e7;
}

/* Navigation */
nav {
  list-style-type: none;
  margin-top: 2%;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: space-around;
}

.navigation-list-item {
  display: inline-block;
}

.navigation-link {
  flex: 1;
  text-decoration: none;
  border-bottom: 1px solid #404040;
  font-weight: bold;
  color: #404040;
}

nav > li > a:hover, .contact-link:hover {
  color: #b4c6e7; /* Options: c29407, dea214, e2a30b b98405*/
}

/* Main */
/* Sections */
.section-header {
  margin: 3%;
  color: #b4c6e7; /* Options: c29407, dea214, e2a30b b98405 404040 ffd966 b4c6e7*/
}

/* Text following a section header */
.section-header-opener {
  margin: 3%;
  color: #404040;
}

/* Section with related information */
section {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  margin: 2%;
}

/* Articles */
article {
  flex: 40%;
  border: 1px solid rgb(231, 229, 229);
  border-radius: 25px;
  margin: 1%;
  background-color: white;
  box-shadow: 0 2px 4px 0 #b4c6e7;
}

.subheading {
  margin-left: 4%;
}

article h2 {
  padding: 1%;
}

article p, footer p {
  padding-left: 2%;
  padding-bottom: 1%;
  color: #404040;
}

.quote-text {
  flex: 1;
  text-align: center;
  margin-right: 7%;
}

.quote-image {
  flex: 1;
  text-align: center;
}

blockquote h2 {
  color: #b4c6e7;
}


.list-details {
  list-style: none;
}

.contact-link, .article-link, .external-link {
  text-decoration: none;
  border-bottom: 1px solid #404040;
  color: #404040;
}

.article-item {
  margin-bottom: 1%;
}

.icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: 5%;
}
.about-icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: 2%;
  margin-left: -3%;
}

/* footer */
footer {
  background: linear-gradient(90deg, #ffffff, #ffd966);
  /* ffd966 404040 b4c6e7 */
  border: 1px solid rgb(231, 229, 229);
  border-radius: 25px;
  padding: 1%;
  display: flex;
  align-items: center;
  flex-flow: row wrap;
}

.copyright {
  flex: 1;
  text-align: center;
}