@font-face {
  font-display: swap;
  font-family: 'FredokaOne';
  font-style: normal;
  font-weight: 400;
  /*src: url('./font/FredokaOne-Regular.ttf');*/
  src: url('./font/LakkiReddy-Regular.ttf');
}

html, body {
  margin: 0;
  background-color: #151515;
  background: linear-gradient(201deg, rgb(195,34,195) 0%, rgb(253,187,45) 100%);
  color: #eca;
  background-attachment: fixed;
  min-height: 100vh;

}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


body {
  margin: 0;
/*  image-rendering: crisp-edges;*/
/*  overflow: hidden;*/
 /* user-select: none;
  touch-action: none;*/
}

#board {
  display: flex;
  height: 100%;
  border-bottom: 1px solid #433;
}

#board canvas {
  width: 100%;
  height: 100%;
}

h1, h2, h3 {
    margin: 0;
    font-family: FredokaOne;
}

.msg {
/*  visibility: hidden;*/
}

.boxy {
    background-color: #0a0a0a;
    border-radius: 3px;
    padding:4px;
    margin-bottom: 1em;
    border: 5px groove #f09;
    box-shadow: 0px 5px 5px rgba(0,0,0,0.1);
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.25), rgba(255,255,255, 0.25) 1px, transparent 1px, transparent 6px);
    background-size: 4px 4px;
}

.rot1 {
    transform: rotate(-1.5deg);
}
.rot2 {
    transform: rotate(1deg);
}
.rot3 {
    transform: rotate(-1deg);
}
.rot4 {
    transform: rotate(-0.5deg);
}