@charset "UTF-8";
/* CSS Document */

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

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

body {
	position: relative;
	min-height: 100%;
	background: #222222;
	overflow: hidden;
}

body::after {
	content: "";
    position: fixed;
	inset:0;
    width: 100%;
    height: 100%;
    background: url(../img/rough.png) repeat;
    opacity: 0.05;
}

.main {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* canvas は疑似要素の上、テキストの下 */
canvas {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	inset:0;
}

/* タイピングテキスト（前面） */
#typedText {
	position: relative;
	z-index: 2;
	padding: 2rem;
	color: #FAFAFA;
}

@font-face {
	font-family: DS-DIGII;
	src: url("../font/DS-DIGII.TTF") format('truetype');;
}

p {
	font-family: DS-DIGII;
	font-style: normal;
	font-size: 4rem;
}

.cursor {
  display: inline-block;
  animation: blink 0.7s steps(1) infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}