@font-face {
	font-family: 'Topaz';
	src: url('assets/topaz.ttf');
}

/* pixelated */
@font-face {
	font-family: 'Amiga Topaz';
	src: url('assets/amiga_topaz.ttf');
}

@font-face {
	font-family: 'Pencil';
	src: url('assets/cheveuxdange.ttf');
}

body { 
	background-color: #0D0230; 
	height: 100%;
  overflow: hidden;
}

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 98vh;
}

#monitor {
	position: relative;
	background-color: #302E35;
	padding: 100px 300px 100px 100px;
	width: 850px; 
	height: 650px;
	z-index: 0;
	border-radius: 10px;
	margin: 0 auto;
	/* box-shadow: 0 0 20px 10px #440EAC, 
				0 0 103px 14px #540cc6, 
				0 0 10px 10px #0ff; */
}

#monitor_border {
  border: 25px solid #1A191B;
  margin: -25px;
}

.model-name {
  position: absolute;
  transform: translateX(50%);
  right: 145px;
  top: 17%;
  color: #73F95C;
  font-size: 20px;
  font-family: sans-serif;
  font-weight: 100;
  letter-spacing: 0.05em;
}

#floppy_drive {
  position: absolute;
  transform: translateX(50%);
  right: 125px;
  bottom: 75px;
}

#floppy_drive .slot-floppy {
  background-color: #131413;
  width: 25px;
  height: 275px;
  margin: auto;
}

#floppy_drive .slot-fingers {
  background-color: #131413;
  width: 55px;
  height: 105px;
}

#screen {
  position: relative;
	background-color: #440EAC;
	margin: 100px 275px 100px 100px;
	width: 850px; 
	height: 650px;
	z-index: 0;
	border-radius: 10px;
	margin: 0 auto;
	/* box-shadow: 0 0 20px 10px #440EAC, 
				0 0 103px 14px #540cc6, 
				0 0 10px 10px #0ff; */
}

#sticky1 {
	position: absolute;
	right: 40px;
	top: 25%;
	width: 135px;
	height: 100px; 
	background-color: yellow;
	transform: rotate(-10deg);
	padding: 15px;
	font-family: 'Pencil'; 
	box-shadow: 5px 5px 25px 5px #222; 
}

#sticky1 div { margin-bottom: 5px; }

#glow {
	position: absolute;
	top: 100px;
	left: 100px;
  width: 850px;
  height: 650px;
  border-radius: 10px;
  background-color: #440EAC;
	box-shadow: 0 0 20px 10px #440EAC, 
				0 0 103px 14px #540cc6, 
				0 0 10px 10px #0ff
}

#overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: #440eac;
  border-radius: 10px;
}

canvas {
  border-radius: 10px;
}

.cursor::after {
	content: "";
	height: 18px;
	width: 9px; 
	display: inline-block;
	margin: 0;
	background-color: #8d6ff5;
	animation-name: blink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0,1,0,1);
}

@keyframes blink {
	0% {background-color: #8d6ff5;}
	50% {background-color: transparent;}
}

.line {
	font-family: 'Amiga Topaz';
	font-size: 20px;
	margin: 0; 
	color: #8d6ff5;
	text-transform: uppercase;
  padding-left: 15px;
}

#line0 { padding-top: 15px; }



/* SMALL DESKTOP */
@media (max-width: 1440px) {
  #monitor {
    width: 800px;
    height: 600px;
    padding: 40px 275px 40px 40px;
  }
  #screen {
    width: 800px;
    height: 600px;
  }
  #glow {
    width: 800px;
    height: 600px;
    top: 40px;
    left: 40px;
  }
  #overlay {
    width: 800px;
    height: 600px;
  }
  #stage {
    width: 800px;
    height: 600px;
  }
}


/* MOBILE */
.mobile {
	display: none;
	color: #fff;
	padding-left: 15px;
}

.exception {
	color: #f00;
	font-weight: bold;
}

@media (max-width: 768px) {
	.mobile { display: block; }
	#monitor { display: none; }
}