body {

  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#45A29E;
  background-color:#1F2833;
}

/*
  * Formatting the header area
  */

header {
  position: fixed;
  z-index: 999;
  background-color: #0B0C10;
  height: 45px;
  width: 100%;
  transition: all 0.5s ease;
}

header:hover h1.logo{
  color: #66FCF1;
}

.name{
  text-decoration: none;
}
header h1.logo {
  transition: all .5s ease;
  margin: 8px;
  font-size: 1.7em;
  color: #45A29E;
  text-transform: uppercase;
  float: left;
}
.menu{
  padding-top:8px;
  padding-right:50px;
}

.menu {
  float: right;
  margin-top: 8px;
}

.menu li {
  display: inline;
}

.menu li + li {
  margin-left: 35px;
}

.menu li a {
  color: #45A29E;
  text-decoration: none;
  transition: all 0.5s ease;
}
.menu li a:hover{
  color: #66FCF1;
}
/*
  * Center the body content
  */
.container {
  padding-top:25px;
  padding-left: 60px;
  padding-right: 60px;
  max-width:1300px;
  margin:auto;
}

div.contents{
  display:flex;
  flex-direction: column;
  padding-top:80px;
  transition: all 0.25s ease-in-out;
  flex-shrink: inherit;
}
div.contents:hover h1.content-title{
  color: #66FCF1;
}
div.contents:hover p.content-text{
  color: #C5C6C7
}
h1.content-title{
  transition: all 0.25s ease-in-out;
  color: #45A29E;
  padding-left: 60px;

}

p.content-text{
  transition: all 0.25s ease-in-out;
  padding-left: 60px;
  padding-right:30px;
  color:#c5c6c7be;
}
div.block {
  
  transition: all 1s ease;
  margin-top: 10px;
  padding: 10px 0 30px 0;
  background-color: #0B0C10;
  border-radius: 6px;

}
div.block:hover{
  transform: scale(1.05,1.05);
  box-shadow:
  0 1.7px 2.1px rgba(0, 0, 0, 0.074),
  0 4.6px 5px rgba(0, 0, 0, 0.101),
  0 9.4px 9.4px rgba(0, 0, 0, 0.122),
  0 16.9px 16.8px rgba(0, 0, 0, 0.147),
  0 29.7px 31.3px rgba(0, 0, 0, 0.187),
  0 61px 75px rgba(0, 0, 0, 0.28)
;

}

h2 {
  font-size: 3em;
  margin-top: 40px;
  text-align: center;
  letter-spacing: -2px;
}

h3 {
  font-size: 1.7em;
  font-weight: 100;
  margin-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  color: #999;
}


.photo{
  transition: all 1s ease;
  float:left;
  border-radius: 50%;
  width:150px;
  padding:10px;
  padding-right:20px;
}

/*skills*/

h1.skills-title{
  text-align: center;
}



img.skills{
  padding-top:15px;
  padding-left:10px;
  padding-right:10px;
  width:85px;
  float:left;
  transition: all .25s ease-in-out;
  margin:5px;
}
img.skills:hover{
  transform:scale(1.5,1.5);
}
.skills-container{
  padding-left:15px;
}


.tooltip{
  font-size: 10px;
  display:flex;
  opacity:0;
  margin-top:-5px;
  float: left;
}
img.skills:hover + .tooltip{
  opacity: 1;
}

/* Manually aligned all tooltip tiltes*/
.aws{ 
  margin-left: -110px;
}
.bash{
  margin-left: -70px;
}
.python{
  margin-left: -75px;
}
.C{
  margin-left: -63px;
}
.HTML5{
  margin-left: -75px;
}
.CSS{
  margin-left: -70px;
}
.linux{
  margin-left: -77px;
}
.windows{
  margin-left: -75px;
}
.unity{
  margin-left: -70px;
}
.networking{
  margin-left: -82px;
}
.security{
  margin-left: -76px;
}


/*Contact form styling*/

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

.contact{
  max-width:420px; 
  min-width:120px;
  margin: auto;
  padding:100px;
}

.feedback-input {
  color:white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid  #45A29E;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #66FCF1; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background: #45A29E;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:#1F2833;;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#66FCF1; }

/*projects*/

img.projects{
  padding:25px;
  padding-top:35px;
  float:left;
  max-width: 50%;
  border-radius: 50%;
  filter:grayscale(1);
  transition: all .25s ease-in-out;
}
h1.projects{
  padding-left:700px;
}

div.projects:hover img.projects{
  filter:grayscale(0);
  border-radius:40px;
}
div.projects:hover ul{
  color:#66FCF1;
}
a{
  color:#45A29E;
}