match mobile device

index.css

@@ -7,12 +7,13 @@ html {
 }
 
 body {
-	background:black url(bg.jpg) no-repeat center;
+	background: black url(bg.jpg) no-repeat center;
 	background-size: cover;
 	width: 200%;
-	z-index:0
+	z-index: 0
 }
 
+
 input#menu-control {
 	display: none
 }
@@ -29,8 +30,8 @@ div.menu-container {
 	padding-top: 50px;
 	transition: all .5s ease;
 	overflow: hidden;
-	background-color:rgba(255, 255, 255, 0.5);
-	z-index:1
+	background-color: rgba(255, 255, 255, 0.5);
+	z-index: 1
 }
 
 div.menu-container ul {
@@ -60,7 +61,7 @@ div.menu-container ul li * {
 
 div.menu-container ul li *:hover {
 	background-color: rgba(0, 0, 0, .5);
-	color:white
+	color: white
 }
 
 div.menu-container ul>li+li:before {
@@ -77,23 +78,23 @@ label[for=menu-control].menu-button-container {
 	left: 0;
 	width: 50px;
 	height: 30px;
-	cursor: pointer!important;
-	z-index:3;
+	cursor: pointer !important;
+	z-index: 3;
 }
 
 label[for=menu-control].menu-button-container:hover span {
-	background-color:white;
+	background-color: white;
 }
 
-label[for=menu-control].content-mask{
+label[for=menu-control].content-mask {
 	display: block;
 	position: relative;
-	width:50%;
-	height:100%;
-	background-color:rgba(25, 25, 25,.9);
+	width: 50%;
+	height: 100%;
+	background-color: rgba(25, 25, 25, .9);
 	float: left;
 	z-index: 1;
-	transition:all .5s ease;
+	transition: all .5s ease;
 	opacity: 0;
 	visibility: hidden
 }
@@ -104,7 +105,7 @@ div.menu-button span {
 	background-color: #ccc;
 	display: block;
 	margin: 5px 0 0 3px;
-	cursor:pointer;
+	cursor: pointer;
 	transition: all .5s ease;
 }
 
@@ -124,11 +125,11 @@ div.content {
 	background-color: #fff;
 	border-radius: 15px;
 	opacity: .5;
-	transition: opacity .5s ease,transform .5s ease;
+	transition: opacity .5s ease, transform .5s ease;
 	cursor: pointer;
 	padding: 15px;
 	margin-bottom: 25px;
-	text-overflow:ellipsis;
+	text-overflow: ellipsis;
 	z-index: 1;
 	text-align: center
 }
@@ -137,43 +138,52 @@ div.content:hover {
 	opacity: 1;
 }
 
-div.content img{
-	margin:0 auto;
+div.content img {
+	margin: 0 auto;
 	max-width: 100%;
 	max-height: 100%
 }
 
-div.content p{
+div.content p {
 	font-size: 18px;
 	text-align: left
 }
 
-div.content span{
+div.content span {
 	font-size: 24px;
 	font-weight: bold
 }
 
-div.content span+p:first-letter{
+div.content span+p:first-letter {
 	float: left;
 	font-size: 36px;
 	font-weight: bold
 }
 
-div.content p~p{
+div.content p~p {
 	text-indent: 36px;
 }
 
-input#menu-control:checked~label.content-mask{
+input#menu-control:checked~label.content-mask {
 	opacity: 1;
 	visibility: visible
 }
 
 @media screen and (max-width:700px) {
-	input#menu-control:checked+div.menu-container {
-		width: 50%;
+	body {
+		width: 100%
 	}
 
-	div.content-border{
+	input#menu-control:checked+div.menu-container {
+		width: 100%;
+	}
+
+	input#menu-control:checked~label.content-mask {
+		opacity: 0;
+		visibility: hidden
+	}
+
+	div.content-border {
 		padding: 50px 5px 25px;
 	}
 }
@@ -185,29 +195,29 @@ input#menu-control:checked~label.content-mask{
 	}
 
 	div.content {
-		margin-left:auto;
-		margin-right:auto
+		margin-left: auto;
+		margin-right: auto
 	}
 
 	div.content:hover {
-		transform:scale(1.01)
+		transform: scale(1.01)
 	}
 }
 
-*{
+* {
 	-webkit-tap-highlight-color: transparent
 }
 
-#blog-title{
-	color:white;
+#blog-title {
+	color: white;
 	white-space: nowrap;
 	position: fixed;
-	top:0px;
-	left:0px;
+	top: 0px;
+	left: 0px;
 	text-align: center;
 	font-size: 24px;
-	background-color:rgba(25, 25, 25,.9);
-	width:100%;
-	z-index:2;
+	background-color: rgba(25, 25, 25, .9);
+	width: 100%;
+	z-index: 2;
 	cursor: default
-}
+}