* {
  box-sizing: border-box; }

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-y: hidden; }

body {
  font-family: Segoe UI, sans-serif;
  overflow-y: scroll; }

h1 {
  font-family: Courier New, Courier, monospace;
  color: rgba(255, 255, 255, 0.8); }

p, ul {
  font-family: Segoe UI, sans-serif;
  color: rgba(255, 255, 255, 0.5); }

ul {
  display: block;
  list-style: none;
  counter-reset: ul;
  padding-left: 16px; }
  ul li {
    display: block;
    padding: 2px 0;
    counter-increment: ul; }
    ul li:before {
      content: counter(ul, decimal-leading-zero) ".";
      color: rgba(255, 255, 255, 0.3);
      margin-right: 4px; }

.top-bar {
  position: absolute;
  top: 0;
  height: calc(50vh - 50px);
  width: 100%;
  overflow-x: hidden;
  background-color: #f0f0f0;
  background-image: url(../img/buildings.svg);
  background-position: bottom center;
  background-size: 256px;
  background-repeat: no-repeat; }
  .top-bar .car, .top-bar .truck {
    position: absolute;
    bottom: 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite; }
  .top-bar .car {
    left: -20px;
    width: 20px;
    animation-name: car-slide-left-right;
    animation-duration: 10s; }
    .top-bar .car:nth-child(2n) {
      animation-delay: 2s;
      animation-duration: 6s; }
    .top-bar .car:nth-child(3n) {
      animation-delay: 4s;
      animation-duration: 12s; }
    .top-bar .car.right {
      animation-name: car-slide-right-left; }
  .top-bar .truck {
    left: -36px;
    width: 36px;
    animation-name: truck-slide-left-right;
    animation-duration: 12s; }
    .top-bar .truck:nth-child(2n) {
      animation-delay: 4s;
      animation-duration: 16s; }
    .top-bar .truck:nth-child(3n) {
      animation-delay: 8s;
      animation-duration: 14s; }
    .top-bar .truck.right {
      animation-name: truck-slide-right-left; }

.content {
  position: relative;
  padding-top: calc(50vh - 50px);
  min-height: calc(100vh - 80px);
  background-color: #101010;
  overflow: hidden; }
  .content .top {
    text-align: center;
    padding: 16px 0; }
  .content .ctsoft {
    font-family: Courier New, Courier, monospace;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 0;
    color: #f0f0f0; }
    .content .ctsoft sup {
      font-size: 24px; }
  .content .tagline {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: Courier New, Courier, monospace; }
  .content .container {
    margin: auto;
    width: 60%;
    max-width: 640px;
    min-width: 288px;
    margin-top: 32px;
    padding-top: 32px;
    padding-bottom: 96px;
    border-top: 2px dashed rgba(255, 255, 255, 0.8);
    transition: opacity linear 0.165s, transform cubic-bezier(0, 0, 0.2, 1) 0.33s;
    transform: translateY(0); }
    .content .container.hidden {
      opacity: 0;
      transform: translateY(100vh);
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }

.section + .section {
  margin-top: 64px; }

.blink.hidden {
  display: none; }

strong {
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.6px; }

.bullet {
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 8px; }

.name {
  color: rgba(255, 255, 255, 0.3); }
  .name + .selectable {
    margin-left: 4px; }

.selectable {
  display: inline-block;
  cursor: text;
  user-select: all;
  position: relative;
  padding: 0 2px;
  margin-left: -2px; }
  .selectable:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    opacity: 0;
    transition: opacity ease-in-out 0.1s; }
  .selectable:hover:before {
    opacity: 1; }

.product {
  position: relative;
  width: 100%; }
  .product .logo {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding-top: 8px;
    width: 80px; }
  .product .info {
    padding-left: 96px; }
    .product .info .tagline {
      color: rgba(255, 255, 255, 0.5); }
    .product .info p {
      margin: 4px 0;
      color: rgba(255, 255, 255, 0.35); }

a.btn {
  display: inline-block;
  position: relative;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.8);
  height: 32px;
  line-height: 32px;
  margin-top: 16px;
  width: 100%;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-sizing: content-box; }
  a.btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    opacity: 0;
    transition: opacity ease-in-out 0.1s; }
  a.btn:hover:before {
    opacity: 1; }

@keyframes car-slide-left-right {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(calc(100vw + 20px)); } }

@keyframes car-slide-right-left {
  0% {
    transform: translateX(calc(100vw + 20px)) scaleX(-1); }
  100% {
    transform: translateX(0) scaleX(-1); } }

@keyframes truck-slide-left-right {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(calc(100vw + 36px)); } }

@keyframes truck-slide-right-left {
  0% {
    transform: translateX(calc(100vw + 36px)) scaleX(-1); }
  100% {
    transform: translateX(0) scaleX(-1); } }