@import '../global.css';

h1 {
	font-size: 24px;
	padding: 1rem;
	max-width: min(40ch, 80%);
	/*background: var(--bg);*/
	text-shadow: 0 0 5px var(--bg);
	--webkit-text-stroke: 2px var(--bg);
	z-index: 3;
	position: relative;
}

.start, .tricks, .treats {
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(20vh + 20px);
	width: 30px;
	position: absolute;
	background: var(--black);
	color: white;
	z-index: 2;

	span {
		display: inline-block;
	}
}

.start {
	left: 0;
	top: calc(70vh - 10px);

	span {
	 	transform: rotate(-90deg);
	}
}

.tricks, .treats {
	right: 0;

	span {
	 	transform: rotate(90deg);
	}
}

.tricks {
	top: calc(12vh - 10px);
}

.treats {
	top: calc(70vh - 10px);
}



a.linkback {
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: purple;
  font-size: 1rem;
  z-index: 3;
}
a.linkback:hover {
  color: #303030;
}