body {
background-color:#1E1E1E;
color:#FFF;
font-family:'Montserrat',sans-serif;
margin:0;
padding:0
}
header {
background-color:#222;
box-shadow:0 0 10px rgba(0,0,0,0.1);
padding:20px;
text-align:center
}

h1 {
color:#FFF;
font-size:36px;
margin:0
}

h2 {
color:#FFF;
font-size:24px;
margin:30px 0 20px
}

p {
color:#CCC;
font-size:18px;
line-height:1.5;
margin:0 0 20px
}

.container {
background-color:#333;
border-radius:5px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
margin:0 auto;
margin-top: 100px;
max-width:960px;
padding:40px
}

.container p {
  text-align: justify;
}

.skill {
background-color:#555;
border-radius:20px;
color:#FFF;
display:inline-block;
font-size:14px;
margin:5px;
padding:5px 10px
}

.button {
background-color:#FFF;
border-radius:5px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
color:#333;
cursor:pointer;
display:inline-block;
font-size:18px;
margin:20px 10px 0 0;
padding:10px 20px;
text-decoration:none;
transition:background-color .3s ease
}

.contact-form {
align-items:center;
display:flex;
flex-direction:column;
justify-content:center;
margin-top:30px
}

input[type=text],textarea {
background-color:#555;
border:none;
border-radius:5px;
color:#FFF;
font-size:16px;
margin:5px 0;
padding:10px;
width:100%
}
input[name=realname] {
  display: none;
}

input[type=submit] {
background-color:#FFF;
border:none;
border-radius:5px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
color:#333;
cursor:pointer;
font-size:18px;
margin-top:10px;
padding:10px 20px;
transition:background-color .3s ease
}

.image-container {
background-color:#555;
background-image:url(images/Patience.png);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
border-radius:50%;
box-shadow:0 0 10px rgba(0,0,0,0.1);
display:block;
height:300px;
margin:0 auto;
margin-bottom:20px;
margin-top:20px;
width:300px
}

.secondary {
color:#38b6ff
}

#services img {
    width: 100%;
}

#projects, #experience {
margin:0 auto;
max-width:100%
}

#projects .column, #experience .column {
  padding:0 20px
  }
.row {
display:flex;
flex-wrap:wrap
}

.column {
box-sizing:border-box;
flex-basis:50%;
padding-right:20px
}


.button:hover,input[type=submit]:hover {
background-color:#EEE
}

@media screen and (max-width: 768px) {
.column {
flex-basis:100%
}

#projects .column, #experience .column {
padding:0
}
}

.column img {
max-width:100%;
padding-bottom:20px
}

ul {
list-style:none;
margin:0;
padding:0;
padding-bottom: 10px;
}

li {
line-height:1.5;
margin-bottom:10px
}

li i {
color:#38b6ff;
font-size:20px;
margin-right:10px
}

a {
    color:#38b6ff;
}

nav {
align-items:center;
background-color:#1e1e1e;
display:flex;
justify-content:space-between;
padding:1rem
}

.logo {
font-size:1.5rem
}

.nav-links li {
list-style:none;
opacity:0;
opacity:1;
transition:opacity .5s ease-in-out
}

.nav-links a {
color:#ccc;
text-decoration:none;
text-transform:uppercase
}

.nav-links a.active,.nav-links a:hover {
color:#38b6ff
}

.burger {
cursor:pointer;
display:none;
display:block
}

.burger div {
background-color:#fff;
height:3px;
margin:5px;
transition:all .3s ease;
width:25px
}

.nav-links {
align-items:center;
background-color:#333;
box-shadow:0 0 10px rgba(0,0,0,0.4);
display:flex;
flex-direction:column;
justify-content:space-around;
left:-100%;
position:absolute;
top:70px;
transition:all .5s ease;
width:0;
width:100%
}

.nav-active {
background-color:#333;
left:0;
transition:all .5s ease
}

.toggle .line1 {
transform:rotate(-45deg) translate(-5px,6px)
}

.toggle .line2 {
opacity:0
}

.toggle .line3 {
transform:rotate(45deg) translate(-5px,-6px)
}
footer {
    background-color: #1E1E1E;
    color: #CCC;
    font-size: 16px;
    padding: 40px 0;
    max-width:960px; 
    margin: 0 auto;
  }
  
  .footer-container {
    max-width:100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  footer .column {
    flex: 1;  
    
padding-right:0px
  }
  
  footer .column h3 {
    margin-top: 0;
    margin-bottom: 20px;
  }
  
  footer .column ul {
    list-style: none;
    padding: 0;
  }
  
  footer  .column ul li {
    margin-bottom: 4px;
    font-size: 12px;
  }

  footer p {
    
    font-size: 12px;
  }
  
  @media screen and (max-width: 767px) {
    .footer-container {
      flex-direction: column;
    }
    
    footer .column {
      margin: 20px 0;
    }
  }