body {font-family: Roboto, sans-serif; margin: auto; max-width:840px;line-height:1.6;font-size:18px;background-color:#101111;color:#faebd7;padding:0px}h1,h2,h3{line-height:1.2}

ul {padding-left:1em}
li {padding-left:1em}

/* unvisited link */
a:link {
  color:#faebd7;

}

/* visited link */
a:visited {
  color:#faebd7;
text-decoration: none
}

/* mouse over link */
a:hover {
  color:#faebd7;
text-decoration: none
}

/* selected link */
a:active {
  color:#faebd7;
text-decoration: none
}



/* Desktop device - Viewport width 1024px and upwards */
@media (min-width: 1024px) {
 /* Your desktop styles here */
 div.mainbodystyle {margin-left: 5vw; margin-right: 5vw; margin-top: 5vh; font-size: 100%; line-height: 1.6; background: #101111;}
 div.logostyle {margin-left: auto; margin-right: auto; margin-top: 7vh; max-width: 31%; height: auto;}
 img.screenshotfloatright{float: right; margin: 5px 10px 10px 10px; max-width: 40%; height: auto;}
 img.playbadge{max-width: 29%; height: auto;}
  img.rowimage{width:30%; margin-left: 5px; margin-right: 5px;}
}


/* Desktop device - Viewport width 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
 /* Your tablet styles here */
 div.mainbodystyle {margin-left: 5vw; margin-right: 5vw; margin-top: 5vh; font-size: 95%; line-height: 1.6; background: #101111;}
 div.logostyle {margin-left: auto; margin-right: auto; margin-top: 7vh; max-width: 31%; height: auto;}
 img.screenshotfloatright{float: right; margin: 5px 10px 10px 10px; max-width: 30%; height: auto;}
 img.playbadge{max-width: 24%; height: auto;}
 img.rowimage{width:30%; margin-left: 5px; margin-right: 5px;}
}


/* Mobile Device - Viewport width 768px - 1023px (includes some landscape orientations) */
@media (min-width: 768px) and (max-width: 1023px) and (max-device-width: 900px) {
 /* Your tablet styles here */
 div.mainbodystyle {margin-left: 20vw; margin-right: 20vw; margin-top: 5vh; font-size: 90%; line-height: 1.6; background: #101111;}
 div.logostyle {margin-left: auto; margin-right: auto; margin-top: 15vh; margin-bottom: 10vh;  max-width: 24%; height: auto;}
 img.screenshotfloatright{float: right; margin: 5px 10px 10px 10px; max-width: 40%; height: auto;}
 img.playbadge{max-width: 30%; height: auto;}
 img.rowimage{width:30%; margin-left: 5px; margin-right: 5px;}
}


     
/* Desktop Device - Viewport width less than or equal to 767px */
@media (max-width: 767px) {
 /* Your mobile styles here */
  div.mainbodystyle {margin-left: 5vw; margin-right: 5vw; margin-top: 5vh; font-size: 87%; line-height: 1.6; background: #101111;}
    div.logostyle {margin-left: auto; margin-right: auto; margin-top: 7vh; max-width: 31%; height: auto;}
     img.screenshotfloatright{float: right; margin: 5px 10px 10px 10px; max-width: 30%; height: auto;}
      img.playbadge{max-width: 24%; height: auto;}
       img.rowimage{width:30%; margin-left: 5px; margin-right: 5px;}
}

  
/* Mobile Device - Viewport width less than or equal to 767px (mobile portrait orientation) */
@media (max-width: 767px) and (max-device-width: 900px) {
 /* Your mobile styles here */
  div.mainbodystyle {margin-left: 5vw; margin-right: 5vw; margin-top: 5vh; font-size: 87%; line-height: 1.6; background: #101111;}
    div.logostyle {margin-left: auto; margin-right: auto; margin-top: 7vh; max-width: 40%; height: auto;}
     img.screenshotfloatright{float: right; margin: 5px 10px 10px 10px; max-width: 40%; height: auto;}
      img.playbadge{max-width: 35%; height: auto;}
       img.rowimage{width:30%; margin-left: 1%; margin-right: 1%;}
}