.one {
	font-size: 100px;
	line-height: 50px;
	font-weight: bold;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 1;
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Tahoma", "Verdana", sans-serif !important;
}

img {
	height: 600px;
	width: 600px;
	position: fixed;
	top: 150px;
	left: 200px;
	z-index: -1;
}

.instructions {
	font-family: lucinda console, monospace;
	color: darkslategray;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	display: flex;
	flex-direction: column;
}
.snote {

	background-color: #ABFFE1;
	height: 700px;
	width: 500px;
	position: fixed;
	right: 50px;
	top: 70px;
	box-sizing: border-box;
	animation-name: fadein, movein;
	animation-duration: 1s;
}	

@keyframes fadein {
	from {opacity: 0;}
	to   {opacity: 1;}
}

@keyframes movein {
	from {right: 200px;}
	to   {right: 50px;}
}

a {
	color: darkslategray;
}

a:hover {
	color: whitesmoke;
}

@media screen and (max-width: 1350px) {

	img {
		left: 100px;
	}
}

@media screen and (max-width: 1250px) {

	img {
		left: 50px;
	}
}

@media screen and (max-width: 1150px) {
	body {
		display: flex !important;
		flex-direction: column !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.one {
		position: static !important;
		left: 10px !important;
		width: 100% !important;
		margin: -200px 0 0 0 !important;
		padding: 0 !important;
		text-align: left !important;
		font-size: 250px !important;
		line-height: 1 !important;
	}

	img {
		position: static !important;
		top: auto !important;
		left: auto !important;
		z-index: 1 !important;
		height: auto !important;
		width: 2000px !important;
		max-width: 600px !important;
		display: block !important;
		margin: -250px 0 20px auto !important;
	}

	.instructions {
		position: static !important;
		right: auto !important;
		top: auto !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 20px !important;
	}

	.snote {
		position: static !important;
		right: auto !important;
		top: auto !important;
		width: min(95vw, 600px) !important;
		min-width: min(90vw, 600px) !important;
		height: auto !important;
		margin: 0 auto !important;
		flex-shrink: 0 !important;
		animation: none !important;
	}
}

@media screen and (max-width: 800px) {
	.snote,
	.snote * {
		font-size: 24px !important;
	}

	.snote {
		width: min(95vw, 600px) !important;
		min-width: min(90vw, 600px) !important;
		margin: 0 auto !important;
		flex-shrink: 0 !important;
	}
}

@media screen and (max-width: 550px) {
	.snote {
		width: min(95vw, 600px) !important;
		min-width: min(90vw, 600px) !important;
		margin: 0 auto !important;
		flex-shrink: 0 !important;
	}
}

@media screen and (max-width: 400px) {
	.snote {
		width: 520px !important;
		min-width: 520px !important;
		margin: 0 auto !important;
		flex-shrink: 0 !important;
	}
}