@font-face {
  font-family: BaksoSapi;
  src: url(fonts/BaksoSapi-Regular.otf);
}

@font-face {
  font-family: Bauhaus;
  src: url(fonts/Bauhaus-Regular.ttf);
}

@font-face {
  font-family: Cyberpunk;
  src: url(fonts/Cyberpunk-Regular.ttf);
}


@font-face {
  font-family: Freedamtheory;
  src: url(fonts/Freedamtheory-Regular.otf);
}

@font-face {
  font-family: Monet;
  src: url(fonts/Monet-Regular.ttf);
}

@font-face {
  font-family: Parklane;
  src: url(fonts/Parklane-Regular.ttf);
}

@font-face {
  font-family: Roboto;
  src: url(fonts/Roboto-Light.ttf);
}

@font-face {
  font-family: Slabo;
  src: url(fonts/Slabo-Regular.ttf);
}

@font-face {
  font-family: Vincent;
  src: url(fonts/Vincent-Regular.ttf);
}

body *, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background-color: rgb(245, 245, 245);
  font-family: Roboto;
}

a {
  color: rgb(25, 25, 25);
  user-select: none;
}

a:visited, a:active {
  color: rgb(130, 130, 130);
}

.container {
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

#sketch {
  height: 85vh;
  width: 85vh;

  touch-action: none;
}

.instructions {
  position: absolute;
  width: 100vw;
  top: 2vh;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  text-align: center;
  font-size: 1.25rem;

  user-select: none;
}

.footer {
  position: absolute;
  width: 100vw;
  bottom: 2vh;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  
  font-size: 1.25rem;
  text-align: center;
}

#download {
  user-select: none;

  border: 1px solid black;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;

  cursor: pointer;
}

@media only screen and (max-width: 600px) {
  #sketch {
    height: 95vw;
    width: 95vw;
  }

  .footer { 
    font-size: 0.75rem;
  }
}