some site copy

about/style.css

@@ -1,4 +1,4 @@
-body{
+body {
   background: url(assets/grid.jpg);
   background-size: 1920px auto;
   background-position: center 0px;
@@ -8,7 +8,7 @@ body{
   color: white;
   line-height: 30px;
 }
-.laser{
+.laser {
   position: absolute;
   width: 100%;
   height: 407px;
@@ -18,7 +18,7 @@ body{
   background-size: contain;
   z-index: -1;
 }
-#lightbox{
+#lightbox {
   cursor: pointer;
   position: fixed;
   top: 0;
@@ -33,32 +33,32 @@ body{
   justify-content: center;
   transition: opacity 3s;
 }
-#lightbox.opened{
+#lightbox.opened {
   display: flex;
   opacity: 1;
 }
-#lightbox img{
+#lightbox img {
   width: 100%;
   max-width: 1000px;
   border: 1px solid #005a83;
   box-shadow: 0 0 25px rgba(144, 226, 222, 0.6);
 }
-#all{
+#all {
   width: 95%;
   min-width: 360px;
   max-width: 1000px;
   margin: 0 auto;
 }
-.headerglow{
+.headerglow {
   background-image: url('assets/supermediumheader.png');
   background-repeat: no-repeat;
   background-size: contain;
 }
-.imgfill{
+.imgfill {
   width: 100%;
   max-width: 1000px;
 }
-#video{
+#video {
   border: 1px solid #90e2de;
   width: 100%;
   max-width: 1000px;
@@ -67,42 +67,42 @@ body{
   box-shadow: 0 0 40px rgba(144, 226, 222, 0.8);
 }
 
-#video img{
+#video img {
  width: 100%;
  height: 100%;
 }
-b{
+b {
   color: #fff;
 }
-a{
+a {
   color: #4573D3;
 }
-a:hover{
+a:hover {
   color: #7EA8FF;
 }
-h1, h2, h3{
+h1, h2, h3 {
   font-family: 'Teko', sans-serif;
   color: #fff;
   margin: 0px 0 40px 0;
 }
-section{
+section {
   margin: 120px 0;
 }
-.short{
+.short {
   margin-bottom: 9px;
 }
-.short+section{
+.short+section {
   margin-top: 70px;
 }
-a{
+a {
   text-decoration: none;
 }
-h1{
+h1 {
   font-size: 57px;
   font-weight: normal;
   text-align: center;
 }
-h2{
+h2 {
   text-align: center;
   font-size: 57px;
   background: url('assets/h2.png');
@@ -115,40 +115,40 @@ h2{
   margin: 0;
   padding-top: 51px;
 }
-h2.other{
+h2.other {
   font-size: 50px;
 }
 
-.supermedium-h1{
+.supermedium-h1 {
   width: 400px;
   min-width: 55%;
   vertical-align: middle;
   margin: 20px 0;
 }
-.cyan{
+.cyan {
   color: #68e0d3;
 }
-.pink{
+.pink {
   color: #ff7abc;
 }
-.cyanglow{
+.cyanglow {
   text-shadow: 0 0 12px #68e0d3;
 }
-.pinkglow{
+.pinkglow {
   text-shadow: 0 0 12px #ff7abc;
 }
-.storebuttons{
+.storebuttons {
   text-align: justify;
   display: flex;
   justify-content: space-between;
 }
-footer .storebuttons{
+footer .storebuttons {
   width: 50%;
   margin: 0 auto;
   height: 70px;
   overflow: hidden;
 }
-.storebuttons a{
+.storebuttons a {
   display: inline-block;
   width: 470px;
   height: 137px;
@@ -157,134 +157,137 @@ footer .storebuttons{
   background-repeat: no-repeat;
   transition: transform 100ms, background-image 200ms;
 }
-.storebuttons a:hover{
+.storebuttons a:hover {
   background-image: url('assets/steamhover.png');
   transform: scale(1.02, 1.02);
 }
-.storebuttons a:first-child{
+.storebuttons a:first-child {
   background-image: url('assets/oculus.png');
 }
-.storebuttons a:first-child:hover{
+.storebuttons a:first-child:hover {
   background-image: url('assets/oculushover.png');
 }
-#intro img{
+#intro img {
   width: 160px;
   vertical-align: bottom;
 }
-ul{
+ul {
   margin: 0;
   padding-left: 40px;
   list-style: url('assets/bullet.png');
   list-style-position: outside;
 }
-li p{
+li p {
   vertical-align: middle;
   display: inline-block;
   height: 50px;
 }
-#features {
+#features  {
   display: flex;
   justify-content: space-between;
 }
-#features>div{
+#features>div {
   width: 28%;
   float: left;
   text-align: center;
 }
-#features p{
+#features p {
   margin: 0;
 }
-footer{
+footer {
   margin: 100px 0;
   font-size: 14px;
   color: #aaa;
   text-align: center;
 }
-.screenshots {
+.screenshots  {
   margin-top: 40px;
   display: flex;
   justify-content: space-between;
 }
-.screenshots a{
+.screenshots a {
   width: 30%;
 }
-.screenshots img{
+.screenshots img {
   cursor: pointer;
   border: 1px solid #005a83;
   box-shadow: 0 0 18px rgba(144, 226, 222, 0.3);
   width: 100%;
   transition: box-shadow 120ms, border-color 120ms, transform 120ms;
 }
-.screenshots>img{
+.screenshots>img {
+  max-height: 300px;
   width: 30%;
 }
-.screenshots img:hover{
+.screenshots img:hover {
   box-shadow: 0 0 30px rgba(144, 226, 222, 0.8);
   border-color: white;
   transform: scale(1.02, 1.02);
 }
 
-h1 span{
+h1 span {
   display: block;
 }
 
-@media (max-width: 1070px) {
-  body, body:before{
+@media (max-width: 1070px)  {
+  body, body:before {
     background-size: 200% auto;
   }
-  .laser{
+  .laser {
     top: 45vw;
   }
-  section{
+  section {
     margin: 10% 0;
   }
-  #video{
+  #video {
     margin: 5% auto;
   }
-  .storebuttons a {
+  .storebuttons a  {
     width: 100%;
   }
 
 }
-@media (max-width: 750px) {
-  h2.other{
+
+@media (max-width: 750px)  {
+  h2.other {
     line-height: 1em;
     padding-top: 90px;
     padding-bottom: 10px;
   }
 
-  footer .storebuttons{
+  footer .storebuttons {
     width: 75%;
   }
 }
-@media (max-width: 700px) {
-  .screenshots, #features{
+
+@media (max-width: 700px)  {
+  .screenshots, #features {
     display: block;
   }
-  .laser{
+  .laser {
     display: none;
-  }  
-  #features>div{
+  }
+  #features>div {
     float: none;
     width: 100%;
     margin: 10% 0;
   }
-  h3{
+  h3 {
     margin-bottom: 3%;
   }
-  .screenshots>img, .screenshots>a{
+  .screenshots>img, .screenshots>a {
     display: block;
     width: 100%;
     margin: 5% 0;
   }
-
 }
-@media (max-width: 400px) {
-  body, body:before{
+
+@media (max-width: 400px)  {
+  body, body:before {
     background-size: 800px auto;
     background-position: -220px 0px;
   }
-  .laser{
+  .laser {
     top: 80px;
-  }  
-}
+  }
+}