*{
	margin:0px;
	padding:0px;
	box-sizing: border-box;
}
nav{
	width: 100%;
	height: 75px;
	background-color: #2d2e2e;
	line-height: 75px;
	padding:0px 100px;
	z-index: 1;
}
nav .logo{
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 1.5px; 
}
.name {
	float: left;
	color:skyblue;
	text-transform: uppercase;
}
nav ul{
	float: right;
}
nav ul li{
	display: inline-block;
	list-style: none;
}
nav ul li a{
	color:skyblue;
	text-decoration: none;
	font-size: 18px;
	text-transform: uppercase;
	padding:0px 32px;
}

body {
    background-image: url('./images/vector-blue-squares-background.jpg');
    background-size: cover;
}

#self {
    display: block;
    border-radius: 12%;
    height: 500px;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    border: 1px solid;
    box-shadow: 5px 10px 89px navy
}


h1,
p {
    text-align: center;
    flex-direction: row; 
    margin: 25px 0;
    padding: 10px 0;
    font-weight: bolder;
    color: rgb(66, 65, 65);
  }

  .info {
    text-align: center;
    flex-direction: row; 
    margin: 25px 0;
    padding: 10px 0;
    font-weight: bolder;
    color: rgb(66, 65, 65);
  }

  .images {
  display: flex;
  margin-left: 37%;
  margin-right: auto;

}

footer > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  margin: auto;
  font-size: 25px;
  background-color: grey;  
  color: white;
}

footer > ul > li {
  display: flex;
  margin: auto;
  padding: 10px;
}

a:link {
  color: skyblue;
}

a:hover {
  color:#00ff00;
}


@media screen and (max-width: 768px) {

  body {
    flex-wrap: wrap;
        }

  nav {
    flex-wrap: wrap;
    flex-direction: column;
  }
  
  nav a {
    float: none;
    width: 100%;
    flex-direction: column;
        }
  
  section {
    width: 100%;
          }
  
  
  .aboutme, 
  .project >h1,
  .contact >h1 {
  
    display: flex;
    text-align: left;
    padding-right: 15px;
    border-right: 0px;
  }        
  
  #me {
    font-size: 1.5rem;
      }
  
  .placeholder > a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  img {
    width: 100%;
      }
  
  footer a {
    flex-direction: row;
    flex-wrap: wrap;
  }
  }