@font-face {
  font-family: "merivaBold";
  src: url("/assets/fonts/Meriva-Medium.otf");
}

@font-face {
  font-family: "meriva";
  src: url("/assets/fonts/Meriva-Regular.otf");
}

@font-face {
  font-family: "merivaMono";
  src: url("/assets/fonts/Meriva-Extra.otf");
}

:root {
  /* --projectTitlePtSize: clamp(2rem, 5vw, 3.33rem); */
  --projectTitlePtSize: clamp(1.5rem, 4vw, 2.8rem);
  --mobileBreakpoint: 768px;
  --tabletBreakpoint: 1024px;

  --padding0: 1rem;
  --padding1: 3rem;
  --padding2: 6rem;

  /* --bgColor: #fff; */
  /* --fgColor: #000; */
  /* --fgColor: #dadbda; */
  --bgColor: #000;
  --fgColor: #fff;

  /* overscroll-behavior: none; */
}

.isMobile {
  display: none;
}

.isDesktop {
  display: block;
}

.isDesktopFlex {
  display: flex;
}

.spacer0 {
  height: 1rem;
}

.spacer1 {
  height: 3rem;
}

.spacer2 {
  height: 5rem;
}

.pad0 {
  padding: var(--padding0);
}

.pad1 {
  padding: var(--padding1);
}

.pad2 {
  padding: var(--padding2);
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--bgColor) !important;
  color: var(--fgColor) !important;
  border-radius: 2rem;
  /* box-shadow: 0 0 5px 0 rgba(255, 255, 255, 1); */
}

body {
  overflow: hidden;
  height: 100vh;
  background-color: var(--bgColor) !important;
  /* border: 1px solid var(--fgColor); */
  font-family: "merivaBold", sans-serif;
}

.project:nth-child(2n + 1) .projectIcon {
  position: absolute;
  right: 50px;
  left: unset;
}

.project:nth-child(2n) .projectIcon {
  position: absolute;
  left: 50px;
  right: unset;
}

a {
  text-decoration: none;
}

hr {
  margin: 0;
  padding: 0;
  border: 1px solid var(--fgColor);
}

footer {
  position: relative;
  border: 1px solid red;
  margin-top: 5rem;
  padding-bottom: 2rem;
  width: 100%;
}