body {
    font-size: 1.75rem;
    font-family: serif;
}


pre {
font-size: 1.4rem;
}

nav, nav * {
    font-size: 1rem !important;
    background-color: #ff8d00;
    color: white!important;
}


header.project--header {
background-color: #ff8d00;

}

a {
 color: #ff8d00;
 font-family: sans-serif;
}

a:hover {
text-decoration: underline;
}

a:after {
content: '';
}


h2, h3 {
    font-size: 2.5rem;
}


main.project--content {
display: block;
}

main.project--content > * {
display: block;
margin-inline: auto;
max-width: 80ch;
}

video, img {
max-height: 80vh;
max-width: 100%;
object-fit: contain;
}

#svg-container {

    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    pointer-events: none;

}

.drawing {
position: absolute;
top: 0;
left: 0;
pointer-events: all;
}

.drawing:hover {
rotate: 1turn;
transition: rotate 0.5s ease-out;
}

@keyframes grow {
  0% {
    scale: 0.1;
  }
  100% {
    scale: 1;
  }
}

.destination svg path {
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s 1 grow;
}