/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type='button'],[type='reset'],[type='submit'],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}

:root {
  --blue:       #0079CA;
  --dark-blue:  #007ACC;
  --light-blue: #cce4f3;
  --dark-gray:  #333;
  --gray:       #717171;
  --light-gray: #F6F6F6;
  --green:      #4d6f0b;
  --curve:       4px;
  --curve-big:  12px;
}

html,
body {
  scroll-behavior: smooth;
}

::selection {
  background: var(--blue);
  color: white;
}

body {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  color: var(--dark-gray);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.45;
  margin: 0 1rem;
}

a {
  color: var(--blue);
  text-decoration: underline;
  transition: color 0.15s ease-in-out;

  &:hover {
    color: var(--green);
  }
}

.site-container {
  margin: 0 auto 1rem auto;
  max-width: 600px;
}

h1,
h2 {
  font-weight: normal;
}

h1,
h2,
h3,
h4
{
  & a {
    color: inherit;
  }
}

h1 {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 0;
}

h2 {
  color: var(--green);
  font-size: 20px;
  margin: 1rem 0 0.5rem;
  text-transform: uppercase;

  & a {
    text-decoration: none;
  }
}

h3 {
  color: var(--dark-gray);
  font-size: 18px;
  margin: 0 0 0.5rem 0;
}

h4 {
  color: var(--gray);
  font-size: 16px;
  margin: 0.5rem 0;
  text-transform: uppercase;
}

p {
  margin: 0;
  padding: 0 0 0.5rem;

  &:last-child {
    padding-bottom: 0;
  }
}

ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
}

li {
  padding: 0.5rem 0;
}

.site-header a {
  text-decoration: none;
}

.site-content {
  margin-top: 1rem;
}

section {
  margin-bottom: 3rem;
}

.page > section {
  margin-bottom: 2rem;
}

.page-home {
  & .portrait {
    display: block;
    margin: 0 auto 1rem auto;
    max-width: 250px;
    border-radius: 50%;
    overflow: hidden;
    transform: rotate(2deg);
  }

  & h2 {
    font-weight: bold;
  }

  & .intro p {
    font-size: 22px;
    text-wrap: balance;
  }

  p.last-updated {
    color: #999;
    font-size: 14px;
    margin-left: 2px;
    margin-top: 0.5rem;
  }

  & .links {
    & ul {
      list-style: none;
      padding: 0;
    }

    & li {
      padding: 0.25rem 0;

      display: flex;
      flex-direction: row;

      & .icon {
        flex: 0 0 34px;
      }

      & .text {
        flex: 1;
      }

      & strong,
      & b,
      & a {
        font-weight: 500;
      }

      & a {
        padding: 0.25rem 0;
      }

      & code {
        background: var(--light-gray);
        border-radius: var(--curve);
        padding: 1px 2px;
      }
    }
  }

  & .for-hire {
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1rem;
    display: block;

    background: linear-gradient(180deg, var(--blue) 0%, var(--dark-blue) 100%);
    color: white;

    & *::selection,
    & *::-moz-selection {
      background-color: #fff !important;
      color: #000 !important;
    }

    & h2 {
      color: white;
      font-size: 28px;
      font-weight: bold;
      margin-top: 0;
      max-width: 100%;
    }

    & p {
      font-size: 18px;
    }

    & a {
      border-bottom: 2px solid white;
      color: white;
      font-weight: bold;
    }

    & strong {
      color: var(--dark-gray);
      border-radius: var(--curve);
      background: var(--light-blue);
      padding: 2px 4px;
    }

    @media (min-width: 740px) {
      box-shadow:
        -6px -6px 0 rgba(var(--blue), .4),
        -12px -12px 0 rgba(var(--blue), .2);
      border-radius: var(--curve-big);
      padding: 1rem;

      h2 {
        margin-top: -3px;
      }
    }
  }
}

.page-payment {
  & h2 {
    color: var(--blue);
    font-weight: bold;

    & br {
      display: none;
    }
  }

  @media (min-width: 740px) {
    & section {
      margin-top: 1.75rem;
    }

    & h2 br {
      display: inline-block;
    }
  }
}