* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    font-family: 'Titillium Web', sans-serif;
}

.home {
    background-image: url(../img/Fotoram.io.jpg);
    height: 88vh;
    background-size: cover;
    background-position: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn {
    border: 2px solid rgb(85, 17, 17);
    background-color: transparent;
    text-transform: uppercase;
    font-size: 20px;
    color: black;
    padding: 10px;
    cursor: pointer; 
    transition: all 0.4s;
    margin: 0 20px 51px 20px;
    font-weight: bold;
}

.btn:hover {
    background-color:rgb(85, 17, 17);
    color: #fff;
}

.home-text {
    text-align: center;
}

h4 {
    text-transform: uppercase;
    color:  rgb(85, 17, 17);
    font-size: 40px;
    padding-bottom: 70px;
}

h1 {
    font-size: 70px;
}

span {
    color: rgb(85, 17, 17);
}

.flag {
    padding-bottom: 50px;
}

.home-text img:hover {
    cursor: pointer;
}

.main-container {
   padding-top: 70px;
   padding-bottom: 70px;
}

#navbar {
    background-color:rgb(85, 17, 17);
    overflow: hidden;
    padding: 20px;
    z-index: 1;
    display: flex;
    justify-content: center;
}

#navbar ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    margin-bottom: 0;
    padding:0;
}
  
#navbar ul li {
    cursor: pointer;
    flex: auto;
    text-align: center;
    font-size: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
  
#navbar ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    cursor: pointer; 
    border-radius: 10%;
}

#navbar ul li a:hover {
    background-color:  #fff;
    color:black;
} 

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }

.section-about {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}

figure {
    flex-basis: 49%;
    display: flex;
    margin: -20px;
}

#vsc, #jQuery, #responsive {
    width: 85px;
    height: 89px;
}

.about {
    flex-basis: 49%;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 40px 80px 40px 0;
}

figure img {
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    display: inline-block;
  }
  
 .document {
     display:flex;
     flex-wrap: wrap;
     justify-content: space-around;
     margin-top:80px;
 }

 .cv i, .git i {
     display:contents;
     font-size:50px;
 }

 .cv a, .git a {
     color: rgb(85, 17, 17)
 }

 .skill1:before, .skill2:before, .skill3:before, .skill4:before, .skill5:before, .learn1:before, .learn2:before, .learn3:before, .skill9:before{
    font-family: "Font Awesome 5 Brands";
    background-color: white; 
    border-radius: 50%;
    padding: 20px;
    color: rgb(114, 83, 83);
    text-align: center;
    font-size: 3em;
    box-shadow: 0 0 0 3px rgb(85, 17, 17);
}

#vsc img, #jQuery img {
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

#responsive, #vsc, #jQuery, .learn-item {
    background-color: white; 
    border-radius: 50%;
    padding: 20px;
    box-shadow: 0 0 0 3px rgb(85, 17, 17);
    color: rgb(114, 83, 83);
    margin: -8px;
    margin-left:2px;
    margin-right:2px;
}

.learn-item {
    width: 94px;
    height: 89px;
}

.learn-item img {
    width: 48px;
    padding: 0;
}

#vsc img {
    width: 50px;
}

#jQuery img {
    width: 60px;
}

#jQuery {
    padding: 14px;
}

#skill-responsive {
    padding:0;
    width: 49px;
}

.can p, .learning p {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 20px;
}

.learning {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.skill1:before {
    content: "\f13b";
}

.skill2:before {
    content: "\f38b";
}

.skill3:before {
    content: "\f3b8";
}

.skill4:before {
    content: "\f836";
} 

.skill5:before {
    content: "\f1d3"
}

.skills {
  background-color: rgb(240, 240, 240);
  padding: 50px 0;
  text-align: center;
  justify-content: center
}

.can {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 30px;
  margin-left: 100px;
  margin-right: 100px;
}

h3 {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 20px;
  color:rgb(85, 17, 17);
}

.learn1, .learn2, .learn3, .learn4, .learn5 {
  padding: 30px;   
}

.learn1:before {
  content: "\f19a";
}

.learn2:before {
  content: "\f41e";
}

.skill9:before {
  content: "\f41b";
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:40px;
}

.card {
    flex-basis: 45%;
    position: relative;
    text-align: center;
    margin: 20px;
    border: 2px solid rgb(85, 17, 17);
}
  
.card img {
    width:100%;
    height: auto;
    border: 1.5px solid brown;
}

.card:hover {
    box-shadow: 10px 10px 5px rgb(85, 17, 17);
}

.github {
    display:flex;
    justify-content: center;
}

.technologies {
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start;
}

.technologies p {
    padding: 5px 20px;
    color:  rgb(85, 17, 17);
    font-size: 13px;
    font-family: "Arimo", sans-serif;
    border: 1px solid rgb(85, 17, 17);
    border-radius: 9px;
    padding: 0 5px;
    margin-right: 20px;
    background-color: #ffffff;
}
  
#code, #live {
    background-color: rgb(85, 17, 17);
    color: white;
    border-radius: 50%;
    margin: 20px;
    outline-style: none;
    font-weight: bold;
    font-size: 20px;
    padding: 10px 30px;
}

#code:hover, #live:hover {
    background-color: white;
    color: rgb(85, 17, 17);
}

.container h4 {
    text-shadow: 2px 2px rgb(85, 17, 17);
    padding-bottom: 0px;
}
  
#contact {
    background-color: rgb(240, 240, 240)
}

#contact form {
    width: 50%;
    margin: 10px auto;
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 100px;
}

.contact-text {
    color: rgb(85, 17, 17);
    text-align: center; 
}

#contact form textarea {
    flex-basis: 100%;
    background-color: white;
    border: 5px solid rgb(85, 17, 17);
    padding: 12px 20px;
    margin: 8px 0;
}

#contact form input {
    flex-basis: 49%;
    margin-bottom: 10px;
    background-color: white;
    border: 5px solid rgb(85, 17, 17);
    padding: 12px 20px;
    margin: 8px 0;
}

#contact .send {
    background-color: white;
    text-transform: uppercase;
    margin-top: 30px;
    font-size: 15px;
    padding: 25px 25px;
    cursor: pointer; 
    margin-left: auto;
    margin-right: auto;    
    border: 5px solid rgb(85, 17, 17);
}

#contact .send:hover {
    background-color: rgb(218, 216, 216);
}

.phone, .mail {
    display:flex;
    justify-content: center;
}

.phone i, .mail i {
    font-size: 30px;
    margin-left: 20px;
}

footer {
    background-color: rgb(85, 17, 17);
    height: 50px;
    text-align: center;
}

footer p {
    font-size: 20px;
    color: white;
    margin: -10px 0px -10px 0px;
    padding-top: 10px;
}