/* ------------------------------------------------*/
/* 				MOBILE STYLES BE-LOW    	       */
/*        	 THESE ARE A TOTAL SHITSHOW            */
/* ------------------------------------------------*/

@media only screen and (max-width: 1310px) {
	.s80 {
		font-size: 70px !important;
	}
	.story-shift {
		margin-left: 13% !important;
	}
	#story p {
		max-width: 90% !important;
	}
	.vertical {
		margin-left: -13% !important;
	}
}
@media only screen and (max-width: 1200px) {
	.s200 {
		font-size: 190px !important;
	}
	.s80 {
		font-size: 66px !important;
	}
	#angles {
		margin-top: -10%;
	}
	.string li {
		margin-right: 1vw !important;
	}
	#angles .string li {
		margin-left: 1vw !important;
	}
	#angles .string li {
		margin-left: 0 !important;
	}
	#qs {
		margin-top: -20vh !important;
	}
	.description {
		margin-bottom: 30px;
	}
	#story p{
		max-width: 90% !important;
	}
	.story-shift {
		margin-left: 10% !important;
	}
	.vertical {
		margin-left: -20% !important;
	}
	.test-input {
		margin-top: 12vh !important;
	}
}
@media only screen and (max-width: 1080px) {
	.s200 {
		font-size: 160px !important;
	}
	.s80 {
		font-size: 60px !important;
	}
	#intro {
		padding-top: 5% !important;
	}
	#intro .string li {
		margin-left: -2vw !important;
	}
	#angles {
		margin-top: -12%;
	}
	#glyphs p {
		margin-top: 50px !important;
	}
	.description {
		width: 100% !important;
		float: none;
		margin: 0 auto;
		margin-bottom: 60px;
	}
	.label {
		margin-bottom: 30px;
		width: 100% !important;
	}
	#qs {
		margin-top: -24% !important;
	}
	#qs .string {
		margin-left: -3vw !important;
	}
	#words ul{
		margin-left: -5% !important;
	}
	#story p.quote {
		max-width: 100% !important;
	}
	.vertical {
		margin-left: -26%;
	}
	.test-input {
		margin-top: 18vh !important;
	}
}
@media only screen and (max-width: 960px) {
	.s200 {
		font-size: 140px !important;
	}
	.s160 {
		font-size: 130px !important;
	}
	.s80 {
		font-size: 80px !important;
	}
	#eula.container {
		width: 85% !important;
	}
	#intro {
		padding-top: 3% !important;
	}
	#intro .string li {
		margin-left: -2vw !important;
	}
	#angles .string li {
		margin-left: -1vw !important;
	}
	#angles .string.light li {
		margin-left: -1.1vw !important;
	}
	#glyphs p {
		margin-top: 35px !important;
	}
	#qs {
		margin-top: -28% !important;
	}
	.vertical {
		font-size: 160px !important;
		margin-left: -32% !important;
	}
	.test-input {
		margin-top: 24vh !important;
	}
}
@media only screen and (max-width: 768px) {
	.s200 {
		font-size: 120px !important;
	}
	.s160 {
		font-size: 100px !important;
	}
	#intro .string li {
		margin-left: -1vw !important;
	}
	#qs {
		margin-top: -36% !important;
	}
	#story .container{
		width: 90% !important;
		margin-top: 12% !important;
	}
	.quote {
		font-size: 28px !important;
		padding-left: 0 !important;
	}
	#footer {
		padding: 10% 0 10% 0 !important;
	}
	.vertical {
		display: none;
	}
}
@media only screen and (max-width: 640px) {
	.s200 {
		font-size: 100px !important;
	}
	.s160 {
		font-size: 90px !important;
	}
	.s36 {
		font-size: 24px !important;
	}
	#download, #type-tester, .hint{
		display:none;
	}
	#intro {
		padding-top: 0% !important;
	}
	#intro .string li {
		margin-left: -1.2vw !important;
	}
	#glyphs p {
		margin-top: 25px !important;
		letter-spacing: .06em !important;
		width: 120% !important;
		margin-left: -10%;
	}
	#angles {
		margin-top: -20%;
	}
	.description {
		width: 120% !important;
		float: none;
		margin: 0 auto;
		margin-left: -10%;
		margin-bottom: 60px;
		text-align: center;
		height: auto;
	}
	.label {
		text-align: center;
		margin-bottom: 30px;
		width: 100% !important;
	}
	#words ul{
		margin: 0 0 0 0 !important;
	}
	.sample {
		text-align: center !important;
		min-width: 100% !important;
	}
	#qs {
		display: none;
	}
	.quote {
		text-align: center !important;
	}
	.story-title {
		text-align: center !important;
	}
	#story p{
		text-align: center !important;
		max-width: 120% !important;
	}
	.story-shift {
		margin-left: -10% !important;
		width: 120% !important;
	}
	#story .container{
		width: 70% !important;
	}
}
@media only screen and (max-width: 568px) {
	.s200 {
		font-size: 70px !important;
	}
	.s160 {
		font-size: 70px !important;
	}
	.s80 {
		font-size: 48px !important;
	}
	.s56 {
		font-size: 32px !important;
	}
	.s48 {
		font-size: 32px !important;
		text-align: center !important;
	}
	.s24 {
		font-size: 18px !important;
	}
	.container {
		padding-bottom: 60px !important;
	}
	#eula.container {
		width: 90% !important;
		line-height: 20pt !important;
	}
	#intro .string li {
		margin-left: -3vw !important;
	}
	#intro ul{
		margin-left: -7vw !important;
	}
	.caption {
		margin-top: 45% !important;
	}
	#angles {
		margin-top: -15% !important;
	}
	#angles .string li {
		margin-left: -1vw !important;
	}
	.angles-line {
		top: 60px !important;
	}
	#angles .string.light{
		margin-top: -10px;
	}
	#glyphs {
		padding-top: 12% !important;
	}
	#weights .container {
		padding-bottom: 0 !important;
	}
	#qs {
		display: none !important;
	}
	.sample-label {
		padding-left: 0 !important;
		margin-bottom: 0 !important;
	}
}