html {
	  background-image: url("proassets/MEMFormat.gif");
	background-size: 100vw 100vh;
	background-attachment: fixed;
	background-repeat: no-repeat;
}



.page {
position: relative;
top: 7%;
left: 14.5%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}

.mainname {
position: absolute;
color: white;
text-shadow: 2px 2px 2px #6404b8;
font-family: sans-serif;
font-weight: bold;
font-size: 1.2vw;
top: 15%;
left: 2%;
margin: auto;
display: inline-block;
text-align: left;
}

.maintext {
position: absolute;
color: white;
text-shadow: 2px 2px 2px #6404b8;
font-family: Helvetica, sans-serif;
font-size: 1.3vw;
top: 37%;
left: 2%;
margin: auto;
display: inline-block;
text-align: left;
}

.textui {
position: relative;
width: 746px;
height: 132px;
background-image: url("proassets/dialogue_box.png");
top: 5.5%;
left: 23.5%;
}

.textcontainer {
position: relative;
margin-left: 31px;
margin-top: 8px;
width: 670px;
height: 116px;
}


.star {
position: relative;
margin-top: 92px;
margin-left: 655px;
height: 25px;
width: 25px;
}

.crim:hover {background: url("proassets/THE_CRIMSON.gif") no-repeat;}
.nxtprv:hover {background: #404040;}


.crim {
position: fixed;
background: url("proassets/THE_CRIMSON_IDLE.png") no-repeat;
height: 16%;
width: 9%;
}


.next {
position: fixed;
height: 24%;
width: 5.2%;
background-color: #262626;
font-size: 1.5vw;
border: .25vw solid black;
color: white;
left: 92%;
top: 73%;
}

.prev {
position: fixed;
height: 24%;
width: 5.2%;
background-color: #262626;
font-size: 1.5vw;
border: .25vw solid black;
color: white;
left: 3%;
top: 73%;
}




{{ !-- 3840 x 2160 (4K) -- }}
@media screen and (max-width: 3840px) and (min-width: 3840px) { 
.page { top: 10%; left: 38%;} .textui { background-image: url("dialogue_box_3.png"); margin-top: 4%; left: 30%; width: 1554px; height: 275px;} .textcontainer { width: 1440px; height: 275px; margin-left: 48px; } .star {margin-left: 1370px; margin-top: 190px; width: 55px; height: 55px;} .maintext { font-size: 1vw; } .mainname { font-size: .9vw; } }

{{ !-- 2560 x 1440 (2K) -- }}
@media screen and (max-width: 2560px) and (min-width: 2560px) { .page { top: 10%; left: 33%;} .textui { background-image: url("dialogue_box_3.png"); margin-top: 4%; left: 21%; width: 1554px; height: 275px;} .textcontainer { width: 1440px; height: 275px; margin-left: 48px; } .star {margin-left: 1370px; margin-top: 190px; width: 55px; height: 55px;} .maintext { font-size: 1.3vw; } .mainname { font-size: 1.2vw; } }

{{ !-- 1920 x 1200 / 1920 x 1080 -- }}
@media screen and (max-width: 1920px) and (min-width: 1920px) { .page { top: 7%; left: 26%;} .mainname { font-size: 1.02vw; } .textui { left: 32.5%;} .maintext { font-size: 1.12vw; } }

{{ !-- 1600 x 900 / 1686 x 868 -- }}
@media screen and (max-width: 1700px) and (min-width: 1600px) { .page { top: 7%; left: 22%;} .textui { left: 30%; } .maintext { font-size: 1.20vw; } .mainname { font-size: 1.12vw; } }

{{ !-- 1440 x 900 -- }}
@media screen and (max-width: 1440px) and (min-width: 1440px) { .textui { left: 23.5%; } }

{{ !-- 1360 x 768 / 1366 x 768 -- }}
@media screen and (max-width: 1360px) and (min-width: 1366px) { .page { top: 7%; left: 24%;} .textui { left: 24%; } }

{{ !-- 1280 x 728 -- }}
@media screen and (max-width: 1280px) and (min-width: 1280px) { .page { top: 7%; left: 12%; } .textui { left: 21%; } }

{{ !-- 1024 x 768 -- }}
@media screen and (max-width: 1024px) and (min-width: 1024px) { .page { top: 7%; left: 1%;} .textui { left: 13%; } .maintext { font-size: 1.7vw; } .mainname { font-size: 1.6vw; } }

{{ !-- 800 x 600 / More iPads -- }}
@media screen and (max-width: 820px) and (min-width: 800px) { .page { top: 10%; left: 1%;} .textui { background-image: url("dialogue_box_2.png"); margin-top: 7%; left: 32%; width: 542px; height: 132px;} .textcontainer { width: 480px; height: 116px; } .star {margin-left: 450px;} .maintext { font-size: 2.1vw; } .mainname { font-size: 2vw; } .next { left: 92%; top: 73%; } .prev { left: 2%; top: 73%;} }

{{ !-- iPads -- }}
@media screen and (max-width: 799px) and (min-width: 501px) { .page { top: 12%; left: 2%;} .textui { margin-top: 12%; left: 20%; } .maintext { font-size: 2.4vw; } .mainname { font-size: 2.3vw; } .next { position: relative; margin-top: 15%; height: 17%; width: 9%; font-size: 4vw; left: 120%; } .prev { position: relative; margin-top: 15%; height: 17%; width: 9%; font-size: 4vw; left: -4%; }  }

{{ !-- Phones -- }}
@media screen and (max-width: 500px) and (min-width: 1px) { .page { top: 15%; left: 3%;} .textui { margin-top: 24%; left: 8%; } .maintext { font-size: 5vw; } .mainname { font-size: 4.9vw; } .next { position: relative; margin-top: 20%; left: 180%; height: 30%; width: 20%; font-size: 7vw; } .prev { position: relative; margin-top: 20%; left: 1%; height: 30%; width: 20%; font-size: 7vw;} }

@media (max-width: 1024px) {
html {
background-size: 100% 100%;
}
}