sketchComponent css

[hellochar]

.sketch-component {
	 width: 100%;
	 height: 100%;
	 display: flex;
	 text-align: center;
	 position: relative;
	 user-select: none;
}
 .sketch-component .sketch-error {
	 animation-duration: 2s;
	 animation-name: opacify-in;
	 margin: auto;
	 text-align: center;
}
 .sketch-component .sketch-error .back {
	 color: #808080;
	 font-style: italic;
}
 .sketch-component canvas {
	 background: #10161a;
	 display: block;
	 position: relative;
}
 .sketch-component canvas:focus {
	 outline: none;
}
 .sketch-elements {
	 align-items: flex-start;
	 display: flex;
	 top: 0;
	 bottom: 0;
	 right: 0;
	 left: 0;
	 position: absolute;
	 z-index: 1;
	 visibility: hidden;
}
 .sketch-elements > * {
	 visibility: visible;
}
 @keyframes opacify-in {
	 from {
		 opacity: 0;
	}
	 to {
		 opacity: 1;
	}
}
 .user-volume {
	 position: absolute;
	 top: 0;
	 right: 0;
	 z-index: 1;
	 background: none;
	 color: #808080;
	 border: none;
	 font-size: 30px;
	 width: 50px;
	 height: 50px;
	 line-height: 50px;
}
 .user-volume:hover {
	 cursor: pointer;
}

[hellochar]

* {
	 box-sizing: border-box;
}
 h1, h2, h3, h4, h5, h6 {
	 margin: 0;
}
 a {
	 color: #222;
	 text-decoration: none;
	 transition: border-bottom 0.05s;
}
 a:hover {
	 border-bottom: 3px solid #101016;
}
 a:active {
	 position: relative;
	 top: 1px;
}
 figure {
	 margin: 0;
}
 h1 ~ p {
	 margin-top: 10px;
}
 p ~ p {
	 margin-top: 30px;
}
 .root {
	 overflow: hidden;
}
 .slides {
	 position: absolute;
	 top: 0;
	 left: 0;
	 bottom: 0;
	 right: 0;
	 width: 100vw;
	 height: 100vh;
	 margin: 0;
	 padding: 0;
}
 .back-button, .user-volume {
	 display: none !important;
}

[hellochar]

div.root {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

[hellochar]

.full-page-sketch {
    width: 100vw;
    height: 100vh;
    position: relative;
}