/* Tweakpane overrides */
:root {
  --tp-base-background-color: hsla(230, 7%, 17%, 1);
  --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
  --tp-button-background-color: hsla(230, 7%, 70%, 1);
  --tp-button-background-color-active: hsla(230, 7%, 85%, 1);
  --tp-button-background-color-focus: hsla(230, 7%, 80%, 1);
  --tp-button-background-color-hover: hsla(230, 7%, 75%, 1);
  --tp-button-foreground-color: hsla(230, 7%, 17%, 1);
  --tp-container-background-color: hsla(230, 7%, 75%, 0.1);
  --tp-container-background-color-active: hsla(230, 7%, 75%, 0.25);
  --tp-container-background-color-focus: hsla(230, 7%, 75%, 0.20);
  --tp-container-background-color-hover: hsla(230, 7%, 75%, 0.15);
  --tp-container-foreground-color: hsla(230, 7%, 75%, 1);
  --tp-groove-foreground-color: hsla(230, 7%, 75%, 0.1);
  --tp-input-background-color: hsla(230, 7%, 75%, 0.1);
  --tp-input-background-color-active: hsla(230, 7%, 75%, 0.25);
  --tp-input-background-color-focus: hsla(230, 7%, 75%, 0.2);
  --tp-input-background-color-hover: hsla(230, 7%, 75%, 0.15);
  --tp-input-foreground-color: hsla(230, 7%, 75%, 1);
  --tp-label-foreground-color: hsla(230, 7%, 75%, 0.7);
  --tp-monitor-background-color: hsla(230, 7%, 0%, 0.2);
  --tp-monitor-foreground-color: hsla(230, 7%, 75%, 0.7);
  --tp-base-font-family: 'Udon mono Web';
}

.tp-rotv {
  font-size: 11px !important; /* Set font size of tweakpane labels */
}

.tp-lblv_l {
  padding-left: 2px;
  padding-right: 0;
}

.tp-dfwv {
  width: 300px !important; /* Make tweakpane a little wider */
}

@font-face {
	font-family: 'Udon mono Web';
	font-display: swap;
	font-weight: 400;
	font-stretch: normal;
	font-style: normal;
	src: url('../fonts/woff2/UdonMonoWeb-Regular.woff2') format('woff2'), url('../fonts/ttf/UdonMonoWeb-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Udon mono Web';
	font-display: swap;
	font-weight: 700;
	font-stretch: normal;
	font-style: normal;
	src: url('../fonts/woff2/UdonMonoWeb-Bold.woff2') format('woff2'), url('../fonts/ttf/UdonMonoWeb-Bold.ttf') format('truetype');
}

:root {
  /* Font sizes - made with https://www.fluid-type-scale.com/ */
  --fs-sm: clamp(0.6rem, 0.15vi + 0.54rem, 0.66rem);
  --fs-base: clamp(0.75rem, 0.33vi + 0.63rem, 0.88rem);
  --fs-md: clamp(0.94rem, 0.61vi + 0.71rem, 1.17rem);
  --fs-lg: clamp(1.17rem, 1.02vi + 0.79rem, 1.55rem);
  --fs-xl: clamp(1.46rem, 1.62vi + 0.86rem, 2.07rem);
  --fs-xxl: clamp(1.83rem, 2.48vi + 0.9rem, 2.76rem);
  --fs-xxxl: clamp(2.29rem, 3.72vi + 0.9rem, 3.68rem);
}

body {
  background-color: #f8f9fa;
  font-family: "Udon mono Web";
  color: #343a40;
  font-weight: 400;
}

html, body {
  margin: 0;
  padding: 0;
}

main {
  display: none;
}

.sketch-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; 
  margin: 0;
  padding: 0;
}

.p5Canvas {
  margin-bottom: -4px;
}

.sketch--full {
  width: 100vw;
  height: 100vh;
  background: #f1f3f5;
}

.sketch--fixed {
  max-width: calc(100vw - 2*1.2em);
  max-height: calc(100vh - 2*1.2em);
  background: #f1f3f5;
  width: 1200px;
  height: 800px;
}

.sketch--square {
  max-width: 800px;
  max-height: 800px;
  background: #f1f3f5;
  width: 80vw;
  height: 80vw;
}

.p5Canvas svg {
  width: 100%;
  height: 100%;
}

.labels a,.labels{
  color: #343a40;
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 400;
}


.labels a:hover {
  border-bottom: 1px solid #343a40;
}

.label--back {
  position: absolute;
  float: left;
  top: 1.2em;
  left: 1.2em;
}

.label--fps {
  position: absolute;
  float: left;
  top: 1.2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-base);
  font-weight: 400;
  color: #f8f9fa;
  background-color: #343a40;
  padding: 0.2em 0.3em;
  margin: -0.2em -0.3em;
  border-radius: 0.2em;
}

.label--title {
  position: absolute;
  float: left;
  bottom: 1.2em;
  left: 1.2em;
}

.label--github {
  position: absolute;
  float: left;
  bottom: 1.2em;
  right: 1.2em;
}

#icon--back {
  margin-right: 5px;
}

.home {
  overflow: visible;
}

.container {
  padding: 5em 0 1em 0;
  text-align: center;
}

.sketchlist {
  padding: 10px;
  display: inline-block;
  margin: 0px auto;
  text-align: left;
}
.sketchlist a {
  text-decoration: none;
  color: #343a40;
  border-bottom: 1px solid #dedede;
}
.sketchlist a:hover {
  border-bottom: 1px solid #343a40;
}

.sketchlist h1 {
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 0.75em;
}

.sketchlist h2 {
  font-size: var(--fs-base);
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 1.5em;
}

.sketchlist hr {
  border: 0;
  border-bottom: 1px solid #343a40;
  margin-bottom: 1.5em;
}

.sketchlist p {
  margin-bottom: 3em;
}

.sketchlist ul {
  column-count: 4;
  column-gap: 4em;
  list-style-type: none;
  margin: 0;
  padding: 0 0 1em 0;
}
.sketchlist li {
  font-size: var(--fs-base);
  line-height: 1.5em;
}
.sketchlist ul > li:first-child {
  text-transform: uppercase;
}
.sketchlist hr:last-of-type + ul > li:first-child {
  text-transform: none;
}
.sketchlist p {
  font-size: var(--fs-base);
}