@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@1,300&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;1,300&family=Oswald:wght@300;400&display=swap");
:root {
  --font-main: 'IBM Plex Sans', sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-code: 'IBM Plex Mono', monospace;
  --base-width: 40rem;
  --base-padding: calc(1rem + 5vw);
  --base-font-regular: calc(16px + .5vw);
  --border-radius: .45rem;
  --color-background-default: rgba(255, 255, 255, 1);
  --color-font-default: rgba(0, 0, 0, 0.95);
  --color-font-light: rgba(255, 255, 255, 0.95);
  --color-primary: rgba(23, 93, 117, 1);
  --color-secondary: rgba(188, 68, 48, 1);
  --color-accent1: rgba(27, 91, 117, 1);
  --color-accent2: rgba(45, 87, 14, 1);
  --color--alert: rgba(171, 1, 1, 1);
  --color-neutral-ultralight: rgba(242, 242, 242, .90);
  --color-neutral-light: rgba(190, 190, 190, 1);
  --color-neutral-mid: rgba(112, 112, 112, 1);
  --color-neutral-dark: rgba(60, 60, 60, 1);
  --color-shadow: rgba(0, 0, 0, 0.50);
  --color-brand-gitlab: rgba(252, 109, 38, 1);
  --color-brand-pixabay: rgba(72, 169, 71, 1);
  --color-brand-twitter: rgba(29, 161, 242, 1);
  --color-brand-linkedin: rgba(0, 151, 211, 1);
  --shape-right-arrow: polygon(0 0, 0% 100%, 75% 50%);
}

html {
  font-family: var(--font-main);
  font-weight: 300;
  font-size: var(--base-font-regular);
  line-height: calc(var(--base-font-regular) * 1.5);
  color: var(--color-font-default);
  scroll-behavior: smooth;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: var(--color-background-default);
}

*,
*::before,
*::after {
  max-width: 100%;
  position: relative;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

img {
  height: auto;
  background: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  margin-bottom: .5rem;
  line-height: 1.25em;
}

h1 {
  font-weight: 400;
  font-size: 2.5rem;
  text-align: center;
  margin: 3.25rem 0 2.25rem;
}

h2 {
  font-weight: 400;
  font-size: 1.75rem;
}

h3 {
  font-weight: 400;
  font-size: 1.5rem;
}

h4 {
  font-weight: 300;
  font-size: 1.5rem;
}

h5 {
  font-weight: 300;
  font-size: 1.25rem;
}

h6 {
  font-weight: 300;
  font-size: 1rem;
}

p {
  margin-top: 0;
}

pre {
  margin: 0;
}

hr {
  border: 0;
  height: .125rem;
  background: var(--color-secondary);
}

code {
  font-family: var(--font-code);
  font-style: italic;
  color: var(--color-accent1);
}

video,
audio,
object {
  display: block;
  width: 100%;
}

dt {
  font-weight: 400;
}

dd {
  font-style: italic;
}

mark {
  background: yellow;
}

a {
  color: var(--color-primary);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--color-accent1);
          text-decoration-color: var(--color-accent1);
  text-decoration-thickness: .1rem;
  text-underline-offset: 1.5px;
  height: 2.25rem;
}

a:hover {
  color: var(--color-secondary);
  -webkit-text-decoration-color: var(--color-secondary);
          text-decoration-color: var(--color-secondary);
}

a[href^="http://"]::after,
a[href^="https://"]::after,
a[href^="mailto:"]::after,
a[href$=".pdf"]::after,
a[href$=".zip"]::after {
  width: 1em;
  height: 1em;
  margin: 0 0 0 .35rem;
  top: .1em;
  background-repeat: no-repeat;
  background-position: bottom;
  content: '';
  display: inline-block;
}

a[href^="http://"]::after,
a[href^="https://"]::after {
  background-image: url(./icon-external.svg);
  background-size: .75rem;
  margin: 0 0 0 .15rem;
}

a[href^="mailto:"]::after {
  background-image: url(./icon-email.svg);
}

a[href$=".pdf"]::after {
  background-image: url(./icon-pdf.svg);
  background-size: 1.5em;
  width: 1.5em;
}

a[href$=".zip"]::after {
  background-image: url(./icon-zip.svg);
  background-size: 1.5em;
  width: 1.5em;
}

abbr {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  text-decoration-thickness: .1rem;
  text-underline-offset: 1.5px;
  cursor: help;
}

dfn {
  font-style: oblique;
}

strong {
  font-weight: 500;
}

em {
  font-style: italic;
}

del {
  color: var(--color--alert);
}

ins {
  color: darkgreen;
  -webkit-text-decoration: underline double;
          text-decoration: underline double;
}

s,
strike {
  font-style: oblique;
}

small {
  font-size: .80em;
}

sub {
  vertical-align: sub;
  font-size: .70em;
}

sup {
  vertical-align: sup;
  font-size: .70em;
}

kbd {
  background: var(--color-neutral-mid);
  color: var(--color-font-light);
  font-family: var(--font-code);
  border: 0;
  padding: .15em .5em;
  border-radius: var(--border-radius);
  -webkit-box-shadow: 0 0.1em 0.2em var(--color-shadow);
          box-shadow: 0 0.1em 0.2em var(--color-shadow);
  text-shadow: 0 0.05em 0.1em var(--color-shadow);
}

samp {
  font-family: var(--font-code);
  color: var(--color-accent2);
}

aside {
  background: var(--color-accent2);
  color: var(--color-font-light);
  padding: 1rem .75rem 1.15rem;
  margin: 1.15rem 0 1.5rem;
  float: right;
  border-radius: var(--border-radius);
}

aside *:first-child {
  border-top: 0.1vw solid var(--color-font-light);
  padding-top: .65rem;
}

aside *:last-child {
  border-bottom: 0.1vw solid var(--color-font-light);
  padding-bottom: .65rem;
}

@media only screen and (min-width: 960px) {
  aside {
    width: 40%;
    margin: 1rem 0 1rem 1.15rem;
  }
}

blockquote {
  font-weight: 500;
  color: var(--color-secondary);
  background-image: url(./icon-quotes.svg);
  background-repeat: no-repeat;
  background-position: 0 .25em;
  background-size: 2rem 2rem;
  margin: 0;
}

blockquote p {
  margin-left: 2.5rem;
}

blockquote footer {
  text-align: right;
}

cite {
  font-style: oblique;
  font-size: .9em;
}

time {
  font-style: oblique;
}

var {
  color: var(--color-accent2);
  font-style: oblique;
}

figure {
  margin: 0em;
  border: 1px solid var(--color-neutral-light);
  background: inherit;
}

figcaption {
  font-size: .9em;
  padding: 0 1em .5em;
}

iframe {
  margin: 0 auto;
  display: block;
}

svg {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

svg:hover {
  fill: var(--color-secondary);
}

details {
  font-style: oblique;
}

details summary {
  font-weight: bolder;
  font-style: normal;
  cursor: pointer;
}

details summary::marker {
  color: var(--color-accent2);
}

address {
  font-size: var(--font-main);
  font-size: .87em;
  font-style: normal;
}

.table {
  overflow-x: auto;
}

table {
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid var(--color-primary);
}

table * {
  position: static;
}

caption {
  caption-side: bottom;
  font-size: 80%;
  text-align: left;
  line-height: 1.25em;
  padding-top: .75em;
}

thead {
  background-color: var(--color-primary);
  color: var(--color-font-light);
}

td,
th {
  padding: .5em 1em;
  text-align: center;
}

th[scope=row] {
  font-weight: 500;
  text-align: left;
}

tr:nth-child(even) {
  background: var(--color-neutral-ultralight);
}

fieldset {
  border: 1px solid var(--color-secondary);
  margin: 0 0 1em 0;
}

legend {
  font-weight: 500;
}

input,
select {
  font-size: 1rem;
}

input:focus, input:hover,
select:focus,
select:hover {
  background-color: var(--color-neutral-ultralight);
}

*:required:focus {
  border: 2px solid red;
  outline: none;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  background-image: url(./arow-down.svg);
  background-repeat: no-repeat;
  background-position: right .75em top 50%;
  background-size: .75em auto;
  cursor: pointer;
}

/* Hide arrow icon in IE browsers */
select::-ms-expand {
  display: none;
}

label {
  font-size: 1rem;
}

select,
input:not([type='checkbox']):not(
[type='button']):not(
[type='color']):not(
[type="file"]):not(
[type="image"]):not(
[type="radio"]):not(
[type="range"]):not(
[type="submit"]) {
  padding: .5em 2em;
  border: 1px solid var(--color-neutral-mid);
  border-radius: var(--border-radius);
  width: 100%;
}

.radio,
.checkbox {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: .33em;
}

.radio > input,
.checkbox > input {
  height: 1.5em;
  width: 1.5em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--color-neutral-mid);
  border-radius: var(--border-radius);
  outline: none;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: .33em;
}

.radio > input:checked,
.checkbox > input:checked {
  background-color: #34495E;
  background-image: url(./select-check-white.svg);
}

.radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: .75em;
}

.radio > input {
  border-radius: 50%;
}

.radio > input:checked {
  background: url(./radio.svg);
  background-color: #34495E;
}

input[type="file"] {
  font-size: .8em;
  cursor: pointer;
}

@media only screen and (min-width: 600px) {
  input[type="file"] {
    font-size: inherit;
  }
}

input[type="color"] {
  padding: 0;
  border-radius: 0;
  height: 2rem;
  border: 1px solid black;
  cursor: pointer;
}

input[type="date"] {
  cursor: pointer;
}

input[type="email"] {
  cursor: text;
}

input[type="month"] {
  cursor: text;
}

input[type="week"] {
  cursor: text;
}

input[type="text"] {
  cursor: text;
}

input[type="url"] {
  cursor: text;
}

progress,
meter {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.range {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

input[type="range"] {
  margin-right: 1em;
}

textarea {
  display: block;
  width: 100%;
  min-height: 10em;
  padding: .75rem;
  font-size: 1rem;
  font-family: var(--font-main);
}

input[type='button'], input[type="submit"] {
  background-color: var(--color-primary);
  background-image: url(./gradient.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  min-height: 3.5rem;
  color: var(--color-font-light);
  -webkit-box-shadow: 0 0.1em 0.2em var(--color-shadow);
          box-shadow: 0 0.1em 0.2em var(--color-shadow);
  font-size: 1.2em;
  padding: .5em 2em;
  border-radius: 2em;
  border: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  text-shadow: 0 0.075em 0.15em var(--color-shadow);
  cursor: pointer;
}

input[type='button']:hover, input:hover[type="submit"] {
  background-color: var(--color-secondary);
}

input[type="submit"] {
  width: 100%;
}

input:required {
  border: 2px solid var(--color--alert) !important;
}

header {
  margin: 0;
}

header h1 {
  max-width: var(--base-width);
  margin: calc(1rem + 1vw) auto calc(1.25rem + 1vw);
  padding: 0 var(--base-padding);
  color: var(--color-primary);
  font-size: 3rem;
}

header p {
  margin: 0 auto 1rem;
  padding: 0 var(--base-padding);
  max-width: var(--base-width);
}

header nav {
  margin: 0 auto 1rem;
  padding: 0 var(--base-padding);
  max-width: var(--base-width);
}

header nav ul {
  border-left: 10px solid var(--color-primary);
  padding-left: 1.5rem;
  list-style: none;
}

header nav li::before {
  content: " ";
  display: inline-block;
  background: var(--color-primary);
  margin-right: .25rem;
  width: .65rem;
  height: .65rem;
  -webkit-clip-path: var(--shape-right-arrow);
          clip-path: var(--shape-right-arrow);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

header nav li:hover::before {
  background: var(--color-secondary);
}

header nav a {
  text-decoration: none;
  font-family: var(--font-main);
  font-weight: 500;
  color: var(--color-primary);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  display: inline-block;
  text-decoration: underline;
  -webkit-text-decoration-color: transparent;
          text-decoration-color: transparent;
  text-decoration-thickness: .1rem;
  text-underline-offset: 1.5px;
  height: 2.25rem;
}

header nav a:hover {
  color: var(--color-secondary);
  -webkit-text-decoration-color: #EA215A;
          text-decoration-color: #EA215A;
}

main {
  margin: 0 auto 2rem;
  padding: 0 var(--base-padding);
  max-width: var(--base-width);
}

footer {
  margin: 2rem auto;
  padding: 0 var(--base-padding);
  max-width: var(--base-width);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

footer address {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
}

footer ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
}

footer ul li a[href^="http://"]::after,
footer ul li a[href^="https://"]::after {
  display: none;
}

footer ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 .5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 3rem;
  height: 3rem;
}

footer ul li a svg {
  width: 100%;
  height: auto;
}

footer ul li a [class^="icon-social"] {
  fill: var(--color-neutral-mid);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

footer ul li a:hover [class$="gitlab"] {
  fill: var(--color-brand-gitlab);
}

footer ul li a:hover [class$="linkedin"] {
  fill: var(--color-brand-linkedin);
}

footer ul li a:hover [class$="twitter"] {
  fill: var(--color-brand-twitter);
}

footer ul li a:hover [class$="pixabay"] {
  fill: var(--color-brand-pixabay);
}

footer ul li:last-child a {
  margin-right: 0;
}

footer ul li:nth-child(2) a, footer ul li:nth-child(4) a {
  padding: .25rem;
}

@media only screen and (min-width: 960px) {
  footer {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  footer address {
    text-align: left;
  }
  footer ul {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

a#totop {
  position: fixed;
  bottom: 5vw;
  right: 10vw;
  background-color: rgba(255, 255, 255, 0.87);
  text-decoration: none;
  padding: 1rem 1.5rem;
  line-height: 0;
  border-radius: var(--border-radius);
  border: 0.1rem solid var(--color-secondary);
  font-family: var(--font-heading);
  font-weight: bolder;
  -webkit-box-shadow: 0 0.1em 0.2em var(--color-shadow);
          box-shadow: 0 0.1em 0.2em var(--color-shadow);
  color: var(--color-secondary);
}

a#totop:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
/*# sourceMappingURL=styles.css.map */