html, body {
  margin: 0;
  padding: 0;
  font-family:"Handjet", sans-serif;
  font-size:10vh;
   overflow-y: hidden;
  overflow-x: hidden;
}

canvas {
  display: block;
}

.handjet-<uniquifier> {
  font-family: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
}

#sketch-holder {  
  display: flex;  
  height: 100vh;  
  align-items: center;  
  justify-content: center;
  z-index: -4;
}

.modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9 h1 {
  margin: 0 0 0.5em 0;
}

.modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9 p {
  margin: 0 0 1em 0;
}

.modal-wrapper1 {
  cursor:none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
  font-family: sans-serif;
  display: none;
}


.modal1 {
  position: relative;
  z-index: 2;
  background: rgba(100, 120, 134, .22);
  padding: 20px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 19px rgba(0,0,0,0.1);
}


.modal1 img {
  position: absolute;
  left: -100px;
  top: 0px;
}

.modal-wrapper2 {
  position: fixed;
  top: 100px;
  left: -300px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
  font-family: sans-serif;
  display: none;
}


.modal2 {
  cursor:none;
  position: relative;
  z-index: 2;
  background: rgba(100, 120, 134, .22);
  padding: 20px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 19px rgba(0,0,0,0.1);
}

.modal2 img {
  position: absolute;
  left: -100px;
  top: 0px;
}

.modal-wrapper3 {
  cursor:none;
  position: fixed;
  top: 60px;
  left: 60px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
  font-family: sans-serif;
  display: none;
}


.modal3 {
  position: relative;
  z-index: 2;
  background: rgba(100, 120, 134, .22);
  padding: 20px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 19px rgba(0,0,0,0.1);
}

.modal3 img {
  position: absolute;
  left: -100px;
  top: 0px;
}

.modal-wrapper4 {
  cursor:none;
  position: fixed;
  top: -100px;
  left: -100px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
  font-family: sans-serif;
  display: none;
}


.modal4 {
  position: relative;
  z-index: 2;
  background: rgba(100, 120, 134, .22);
  padding: 20px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 19px rgba(0,0,0,0.1);
}

.modal4 img {
  position: absolute;
  left: -100px;
  top: 0px;
}

.modal-wrapper5 {
  cursor:none;
  position: fixed;
  top: 0px;
  left: 400px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
  font-family: sans-serif;
  display: none;
}


.modal5 {
  position: relative;
  z-index: 2;
  background: rgba(100, 120, 134, .22);
  padding: 20px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 19px rgba(0,0,0,0.1);
}

.modal5 img {
  position: absolute;
  left: -100px;
  top: 0px;
}

.modal-wrapper6 {
  cursor:none;
  position: fixed;
  top: 0px;
  left: 200px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
  font-family: sans-serif;
  display: none;
}


.modal6 {
  position: relative;
  z-index: 2;
  background: rgba(100, 120, 134, .22);
  padding: 20px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 19px rgba(0,0,0,0.1);
}

.modal6 img {
  position: absolute;
  left: -100px;
  top: 0px;
}

.modal-wrapper7 {
  cursor:none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
  font-family: sans-serif;
  display: none;
}


.modal7 {
  position: relative;
  z-index: 2;
  background: rgba(100, 120, 134, .22);
  padding: 20px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 19px rgba(0,0,0,0.1);
}

.modal7 img {
  position: absolute;
  left: -100px;
  top: 0px;
}

.modal-wrapper8 {
  cursor:none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
  font-family: sans-serif;
  display: none;
}


.modal8 {
  position: relative;
  z-index: 2;
  background: rgba(100, 120, 134, .22);
  padding: 20px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 19px rgba(0,0,0,0.1);
}

.modal8 img {
  position: absolute;
  left: -100px;
  top: 0px;
}

.modal-wrapper9 {
  cursor:none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
  font-family: sans-serif;
  display: none;
}


.modal9 {
  position: relative;
  z-index: 2;
  background: rgba(100, 120, 134, .22);
  padding: 20px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 19px rgba(0,0,0,0.1);
}

.modal9 img {
  position: absolute;
  left: -100px;
  top: 0px;
}