@import url('https://fonts.googleapis.com/css?family=Roboto:400');
*,
*::after,
*::before {
	box-sizing: border-box;
}

body {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #fff;
	background: #000;
	overflow: hidden;
	font-size: 0.85rem;
}

img {
 display: flex;
 margin-left: auto;
 margin-right: auto;
 width: 100%;
}

a {
	text-decoration: none;
	color: inherit;
	outline: none;
}

a:hover,
a:focus {
	color: #333;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}


/* Content */
.content {
	padding: 3em 0;
}

.content.main {
	min-height: 100vh;
	padding: 0;
}

.canvas-wrapper {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}

canvas {
	position: absolute;
	left: 50%;
	top: 55%;
	-webkit-transform: translate(0%, 0%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}

.toggle-btn {
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: currentColor;
	position: fixed;
	bottom: 2vmax;
	border: 1px solid;
	width: 255px;
}


.toggle-btn {
	background: transparent;
	color: currentColor;
	right: 40vmax;
}

.toggle-btn:focus {
	outline: none;
}

.toggle-btn:hover {
	color: #fff;
}

.txt-note {
	padding: 10px;
	text-align: center;
	letter-spacing: 0.1em;
	color: currentColor;
	position: fixed;
	text-align:left;
	border: 1px solid;
}


.txt-note {
	background: transparent;
	color: currentColor;
	float: left;
  	top: 8vmax;
	left: 8vmax;

}


.att {
	text-align: right;
}


@media screen and (max-width: 55em) {


	.toggle-btn {
		right: 10px;
		bottom: 10px;
		width: calc(100% - 20px);
	}

	
	.txt-note {
		
		 position: absolute;
		 overflow: scroll;
		 width: 75%;
		 height: 100px;
}