/* sensible base styling
-------------------------------------------------------------------------------*/

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {
  /* font: 13px Helmet, Freesans, sans-serif; */
  font: 13px Verdana, Arial, Helvetica, sans-serif;
}

/* We like off-black for text. */
body,
select,
input,
textarea {
  color: #333;
}

a {
  color: #03f;
}

a:hover {
  color: #69f;
}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection {
  background: #fcd700;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #fcd700;
  color: #fff;
  text-shadow: none;
}

/*	j.mp/webkit-tap-highlight-color */
a:link {
  -webkit-tap-highlight-color: #fcd700;
}

ins {
  background-color: #fcd700;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #fcd700;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

/* Mozilla dosen't style placeholders by default */
input:-moz-placeholder {
  color: #a9a9a9;
}

textarea:-moz-placeholder {
  color: #a9a9a9;
}

/* let's give blockquotes *some* default styling, because unstyled blockquotes are dangerous */
blockquote {
  padding: 16px;
  background: #eee;
}

/* custom page layout
-------------------------------------------------------------------------------*/

.flex-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-header,
.flex-intro,
.flex-contact {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
}

.header-logo {
  width: 100%;
  max-width: 345px;
}

.flex-intro {
  flex-direction: column;
}

.flex-contact {
  display: flex;
}

.contact-details {
  flex-grow: 1;
  flex-basis: 0;
}

.contact-details.left {
  text-align: right;
}

.contact-details.right {
  text-align: left;
}

.contact-details-list {
  list-style: none;
  padding-inline-start: 0;
}

/* generic styles
*/

.margin-sides {
  margin: 0 16px;
}

/* Media queries
-------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
  .flex-contact {
    flex-direction: column;
  }

  .contact-details.left,
  .contact-details.right {
    text-align: center;
  }
}

/* Print styles
-------------------------------------------------------------------------------*/
@media print {
}