/* Work Sans - Regular */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(
      /fonts/WorkSans-Regular.woff2
    )format('woff2');
}

/* Work Sans - SemiBold */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(
      /fonts/WorkSans-SemiBold.woff2
    )format('woff2');
}

/* Press Start 2P - Latin */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: 
    /*     local('Press Start 2P Regular'), local('PressStart2P-Regular'),  */ url(
      /fonts/press-start-2p-latin.woff2
    )format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blue: #163BF3;
  --pale-pink: #FFC6DB;
  --pink: #FF5386;
  --black: #050505;
}

* {
  padding: 0;
  margin: 0;
}

html {
  overflow: hidden;
}

body {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.window {
  background: white;
  position: absolute;

  -webkit-box-shadow: 10px 10px 0px var(--black);
  -moz-box-shadow: 10px 10px 0px var(--black);
  box-shadow: 10px 10px 0px var(--black);
  transition: all 0.5s;
}

.window-frame {
  -webkit-appearance: none;
  border: 2px solid var(--black);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.window:hover/* > .window-frame*/ {
  -webkit-box-shadow: 15px 15px 0px var(--black);
  -moz-box-shadow: 15px 15px 0px var(--black);
  box-shadow: 15px 15px 0px var(--black);
}

.text-regular {
  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Inter, Arial, sans-serif;
  font-size: 18px;
  line-height: 140%;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: subpixel-antialiased;
  font-feature-settings: 'pnum' on, 'lnum' on;
}

.text-semibold {
  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Inter, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  -webkit-font-smoothing: subpixel-antialiased;
  font-feature-settings: 'tnum' on, 'lnum' on;
}

.text-pixel {
  font-family: 'Press Start 2P', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 20px;
  -webkit-font-smoothing: none;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: 'liga' off;
}

.pink {
  color: var(--pink);
}

.black {
  color: var(--black);
}

.pale-pink {
  color: var(--pale-pink);
}

.abs {
  position: absolute;
}

a,
a:link {
  color: var(--pink);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--blue);
}

header {
  position: absolute;
  top: 0;
  left: 0;
}

.link-home {
  padding: 10px 20px;
  display: inline-block;
}
