/* Global */

:root {
/* Colors */
  --primary: #ef611f;
  --secondary: #0269be;
  --accent1: #53a14c;
  --accent2: #d73ca6;
  --base-background: rgba(255, 255, 255, 0.85);
  --base-shadow: rgba(255, 255, 255, 0.8) 0px 1px 1px;

  @media (prefers-color-scheme: dark) {
    --base-background: rgba(20, 20, 20, 0.90);
    --base-shadow: rgba(0, 0, 0, 0.8) 0px 1px 1px;
  }

/* Text */
  --helvetica: 'Helvetica', Arial, sans-serif;
  --ubuntu: 'Ubuntu', 'Helvetica', sans-serif;
}

*, * :before, * :after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('/Ubuntu-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: none;
}

html, body {
  height: 100%;
}

body {
  background-color: #eee;
  font-family: var(--helvetica);
  color: #444;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 300;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: default;

  @media (prefers-color-scheme: dark) {
    background-color: #222;
/*
    background-image: url('/images/header-bg.gif');
*/
    color: #eee;
  }

  @media (min-width: 1100px) {
    font-size: 18px;
  }
  @media (min-width: 1200px) {
    font-size: 20px;
  }
}

h1, h2, h3, h4 {
  text-shadow: var(--base-shadow);
}

a {
  color: var(--secondary);
  text-decoration: underline;
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--ubuntu);
  font-weight: 300;
  line-height: 1.2;
  color: var(--primary);
  text-wrap: balance;
}
h1, h2, p {
  margin-bottom: 20px;
}
h3, h4 {
  margin-bottom: 10px;
}
h1 {
  font-size: 36px;

  @media (min-width: 480px) {
    font-size: 40px;
  }
  @media (min-width: 800px) {
    font-size: 44px;
  }
}
h2 {
  font-size: 28px;
  color: var(--accent1);

  @media (min-width: 480px) {
    font-size: 32px;
  }
}
h3 {
  font-size: 24px;
  color: var(--accent2);

  @media (min-width: 480px) {
    font-size: 28px;
  }
}
h4 {
  font-size: 18px;

  @media (min-width: 480px) {
    font-size: 24px;
  }
}

p {
  line-height: 1.4;
}
strong {
  font-weight: bold;
}
em {
  background-image: linear-gradient(to right, rgba(255, 227, 89, .75), rgba(255, 227, 89, 0.5));
  font-style: normal;

  @media (prefers-color-scheme: dark) {
    color: #444;
  }
}

ul, ol {
  list-style: none;
}
ul {
  margin-bottom: 30px;
  margin-left: 30px;
  list-style: square;

  & li {
    margin-bottom: 5px;
  }
}

img {
  max-width: 100%;
}

hr {
  margin: 30px 0;
  border: 0;
  border-bottom: #ddd 1px solid;
  height: 0;

  @media (prefers-color-scheme: dark) {
    border-bottom: #666 1px solid;
  }
}

/* Header parallax background */
.parallax {
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  & .parallax-layer {
    position: absolute;
    top: -120px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;

    @media (min-width: 480px) {
      top: -150px;
    }
    @media (min-width: 800px) {
      top: -400px;
    }
  }

  & .parallax-layer-1 {
    transform: translateZ(-10px) scale(1.25);
  }
  & .parallax-layer-2 {
    transform: translateZ(-20px) scale(1.25);
  }
  & .parallax-layer-3 {
    transform: translateZ(-30px) scale(1.5);
  }
  & .parallax-layer-4 {
    transform: translateZ(0) scale(1.5);

    @media (min-width: 800px) {
      left: 300px;
    }
  }
  & .parallax-layer-5 {
    transform: translateZ(-10px) scale(1.75);
    left: -100px;

    @media (min-width: 480px) {
      left: -200px;
    }
    @media (min-width: 800px) {
      left: -100px;
    }
  }
  & .parallax-layer-6 {
    transform: translateZ(-60px) scale(1.75);
  }
}

/* Navigation */

nav.primary {
  & ul {
    list-style: none;
    margin-bottom: 5px;
    margin-left: 0;

    @media (max-width: 600px) {
      display: inline-block;
    }

    & li {
      display: inline-block;

      & a {
        display: inline-block;
        border-radius: 2px;
        background-color: var(--base-background);
        padding: 4px 8px;
        font-size: 16px;
        text-decoration: none;
        transition: all 200ms ease;

        &:hover, &.on {
          box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 0;
          transform: scale(1.08);
          text-shadow: 0px 0px 4px rgb(43 165 233 / 0.4);
        }
      }
    }
  }
}

a.follow {
  position: relative;
  top: -1px;
  margin-bottom: 0;
  padding: 7px 12px;
  font-size: 12px;
/*
  &:before {
    content:'➕';
    filter: brightness(5);
    margin-right: 4px;
    margin-left: -5px;
    font-size: 13px;
  }
*/
}

/* Utilities */

blockquote {
  margin-bottom: 20px;
  margin-left: 30px;
  font-style: italic;
}
/*
.cta {
  display: block;
  border-top: #ddd 1px solid;
  border-bottom: #ddd 1px solid;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  font-style: italic;
}
*/
.screenshot {
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 0;
  border-radius: 2px;
  border: #fff .5px solid;

  @media (prefers-color-scheme: dark) {
    border: #222 .5px solid;
  }
}

.blurb {
  margin-bottom: 20px;
  border-radius: 4px;
  background-color: var(--base-background);
  padding: 20px;

/*
  & img {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px 0;
    border-radius: 2px;
    width: 100%;
    height: auto;
  }
*/
  & p {
    margin-bottom: 0;
  }
}

.callout {
  font-size: 18px;

  @media (min-width: 1100px) {
    font-size: 22px;
  }
  @media (min-width: 1200px) {
    font-size: 26px;
  }
}

.feature {
  border-left: var(--primary) 5px solid;
  background-color: var(--base-background);
  transition: all 200ms ease;

  &:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px 0;
    transform: scale(1.05);
  }

  & .screenshot {
    box-shadow: none;
    border: #bbb .5px solid;
  }
}

/* Forms */

input, textarea, select {
  display: inline-block;
  margin: 0;
  padding: 8px 8px;
  border: #ccc 1px solid;
  border-radius: 5px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.btn, button, input[type='submit'] {
  display: inline-block;
  position: relative;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: var(--secondary);
  background: linear-gradient(180deg, #006ec8 0%, #0063b5 100%);
  padding: 10px 16px;
  color: #fff;
  text-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 200ms ease;
  text-decoration: none;

  &:hover, &.on {
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 0;
    transform: scale(1.08);
    cursor: pointer;
  }
}

/* Container */

#content {
  position: relative;
  z-index: 10;
  min-height: 100%;
  padding-top: 50px;
}

main {
  margin-top: 40px;
  margin-bottom: 40px;
}

.container {
  margin-inline: auto;
  width: 100%;
  padding: 0 15px;
  max-width: 105ch;
  text-align: left;

  @media (min-width: 760px) {
    padding: 0 30px;
  }
  @media (min-width: 1020px) {
    padding: 0;
  }
}

/* Grid layout */

.row {
  @media (min-width: 480px) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr auto;
  }
}
/*
.col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { margin-bottom: 20px !important; }
*/
@media (min-width: 480px) {
  .col-2, .col-3, .col-4, .col-5, .col-6, .col-7 { grid-column: auto / span 6; margin-bottom: 0 !important; }
  .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: auto / span 12; margin-bottom: 0 !important; }
}
@media (min-width: 800px) {
  .col-2 { grid-column: auto / span 2; }
  .col-3 { grid-column: auto / span 3; }
  .col-4 { grid-column: auto / span 4; }
  .col-6 { grid-column: auto / span 6; }
  .col-7 { grid-column: auto / span 7; }
  .col-8 { grid-column: auto / span 8; }
  .col-9 { grid-column: auto / span 9; }
  .col-10 { grid-column: auto / span 10; }
  .col-11 { grid-column: auto / span 11; }
  .col-12 { grid-column: auto / span 12; }
}

/* Footer */

footer {
  position: relative;
  padding-top: 40px;
  overflow: hidden;

  @media (max-width: 600px) {
    height: 190px;
  }

  & a {
    text-decoration: none;
  }

  & #logo {
    position: relative;
    display: inline-block;
    top: 5px;
    margin-right: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
    border-radius: 2px;
    min-width: 290px;
    min-height: 92px;
    background: linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
    background-color: #fff;
    padding-top: 20px;
    text-align: center;

    @media (max-width: 600px) {
      width: 100%;
      top: 55px;
    }

    & .since {
      opacity: 0;
      position: relative;
      top: -15px;
      color: #999;
      font-size: 14px;
      transition: all 200ms ease;
      text-shadow: none;
    }
    &:hover .since {
      opacity: 1;
    }
  }

  & nav.primary {
    display: inline-block;
    float: left;
    margin-top: 35px;

    @media (max-width: 600px) {
      position: relative;
      top: -100px;
      margin: 0 auto;
      width: 100%;
      text-align: center;
    }
  }
}

/* Dark section

@keyframes flicker {
  0% { opacity: 1; }
  2% { opacity: .6; }
  4% { opacity: 1; }
  6% { opacity: .6; }
  10% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes flicker-2 {
  0% { opacity: 1; }
  13% { opacity: 1; }
  15% { opacity: .6; }
  17% { opacity: 1; }
  19% { opacity: .6; }
  23% { opacity: 1; }
  100% { opacity: 1; }
}

.dark {
  background-image: url('/images/header-bg.gif');
  background-size: 16px;
  width: 100%;
  padding-top: 40px;
  overflow: hidden;

  & h1 {
    color:  var(--primary-dark);
    text-shadow: rgba(238, 97, 31, 0.3) 0px 0 6px;
  }
  & a {
    color: var(--secondary-dark);
    text-shadow: rgba(43, 165, 233, 0.6) 0px 0 4px;
    transition: all .25s;

    &:hover {
      color: #74cbfb;
      text-shadow: rgba(116, 203, 251, 0.9) 0px 0 4px;
    }
  }
}

#intro {
  color: #fff;
  font-size: 20px;

  @media (min-width: 1100px) {
    font-size: 22px;
  }
  @media (min-width: 1200px) {
    font-size: 24px;
  }

  & .container {
    padding: 0 30px;

    @media (max-width: 600px) {
      padding: 0 20px;
    }
  }
}

.intro {
  position: relative;
  top: -20px;
  font-size: 22px;

  @media (max-width: 800px) {
    margin-top: 0;
    font-size: 20px;
  }

  & .summary {
    position: absolute;
    bottom: 0;

    @media (max-width: 480px) {
      position: relative;
    }

    & h2 {
      text-shadow: rgba(238, 97, 31, 0.3) 0px 0 6px;
      font-size: 36px;

      @media (max-width: 800px) {
        font-size: 32px;
      }
      @media (max-width: 480px) {
        font-size: 28px;
      }
    }
  }
}
*/


/* Projects

#portfolio {
  margin-bottom: 30px;
  height: auto;
}
#projects {
  gap: 20px;
  margin-bottom: 30px !important;

  @media (max-width: 800px) {
    gap: 10px;
  }
}
*/

/* Projects Carousel

@keyframes slide-fade {
  0% { opacity: 0; }
  12.5% { opacity: 1; }
  25% { opacity: 0; }
}

#preview {
  & ul {
    position: relative;
    margin-left: 0;
    list-style: none;

    @media (max-width: 800px) {
      height: 60vw;
    }

    & li {
      position: absolute;
      opacity: 0;
      animation: slide-fade 20s infinite;
      width: 100%;

      &:nth-child(2) {
        animation-delay: 5s;
      }
      &:nth-child(3) {
        animation-delay: 10s;
      }
      &:nth-child(4) {
         animation-delay: 15s;
      }

      & img {
        width: 100%;
        height: auto;
      }
    }
  }
}
*/

/* Project listings

ul#projects {
  list-style: none;
  margin-bottom: 0;
  margin-left: 0;

  & li {
    display: inline-block;
    position: relative;
    float: left;
    margin-bottom: 0;
    transition: all 200ms ease;

    @media (max-width:480px) {
      margin-bottom: 20px;
    }

    &:hover {
      z-index: 2;
      transform: scale(1.1);

      & img {
        box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 8px 0px;
      }
    }

    & img {
      position: relative;
      float: left;
      width: 100%;
      height: auto;
    }
  }
}
#info {
  color: #fff;

  @media (max-width: 990px) {
    clear: left;
    margin-bottom: 40px;
    width: 100%;
  }

  & ul {
    list-style: square;
  }
}
*/

/* Features

#features {
  position: relative;
  margin-top: 40px;
  margin-bottom: 40px;

  & .back {
    float: left;
    margin-bottom: 30px;
  }
  & .next {
    float: right;
    margin-bottom: 30px;
  }
}
*/

/* Homepage */

/*
#home {
  position: relative;
  margin-top: 40px;

  & #feature1, #feature2, #feature3 {
    margin-bottom: 40px;
    padding-right: 50px;

    @media (max-width:990px) {
      width: 100%;
    }
    @media (max-width:650px) {
      padding-right: 0;
    }
  }
}
*/

.definition {
  position: relative;
  margin-bottom: 0;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 22px 0;
  background-color: var(--base-background);
  backdrop-filter: saturate(300%) blur(5px);
/*
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%);
  background-color: #fff;
*/
  border-radius: 2px;
  padding: 30px 20px;
/*
  color: #444;
*/
  text-align: left;

  & .word {
    margin-bottom: 5px;
/*
    color: #444;
*/
    & .design {
      font-family: 'Georgia', 'Times New Roman', serif;
      font-size: 32px;

      @media (max-width: 800px) {
        font-size: 24px;
      }
    }
  }

  & .definitions {
    list-style: decimal;
    margin-left: 30px;

    @media (max-width: 800px) {
      margin-left: 20px;
    }

    & li {
      margin-bottom: 3px;
    }
  }

  &.intro {
    position: relative;
    display: inline-block;
    padding: 30px;

    @media (max-width: 800px) {
      margin-bottom: 20px;
      width: 100%;
      padding: 20px;
    }

    & .word {
      margin-bottom: 10px;
      & .design {
        font-size: 44px;

        @media (max-width: 800px) {
          font-size: 32px;
        }
      }
    }
    & .pronounce {
      position: relative;
      top: -4px;
      font-family: 'Courier Prime', Courier New, Courier, Helvetica, Arial, serif;
      font-size: 26px;

      @media (max-width: 800px) {
        top: -3px;
        font-size: 22px;
      }
    }
    & .logo {
      position: relative;
      top: -7px;
      margin-bottom: -15px;
      vertical-align: middle;

      @media (max-width: 800px) {
        width: 240px;
      }
    }
  }
}

#ovi {
  display: block;
  position: relative;
  float: left;
  margin-right: 20px;

  & .photo {
    border-radius: 100%;
  }
  & .speechbubble {
    display: block;
    position: absolute;
    top: 30px;
    left: -128px;
    border-radius: 7px;
    width: 125px;
    background-color: #fff;
    padding: 6px 10px;
    color: #333;
    text-align: center;

    &:after {
      content: '';
      position: absolute;
      top: 13px;
      right: -13px;
      border-color: transparent transparent transparent #fff;
      border-width: 7px;
      border-style: solid;
    }
    & p {
      margin-bottom: 0;
      color: #666;
      font-size: 18px;
      line-height: 1.6;
    }
  }
}

/* Blog

#blog {
  & .blog-header {
    & a {
      text-decoration: none;
    }

    & ul.subnav {
      display: inline-block;
      margin: 0;
      margin-bottom: 20px;
      list-style: none;

      & li {
        display: inline-block;
        margin-left: 0;
        border-radius: 2px;
        padding: 3px 12px;
        background-color: rgba(0, 0, 0, 0.3);
        font-weight: 400;
        text-shadow: rgba(255, 255, 255, 0.6) 0 0 4px;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  & .blog-feature {
    position: relative;
    margin-bottom: 20px;

    @media (max-width: 799px) {
      margin-bottom: 0;
    }

    & img {
      float: left;
      width: 100%;
    }
  }

  & .blurb {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px;

    @media (max-width: 799px) {
      float: left;
      grid-column: 1 / 13;
    }

    & p {
      margin-bottom: 0;
      font-size: 22px;
    }
  }
*/
  & .pubnotes {
    font-size: 16px;

    & time {
      font-style: italic;
    }
  }
}