html {
  scroll-behavior: smooth;
}
body {
  color: #fff;
  background-color: #000;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
}
#circle-arrow-right > circle,
#circle-arrow-right > polyline,
#circle-arrow-right > line {
  stroke: var(--color);
}
body {
  background-color: var(--background-color);
  color: var(--color);
  --background-color: var(--dark-color);
  --color: var(--light-color);
}
body[data-light] {
  --background-color: var(--light-color);
  --color: var(--dark-color);
}
body,
body[data-theme=black] {
  --dark-color: #000;
  --light-color: #eee;
}
body[data-theme=blue] {
  --dark-color: blue;
  --light-color: #fff;
}
body[data-theme=pink] {
  --dark-color: #ad7177;
  --light-color: #fff;
}
body[data-theme=yellow] {
  --light-color: #f9e79f;
  --dark-color: #000;
}
body[data-theme=beach] {
  --dark-color: #2F3C7E;
  --light-color: #FBEAEB;
}
body[data-theme=electric] {
  --light-color: #CCF381;
  --dark-color: #4831D4;
}
body[data-theme=cozy] {
  --light-color: #E2D1F9;
  --dark-color: #317773;
}
body[data-theme=cola] {
  --dark-color: #990011;
  --light-color: #FCF6F5FF;
}
#cursor_parent {
  mix-blend-mode: difference;
  z-index: 10;
  transition-property: none;
  display: none;
  position: fixed;
}
#cursor_parent.cursor-filling {
  transition-property: transform;
}
html.has_cursor,
html.has_cursor body {
  cursor: none;
}
html.has_cursor #cursor_parent {
  display: block;
}
#cursor {
  --scale: 1;
  transform: translate(-50%, -50%) scale(var(--scale));
  pointer-events: none;
}
body:active #cursor {
  --scale: 0.9;
}
body:active #cursor_parent.cursor-filling > #cursor {
  --scale: 0.97;
}
#cursor_parent,
#cursor,
#cursor_interior {
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}
#cursor,
#cursor_interior {
  position: absolute;
}
#cursor_interior {
  background-color: #fff;
  border-radius: 50%;
  bottom: 0;
  left: 0;
  opacity: 0.9;
  right: 0;
  top: 0;
  transition-property: opacity, border-radius;
}
#cursor.cursor-filling > #cursor_interior {
  opacity: 0.94;
  transition-duration: 1s;
}
.fillable {
  user-select: none;
}
a {
  cursor: none !important;
}
.link {
  background-color: transparent;
  font-size: 1rem;
  align-self: center;
  padding: 1em 1.5em;
  border-radius: 3em;
  border: 1px solid var(--color);
  transition: border-color 0.1s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  color: var(--color);
}
.link path,
.link line,
.link polyline,
.link rect,
.link circle {
  stroke: var(--color);
}
.link:hover:not(.filling) {
  background-color: #fff;
  color: var(--color);
}
.link:hover:not(.filling) path,
.link:hover:not(.filling) line,
.link:hover:not(.filling) polyline,
.link:hover:not(.filling) rect,
.link:hover:not(.filling) circle {
  stroke: var(--color);
}
.link.circle {
  padding: 1.5rem;
  border-radius: 50%;
}
.link.button {
  font-weight: 400;
  font-family: sans-serif;
  font-size: 1rem;
}
.link > svg {
  width: 2.5vw;
  height: 2.5vw;
  min-width: 2rem;
  min-height: 2rem;
}
.link.small {
  border-radius: 0.2rem;
  border-width: 0;
  padding: 0.5rem 0.5rem;
}
.link.small.circle {
  padding: 0.75rem;
}
.link.small > svg {
  width: 2vw;
  height: 2vw;
  min-width: 1.5rem;
  min-height: 1.5rem;
}
#header {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 400;
  font-family: "ivypresto-display", serif;
}
#header > main {
  display: inline-block;
  margin: 1rem;
}
@media (min-width: 800px) {
  #header > main {
    align-self: flex-start;
    margin: 0 5vw 0 10vw;
  }
}
#header > main > div {
  padding: 5vh 1rem;
  border-radius: 8px;
}
#header > main > div:hover:not(.filling) {
  background-color: var(--color);
  color: var(--background-color);
}
@media (min-width: 800px) {
  #header > main > div {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (min-height: 800px) {
  #header > main > div {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
#header > main > div > h1 {
  font-weight: 300;
  letter-spacing: -2px;
}
#header > main > div > h2 {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5%;
  text-decoration-thickness: max(0.5vw, 0.1rem);
  line-height: 3;
}
#header > main > div > h1,
#header > main > div > h2 {
  font-size: max(8vw, 2.2rem);
  line-height: max(6.5vw, 2rem);
  margin: 0;
}
#header > .spacer {
  flex-grow: 1;
}
#header > #socials {
  margin: 0 5vw;
  display: flex;
}
#header > #socials > .socials-right {
  flex-grow: 1;
  text-align: right;
}
#header > #socials > .socials-right .link {
  margin: 0 0.5vw;
}
#header #gotoContent {
  align-self: center;
  border-color: transparent;
  padding: 0.75rem;
}
@media (min-width: 800px) and (min-height: 800px) {
  #header #gotoContent {
    padding: 2.5rem;
  }
}
#projects {
  margin: 0 10vw;
  font-size: max(1.2rem, 2.2vw);
}
@media (min-width: 800px) {
  #projects {
    margin: 0 5vw;
  }
}
#projects > .fillable-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  color: var(--color);
  cursor: pointer !important;
}
#projects > .fillable-container > .fillable {
  width: 85vw;
  border-radius: 8px;
  padding: 2rem 2vw;
  box-sizing: border-box;
  transition-property: margin-left;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
@media (min-width: 800px) {
  #projects > .fillable-container > .fillable {
    width: 75vw;
  }
}
#projects > .fillable-container > .fillable:hover:not(.filling) {
  background-color: var(--color);
  color: var(--background-color);
}
#projects > .fillable-container > .fillable > .title {
  font-size: 1.5rem;
  display: inline-block;
  width: 100%;
  padding-bottom: 1.25rem;
  font-family: "ivypresto-display", serif;
  font-weight: 500;
  text-decoration: underline;
}
@media (min-width: 800px) {
  #projects > .fillable-container > .fillable > .title {
    font-size: 2rem;
  }
}
#projects > .fillable-container > .fillable > .description {
  font-family: "calmetta", sans-serif;
  text-indent: 4px;
  font-weight: 300;
}
#projects > .fillable-container > svg {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  width: 8vw;
  height: 8vw;
}
@media (min-width: 800px) {
  #projects > .fillable-container > svg {
    display: block;
  }
}
.has_cursor #projects > .fillable-container:hover > .fillable {
  margin-left: 5vw;
}
.has_cursor #projects > .fillable-container:hover > svg {
  opacity: 1;
}
footer {
  text-align: center;
  font-size: 1.2rem;
  margin: 3rem 1rem;
}
footer .fillable {
  border-radius: 0.5rem;
  padding: 0.5rem 0.1rem;
}
footer a {
  text-decoration: none;
  color: inherit;
}