*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
  -webkit-tap-highlight-color: transparent;
}

body {
  --sb-track-color: #60a4ff;
  --sb-thumb-color: linear-gradient(to bottom, #7debf2, #60a4ff);
  --sb-size: 10px;
}

body::-webkit-scrollbar {
  width: var(--sb-size);
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

body {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  background: linear-gradient(90deg, #7debf2, #60a4ff);
}

@font-face {
  font-family: 'Pretendo';
  src: url('fonts/pretendo.woff2') format('woff2'),
    url('fonts/pretendo.woff') format('woff'),
    url('fonts/pretendo.ttf') format('truetype');
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/lato.woff2') format('woff2'),
    url('fonts/lato.woff') format('woff'),
    url('fonts/lato.ttf') format('truetype');
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('fonts/PressStart2p.ttf') format('truetype');
}

/***************************VIEW TRANSITIONS***************************/
html {
  view-transition-name: squareView;
  background: linear-gradient(90deg, #7debf2, #60a4ff);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(squareView) {
  animation: myViewTransition 0.4s ease reverse forwards;
}

::view-transition-new(squareView) {
  animation: myViewTransition 0.7s ease forwards;
}

@keyframes myViewTransition {
  0% {
    clip-path: circle(0% at 50% 34%);
  }
  100% {
    clip-path: circle(116% at 50% 34%);
  }
}