@charset "UTF-8";
/* CSS Document */

html {
	font-family: poppins, sans-serif;
	font-weight: 600;
	font-style: normal;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,
body {
	background-color: #1A1A1A;
	padding: 0;
}

body::-webkit-scrollbar {
  	display: none;
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.top-nav {
  	overflow: hidden;
	background: rgba(51, 51, 51, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
  	position: fixed;
	top: 0;
	left: 0;
  	width: 100%;
	height: 3em;
	z-index: 3;
}

.home img {
	position: absolute;
	height: 2em;
	top: .55em;
	left: 2em;
}

.top-nav {
  	display: block;
  	text-align: right;
  	text-decoration: none;
}

.social img {
	position: absolute;
	height: 1.25em;
	top: .15em;
	left: 0;
}

a:not(:first-child) {
	position: relative;
	top: .75em;
	right: 3.5em;
	margin-left: 3em;
}

.top-nav a {
	color: #F1F1F1;
	text-decoration: none;
	right: 3em;
}

.top-nav a:hover {
  	opacity: 50%;
}

.projects {
	position: relative;
	text-align: center;
	z-index: 1;
	overflow: hidden;
}

.gallery {
	margin: 60px 0 0 0;
	align-content: center;
    display: inline-grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    grid-gap: 10px;
	overflow: hidden;
	width: 100vw;
}

.gallery img {
    width: 100%;
	height: 350px;
    vertical-align: middle;	
	object-fit: cover;
	overflow: hidden;
	display: block;
	overflow: hidden;
	transition: 1s;
	aspect-ratio: 2 / 1;
}

.gallery img:hover {
	transform: scale(1.1);
	transition: .25s;
}

@media screen and (max-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  }
}

@media only screen and (max-width: 700px) {
  .gallery img {
	  height: 300px;
	  aspect-ratio: 2 / 1;
	  
  }
}

@media only screen and (max-width: 450px) {
  .gallery img {
	  height: 150px;
	  aspect-ratio: 2 / 1;
	  
  }
}

.project-info {
	position: absolute;
	color: #F1F1F1;
	background-color: transparent;
	border: solid 1.5px #F1F1F1;
	border-radius: 0px;
	padding: .25em .5em 0.05em;
	top: 1em;
	left: 1em;
	font-weight: 100;
	text-align: center;
	line-height: 1em;
}

.project-info-dark {
	position: absolute;
	color: #1A1A1A;
	background-color: transparent;
	border: solid 1.5px #1A1A1A;
	border-radius: 0px;
	padding: .25em .5em 0.05em;
	top: 1em;
	left: 1em;
	font-weight: 100;
	text-align: center;
	line-height: 1em;
}

.project img:nth-child(1) {
	width: 100%;
	height: 100%;
	margin-top: 75px;
	object-fit: cover;
}

.project img:nth-child(2) {
	width: 100%;
	height: 100%;
	margin-top: 175px;
	object-fit: cover;
}

.project img:nth-child(3,4,5,6) {
	width: 100%;
	height: 100%;
	margin-top: 175px;
	object-fit: cover;
}

.about {
	position: absolute;
	text-align: center;
	color: #F2F2F2;
	font-weight: 300;
	width: 100%;
	top: 25%;
	justify-content: space-around;
}

.footer {
	position: relative;
	text-align: center;
	padding: 30px 0 30px 0;
	height: 0;
	width: 100%;
	bottom: 0;
	font-weight: 200;
	font-size: 10pt;
	z-index: 2;
}
		
.footer p {
	bottom: 0;
	color: #F1F1F1;
	line-height: 1px;
}
	
.footer a {
	opacity: 50%;
	color: #F1F1F1;
	text-decoration: none;
	transition: 1s;
}
	
.footer a:hover {
	opacity: 100%;
	transition: 1s;
}

.thank-you {
	position: fixed;
	bottom: 35px;
	right: 20px;
	height: 75px;
	animation-name: spin;
    animation-duration: 25000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
	z-index: 10;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(-360deg);
    }
}
	
@media only screen and (max-width: 450px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

.edge {
	position: absolute;
	display: block;
	width: 100vw;
	object-fit: cover;
	margin-left: auto;
 	margin-right: auto;
	pointer-events: none
}

.hide {
	display: none;
}