@import "./sass/vendors/bootstrap.scss";

@import "./sass/abstracts/mixins";
@import "./sass/abstracts/variables";
@import "./sass/abstracts/helpers";

@import "./sass/base/base";
@import "./sass/base/typography";

@import "./sass/components/buttons";

@import "./sass/layout/footer";
@import "./sass/layout/sections";

@import "./sass/sections/about";
@import "./sass/sections/contact";
@import "./sass/sections/hero";
@import "./sass/sections/projects";



/* Reset some default styles */
body, h1, h2, p {
  margin: 0;
  padding: 0;
}

/* Basic styling */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

.nav{
	display:flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	
	list-style: none;
	margin: 0;
}

.nav a{
	text-decoration: none;
	display: block;
	padding: 1em;
	color: white;
}

.nav a:hover{
	background: black;
}

@media all and (max-width: 800px){
	.nav{
		justify-content: space-around;
	}
}

@media all and (max-width: 600px){
	.nav{
		flex-direction: column wrap;
		padding: 0;
	}
	.nav a{
		text-align: center;
		padding: 10px;
		border-top: 1px solid rgba(255,255,255,0.3);
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	.nav li:last-of-type a{
		border-bottom:none;
	}
}

section {
  padding: 50px;
}

footer {
  text-align: center;
  background-color: #333;
  color: white;
  padding: 10px 0;
}

.disabled{
	opacity:0.5;
}

.enabled{
	opacity:1;
}
.container{
	display:flex;
	flex-flow: row wrap;
	/*height: 7em;*/
	/*column-gap: 10px;*/
	border: 2px dotted;
	justify-content: space-between;
	align-items: center;
	width:100%;
	align-content: center;
		justify-content: center;
}
.item{
	flex: 1 1 0;
	min-width: 0;
	height:auto;
	max-width: 33%;
	max-height:100%;
	padding: 10px;
	box-sizing: border-box;
	border: 1px dotted;
	align-content: center;
	justify-content: center;
	align-items:center;
}
.image-container{
	text-align: center;
	overflow:hidden;
	width:100%;
	height:100%;
}
.image{
	/*max-width:100%;
	max-height:100%;*/
	height: 75%;
	object-fit: contain;
}

img {
    transition:transform 0.25s ease;
}

img:hover {
    -webkit-transform:scale(1.5);
    transform:scale(1.5);
}

.video-container{
	position:relative;
}
.video-container iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}