binbin/css/mobile.css

html {
	height: 100%;
	width: 100%;
	-webkit-touch-callout: none;
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none;
    user-select: none;	
}

body {
	display: grid;
	height: 100%;
	overflow: hidden;
	padding: 0;
	margin: 0;
	color: white;
	font-family: 'Saira Condensed', sans-serif;
	grid-template-columns: 100%;
	grid-template-rows: 8% 6% auto;
}

h1, h2, h3, h4, h5, p {
	margin: 0;
}

a {
	text-decoration: none;
}

.transition {
	-webkit-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
	transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
	-moz-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
	-ms-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

#header {
	display: grid;
	grid-row: 1;
	grid-template-columns: 7vh auto 7vh;
	background-color: #2a2e31;
}

#header div {
	margin: auto;
	font-size: 3vh;
	border-radius: 50px;
}

#header div .fa {
	padding: 1.5vh;
}

#header h1 {
	margin: auto 0 auto 4%;
}

#mainContainer {
	grid-row: 3;
	background-color: #3e505a;
	overflow-y: auto;
}

#sidebar {
	position: absolute;
	left: -80%;
	height: 100%;
	width: 60%;
	background-color: #2a2e31;
	box-shadow: 1px 0px 12px 1px black;
}

#sidebar span {
	font-size: 110%;
	padding: 5%;
	position: absolute;
	bottom: 0;
}

#sidebar span p {
	cursor: pointer;
	color: #63d4ff;
	display: inline;
}

.navi {
	display: grid;
	height: 6vh;
	width: 100%;
	cursor: pointer;
	grid-template-columns: 1fr 3fr 7fr;
}

.naviHead {
	background-color: rgba(0,0,0,0.4);
	padding: 3%;
	font-weight: 300;
}

.naviHead:first-child {
	margin-top: 6vh;
}

.naviInner {
	background-color: rgba(0,0,0,0.15);
}

.naviInner div {
	display: grid;
	height: 4vh;
	width: 100%;
	cursor: pointer;
	grid-template-columns: 3fr 7fr;
}

.navi:hover, .naviInner div:hover {
	background-color: rgba(255, 255, 255, 0.1) !important
}

.navi i  {
	margin: auto 0 auto 0;
	font-size: 2.1vh;
	text-align: center;
	grid-column: 2;
}

.navi p {
	margin: auto 0 auto 0;
	font-size: 2vh;
	font-weight: 300;
	grid-column: 3;
}

.naviInner p {
	margin: auto 0 auto 0;
	font-size: 2vh;
	grid-column: 2;
}

#directoryHeader {
	grid-row: 2;
	background: #637d8b;
	display: grid;
	grid-template-columns: 50% auto 10% 7%;
}

#directoryHeader p:nth-child(2) {
	grid-column: 3;
	opacity: 0;
	margin: auto;
}

#location {
	margin: auto 0 auto 5%;
	grid-column: 1;
}

#directoryHeader i {
 	grid-column: 4;
 	opacity: 0;
 	margin: auto;
}

.item {
	display: grid;
	padding: 2%;
	grid-template-columns: 14% auto 10%;
	grid-template-rows: 60% 40%;
	border-bottom: 1px solid white;
}

.item .name {
	grid-row: 1;
	grid-column: 2;
	font-size: 120%;
	font-weight: 300;
}

.item .otherInfo {
	grid-row: 2;
	grid-column: 2;
	font-size: 80%;
	color: rgba(255,255,255,0.5);
}

.item div {
	grid-row: 1 / 3;
	grid-column: 3;
	margin: auto;
	border-radius: 50px;
}

.fileIcon {
	grid-column: 1 !important;
	background-color: rgba(0,0,0,0.4);
	margin: auto auto auto 0 !important;
}

.item div .fa {
	padding: 1.5vh;
}

#copy {
	opacity: 0;
	position: absolute;
	top: -50%;
}

#dotMenu {
	display: none;
	opacity: 0;
	position: absolute;
	top: 2vh;
	right: 2vh;
	font-size: 2.5vh;
	width: 40%;
}

#dotMenu p, #dotMenu a {
	display: block;
	padding: 10% 40% 10% 13%;
}

#dotMenu a {
	color: rgba(0,0,0,0.5);
}

.card {
	border-radius: 2px;
	background-color: #FEFEFE;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	color: black;
	transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

#menuOverlay {
	background-color: rgba(0,0,0,0.2);
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}

#optionContainer {
	width: 100%;
	position: absolute;
	bottom: -60%;
	background-color: white;
}

#optionContainer p {
	color: black;
	font-size: 2.5vh;
	padding: 3%;
}

#optionContainer p:first-child {
	color: rgba(0,0,0,0.7);
}

.overlay .fa-times {
	font-size: 4vh;
	position: absolute;
	right: 4vh;
	top: 4vh;
	color: white;
	cursor: pointer;
}