@font-face {
  font-family: "PpNeueMachina";
  src: url("fonts/659dbdfd5a080be8d348316e_PP Neue Machina Inktrap Medium.ttf"),
    format("truetype");
}
@font-face {
  font-family: "PpNeueMachina_light";
  src: url("fonts/659dbdfd5a080be8d348316f_PPNeueMachina_ Light.ttf")
    format("truetype");
}
body {
  transition: background-color ease-out 0.5s;
}
:root {
  --selection: #ef9d71;
  --black: black;
  --white: white;
  /* --cyan: #aedee0; */
  /* --darkCyan: #032b44; */
  --cyan: #CDE8E5;
  --darkCyan: #4D869C;
  --salmon: salmon;
  /* --lightSalmon: #f0f0f0; */
  --lightSalmon: #960f00;
  /* --yellow: #D8EFD3; */
  --yellow: #FFCAD4;
  /* --darkYellow: #55AD9B; */
  --darkYellow: #FF407D;
}
.videodiv {
  clip-path: circle(var(--clip) at 50% 50%);
}
*::selection {
  background-color: var(--selection);
}

body[theme="black"] {
  background-color: var(--black);
}
body[theme="black"] .section {
  color: var(--white);
}
body[theme="cyan"] {
  background-color: var(--cyan);
}
body[theme="cyan"] .section {
  /* color: #00626d; */
  color: var(--darkCyan);
}
body[theme="salmon"] {
  background-color: var(--salmon);
}
body[theme="salmon"] .section {
  /* color: #F5F5DC; */
  color: var(--lightSalmon);
}
body[theme="white"] {
  background-color: var(--white);
}
body[theme="white"] .section {
  color: var(--black);
}
body[theme="yellow"] {
  background-color: var(--yellow);
}
body[theme="yellow"] .section {
  color: var(--darkYellow);
}

/* Add this to apply the custom font to the h1 element */
/* h1 {
  font-family: "PpNeueMachina", sans-serif;
} */