/* scaling inspired by Jeff Geerling's page */
:root {
  --font-size-base:  1.125rem;
  --font-size-small: 0.938rem;
  --font-size-h1:        4rem;
  --font-size-h2:        2rem;
  --font-size-h3:    1.375rem;
  
  --spacing-xs: 0.75rem;
  --spacing-sm:  0.8rem;
  --spacing-md:    3rem;
  --spacing-lg:    4rem;
  --spacing-xl:    6rem;
  
  --container-max:       48rem;
  --container-padding:  2.5rem;
  --container-margin-y:   4rem;
}


/*
*, ::before, ::after {
  box-sizing: border-box;
}
*/


html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100dvw;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  background: url('sea.gif') repeat;
  background-size: calc(101px * 1.5) calc(68px * 1.5);
  image-rendering: crisp-edges;
  background-attachment: fixed;
  font-family: 'Univerza Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: #000;
}

header {
  position: relative;
}

#turbinecontainer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100dvw;
  height: 100dvh;
  pointer-events: none;
  z-index: 1;
}

.turbine {
  display: none;
  position: absolute;
  will-change: transform;
  user-select: none;
  pointer-events: none;
}

/* main Container */
.container {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: var(--container-margin-y) auto;
  padding: var(--spacing-lg) var(--container-padding);
  background: rgba(255, 255, 255, 0.88);
  min-height: calc(100dvh - (2 * var(--container-margin-y)));
  box-shadow: 10px 10px #0000009e;
  opacity: 0;
  animation: fadeIn 0.8s ease-in-out forwards;
  backdrop-filter: blur(5px);
  outline: rgba(0, 0, 0, 0.88) solid 2px;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* typography */
h1, h2, h3, nav {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: normal;
  letter-spacing: -0.02em;
}

h1 {
  font-family: 'Futura Bk', 'Helvetica Neue', Helvetica, Arial, sans-serif;;
  font-size: var(--font-size-h1);
  margin: 0 0 var(--spacing-xs) 0;
  font-weight: bold;
  line-height: 1.1;
  /* border-bottom: 2px solid #000; */
  /* padding-bottom: 0; */
}

h2 {
  font-size: var(--font-size-h2);
  margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
  border-bottom: 1px solid #000;
  padding-bottom: var(--spacing-xs);
  line-height: 1.2;
}

h2:first-of-type {
  margin-top: 0;
}

.tagline {
  margin: 0;
  color: #666;
  font-size: var(--font-size-small);
  font-weight: bold;
}

/* navigation */
nav {
  /* margin-top: var(--spacing-md); */
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-small);
}

nav a {
  color: #000;
  text-decoration: none;
  margin-right: var(--spacing-sm);
  border-bottom: 1px solid transparent;
  display: inline-block;
  font-weight: bold;
}

nav a:hover {
  border-bottom: 1px solid #000;
}

/* sections */
section {
  margin-bottom: var(--spacing-lg);
}

section p {
  margin: 0 0 var(--spacing-sm) 0;
}

section p:last-child {
  margin-bottom: 0;
}

/* links */
a {
  color: #0000EE;
  text-decoration: underline;
}

a:visited {
  color: #551A8B;
}

a:hover {
  color: #d90171;
}

/* work list */
.work-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.work-list li {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px dotted #ccc;
}

.work-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.text-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: var(--font-size-h3);
  display: block;
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
}

.text-desc {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: #333;
}

.text-smol {
  /* display: block; */
  font-size: var(--font-size-small);
  color: #666;
  font-style: italic;
}

/* footer */
footer {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-sm);
  border-top: none;
  font-size: var(--font-size-small);
  color: #666;
  text-align: center;
  position: relative;
}
/* css nightmare, i presume? */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  border-top: 1px solid #ccc;
}

footer p {
  margin: 0;
}

.pixelated {
  image-rendering: crisp-edges;
}

#fmbl {
  --obj-pos-x: 0%;
  object-fit: none;
  object-position: var(--obj-pos-x) 63%;
  /*border-width: 4px 5px 6px 3px;*/
  position: absolute;
  width: calc(88px * 2.75);
  height: calc(31px * 2);
  right: 7%;
  top: 28%;
  transform: translateY(-50%) scale(0.80);
  outline: black solid 4px;
  box-shadow: 10px 10px #0000009e;
  transition: 0.5s ease;
  /* background-color: white; */
  transition-property:
    height,
    object-position,
    top,
    right,
    transform,
    opacity;
  &:hover {
    cursor: grab;
    height: calc(31px * 11);
    top: 70%;
    object-position: var(--obj-pos-x) 75%;
  }
}

/* responsive tweaks */
@media (max-width: 40rem) {
  nav a {
    display: block;
    width: fit-content;
    /* margin-bottom: var(--spacing-xs); */
  }
  /*this is messy but idc*/
  #fmbl {
    right: -5%;
    /* transform: translateY(-25%) scale(0.75);
    height: calc(31px * 10);
    &:hover {
      object-position: 0% 63%;
      top: 50%;
    } */
  }
}

@media (max-width: 31.5rem) {
  #fmbl {
    opacity: 0;
    pointer-events: none;
  }
}