@import url("https://fonts.googleapis.com/css?family=Roboto");

body,h1,h3,h4,h5,h6 {
	font-family: "Roboto", sans-serif;
	color:darkslateblue;
  }
  
  
  body, html {
	width:100%;
	min-width:320px;
	height: 100%;
	color: rgb(36, 36, 36);
	line-height: 1.8;
  }
  
  
  .bgimg-1, .bgimg-3 {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }
  
  
  .bgimg-1 video {
	height: auto;
	width: 100%;
	min-height:auto;
	min-width:320px;
	opacity:70%;
  }
  
  
  .bgimg-2 {
	width:100%;
	height:auto;
	background-color: lightslategrey;
  }
  
  
  .bgimg-3 {
	background-image: url("/w3images/parallax3.jpg");
	min-height: 400px;
  }
  
  #logo {
	width:33vw;
	height:auto;
  }
  
  #home {
	width:100%; 
	max-width:3000px;  
	display:block; 
	position: relative;
  } 
  
  #video2{
	width:100%; 
	height:auto 
  } 
  
  #videoMessage2 { 
   position: absolute;
	top: 15vw; 
	left: 0;
	display: flex;
	flex-direction: column; 
	justify-content: center;
	align-items: center; 
	width: 100%;
	height: auto;
  }
  
  .w3-wide {letter-spacing: 10px;}
  .w3-hover-opacity {cursor: pointer;}
  
  .about_wrapper {
	display:flex;
	flex-direction: column;
  }
  
  #about {
	padding-top:60px;
	padding-bottom:120px;
	max-width:1200px;
	display:flex;
	flex-direction: column;
	margin-left:auto;
	margin-right:auto;
  }
  
  #about_heading {
	color:slategrey;
  }
  
  #about_imgbody{
	display:flex;
	flex-direction: row;
  }
  
  #profile {
	margin-top:auto;
	margin-bottom:auto;
  }
  
  #exp_heading {
	color:white;
	text-align: center;
	background-color:lightslategray;
  }
  
  #tech_heading {
	color:darkslategrey;
	margin-bottom:3vw;
  }
  
  .techstack_container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	grid-auto-rows: minmax(100px, auto);
	min-width:320px;
  }
  
  .techstack_logo {
	width:9vw;
	height:auto;
  }
  
  .portfolio_header {
	font-family:"Roboto", sans-serif;
	text-align: center;
	color:white;
  }
  
  .portfoliobtn_wrapper {
	display:flex;
	flex-direction: row;
	justify-content: space-evenly;
  }
  
  .portfolio_btn {
	width:25vw;
	height:auto;
	padding:3vw;
	color:white;
  }
  
  @media only screen and (max-device-width: 3000px) {
	.bgimg-1, .bgimg-2, .bgimg-3 {
	  background-attachment: scroll;
	  min-height: 100px;
	}
  }