photosite/less/style.less

* {
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

:hover {
	color: #080810;
}

a {
	text-decoration: none;

}
html {
	height: 100%;
	background: #f3f1f1
}

body {
	min-height: 100%;
}

body,html {
	padding: 0;
	margin: 0;
	height: auto!important;
	height: 100%;
	min-height: 100%;
	position: relative;
}

#title{
	width: 320px;
	margin: 0 auto;
	position: relative;
}

h1 {
	font-size: 43px;
	line-height: 70px;
	font-weight: 200;
	text-align: center;
	cursor: default;
	color: #fff;
	text-shadow: 1px 1px 3px #969696;
	margin-bottom: 15px;

	&:hover{
		color: #fff;
	}
	
	a {
		display: block;
		text-align: center;
		cursor: pointer;
		text-rendering: geometricPrecision;
		color: #fff;
		&:hover{
			color: transparent;
		}
	}
	&:focus:before,
	&:hover:before {
		content: "hi@";
		position: absolute;
		left: -38px;
		
	}
	&:focus:after,
	&:hover:after {
		content: ".com";
		position: absolute;

	}
}

header {
	ul {
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 320px;
		margin: 15px auto;
		li {
			padding: 0 10px;
			a {
				color: #fff;
				font-weight: bold;
				font-size: 24px;
				text-shadow: 1px 1px 3px #969696;
				&:hover {
					color: #fff;
				}
				img { 
					max-height: 35px;
					height: 35px;
					width: auto;
					-webkit-filter: drop-shadow( 1px 1px 3px #969696);
					filter: drop-shadow(  1px 1px 3px #969696);
				}
			}
		}
	}
}

footer {
	color: #fff;
	text-shadow: 1px 1px 3px #969696;
	font-weight: bold;
	margin-top: 50px;
	margin-bottom: 30px;
	&:hover {
		color: #fff;
	}
}

.copyleft {
	display: inline-block;
	transform: rotate(180deg);
}

@media (max-width: 420px) {
	#main {
		.container {
			&:focus,
			&:hover {
				font-size: 30px !important
			}
			&:focus:before,
			&:hover:before {
				left: 20px !important
			}
		}
	}
}

#photos{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	a {
		display: block;
		width: 420px;
	}
}