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

body {font-family: sans-serif;}
div.wrapper {width:1140px; margin: 0 auto;}
h1, h2, h3 {font-family: serif;}

/*Header related things*/
div.header {
	width: 100%;
	background-color: #161f3a;
	position: relative;
	z-index: 10;
	padding-top: 30px;
	padding-bottom: 30px;

/*Header Border*/
	border: 10px solid aqua;
	border-radius: 12px;
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}


div.header div.wrapper {display:flex;}
div.header div.wrapper ul {margin-top: 60px; margin-left:240px;}
div.header div.wrapper ul li{display:inline-block; margin-right: 40px; border-right: 2px solid cyan; padding-right:40px; }
div.header div.wrapper ul li.last{border:none;}
div.header div.wrapper ul li a {color: #ceccee; text-decoration:none;}
div.header div.wrapper ul li a:hover {color: cyan;}


/*header*/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: #010F11;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  display: flex;
    flex-direction: column;
}

.about-textbox {
	position: absolute;
	top: 260px;
	left: 50%;
	transform: translateX(-50%);
	width: 70%;
	padding: 25px 35px;
	border: 10px solid aqua;
	border-radius: 0;
	background-color: rgba(22, 31, 58, 0.95);
	color: cyan;
	font-size: 28px;
	line-height: 3.4; /*This is the leading between text*/
	border-radius: 12px;
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
	z-index: 50;
}

.contact-photo {
	float: left;
	border-radius: 10px;
	margin-left: 20px;
	margin-bottom: 10px;
}

.hexagon-container{
  flex: none;
	margin-top: 0;
}

.hexagon-row{
  display: inline-flex;
  margin-top: -32px;
  margin-left: -50px;
}

.hexagon-row:nth-child(even){
  margin-left: 2px;

}

.hexagon{
  width: 100px;
  height: 110px;
  margin: 2px;
  background-color: #161f3a;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
animation: animation 4s linear infinite;
  position:relative;
}

.hexagon:hover{
  background-color: #15b8cf;
}



.hexagon:after{
  content:'';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background-color: #161f3a;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon:before{
  content:'';
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: rgba(21,184,207,-33);
  z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .hexagon{
    transition: 1s;
  }

  .hexagon:hover{
    transition: 0s;
  }
}