@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.1' viewBox='-50 -50 100 100'%3E%3Cdefs%3E%3Cpath id='dash' d='M 0 0 h 10' /%3E%3C/defs%3E%3Cg stroke='hsl(0, 0%25, 100%25)' fill='none' stroke-width='2' stroke-linecap='round'%3E%3Cg id='dashes'%3E%3Cuse transform='rotate(45) translate(30 0)' href='%23dash' /%3E%3Cuse transform='rotate(90) translate(45 0)' href='%23dash' /%3E%3Cuse transform='rotate(135) translate(30 0)' href='%23dash' /%3E%3Cuse transform='rotate(180) translate(45 0)' href='%23dash' /%3E%3C/g%3E%3Cuse href='%23dashes' transform='scale(-1 -1)' /%3E%3C/g%3E%3C/svg%3E"),
    hsl(0, 0%, 12%);
  background-size: 40px;
  color: hsl(0, 0%, 100%);
  min-height: 100vh;
  font-family: 'Play', sans-serif;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}
