@font-face {
  font-family: "code";
  src: url("./fonts/Zector.ttf");
}

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  transition:all .3s ease;
}

::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--main-bgc); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-non-hover); 
  border-radius:2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-on-hover); 
}

::selection{
  background:#fff;
  color:#000;
}

:root{
  --scrollbar-non-hover:rgba(255,255,255,.2);
  --scrollbar-on-hover:rgba(255,255,255,1);
  
  --nav-bgc:rgba(10,10,10,1);
  --main-border:rgba(255,255,255,1);
  
  --main-bgc:rgba(10,10,10,1);
  
  --overview-card-bgc:rgba(150,150,150,.2);
  --overview-card-border:rgba(255,255,255,1) 2px solid;
}
/*
.navbar{
  position:fixed;
  width:100%;
  height:8vh;
  background: var(--nav-bgc);
  border-bottom: var(--main-border) 2px solid; 
  display:flex;
  justify-content: center;
}
.navbar ul{
	color:white;
	display:flex;
	flex-direction: row;
	gap: 2em;
	list-style: none;
	padding:.5em;
	font-family: code, Arial, sans-serif;
	font-size:1.3em;
}
.navbar ul li.active a::after{
	content: '';
	position:absolute;
	height:2px;
	left: 0;
	bottom: 0;
	width: 100%;
	background: white;
}
.navbar ul a{
	color:white;
	text-decoration: none;
	position:relative;
}
.navbar ul li{
	color:white;
	text-decoration: none;
	transition:all .3s ease;
}

.navbar ul li a:hover::after{
	width:100%;
}
.navbar ul li a::after{
	content: '';
	position:absolute;
	height:2px;
	left: 0;
	bottom: 0;
	width: 0%;
	background: white;
	transition: all .3s ease;
	top:1em;
}

.navbar .navbar-content ul li a:hover::after{
	width:100%;
}
.navbar .navbar-content ul li a::after{
	content: '';
	position:absolute;
	height:3px;
	left: 0;
	bottom: 0;
	width: 0%;
	background: white;
	transition: all .3s ease;
	top:1.1em;
}
*/
header{
  position:fixed;
  background:var(--nav-bgc);
  height:auto;
  width:100%;
  display:flex;
  justify-content: center;
  border-bottom:var(--main-border) 2px solid;
  text-align: center;
  z-index: 1000;
}
header h1{
  color:white;
  font-family: code,Arial,sans-serif;
  font-size:1.7em;
  padding:.1em;
}
header a{
  text-decoration: none;
}
header a:hover{
  text-shadow: 0px 2px 15px white;
}

.hero{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}
#home{
  background-image:url(https://i.ibb.co/0j3NBgzp/home-desktop.png);
  height:50vh;
  width:100%;
}

main{
  position:relative;
  background: #969696;
  background: -webkit-linear-gradient(357deg, rgba(150, 150, 150, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(150, 150, 150, 1) 100%);
  background: -o-linear-gradient(357deg, rgba(150, 150, 150, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(150, 150, 150, 1) 100%);
  background: linear-gradient(87deg, rgba(150, 150, 150, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(150, 150, 150, 1) 100%);
  border-top:var(--main-border) 2px solid;
}
.container{
  position:relative;
  max-width:50%;
  margin: 0em auto;
  padding: 2em 0;
}
.overview {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  margin: 2em auto;
}
.overview div {
  background: var(--overview-card-bgc);
  border: var(--overview-card-border);
  border-radius: 1em;
  flex: 0 0 calc(100%); /* 2 items per row */
  height: auto;
  text-align:center;
  color:white;
  font-family: code,Arial,sans-serif;
}
.overview div i{
  margin:.5em;
  font-size:2.5em;
  text-shadow: 0px 2px 15px white;
}
.overview div h2{
  font-size:2em;
}
.overview div #employee-count{
  font-size:2.4em;
  color:gray;
  text-align: center;
  font-family: code,Arial,sans-serif;
}
.overview div p{
  font-size:1.5em;
  padding:.2em 1em;
  text-align: justify;
  font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}


@media(min-width:1024px){
.navbar ul{
	font-size:1.9em;
	padding:.3em;
}
}
@media (max-width:760px){
  #home{
    background-image:url(https://i.ibb.co/hxHQtKcS/home-small.png);
  }
  .container{
    max-width:80%;
  }
  .overview div{
    flex:0 0 calc(100%);
    margin: 0 auto;
  }
  .overview div p{
    font-size:1.2em;
  }
}