html, body {
  background-color: #2d4059;
  margin: 0 auto;
  font-family: Helvetica,sans-serif;
}

body {
  display: grid;
  grid-template-columns: 30% 70%;
  font-family: Helvetica,sans-serif;
}

/* .contact {
  position: absolute;
  bottom: 25px;
  width: 100%;
} */

.icon {
  font-size: 40px;
  color: rgba(226, 226, 226, 0.5);
  margin: 0 25px;
}

.icon:hover {
  color: rgba(255, 255, 255, 0.856);
}

.contacts {
  position: fixed;
  height: 100vh;
  width: 29.5%; 
  text-align: left;
  background-color: #1f1815;
  background-image: url("../img/7-5.jpg");
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-filter: opacity(40%); /* Opera, Chrome, Safari */
    filter: opacity(40%);
}

.contacts > div{
  margin: 10px;
  padding: 25px;
  color: white;
  font-size: 30px;
  font-weight: bolder;

}

.email{
  font-size: 20px;
  
}

.container {
  text-align: center;

}

.project {
  margin: 10px;
  text-align: center;

}

.logo {
  padding: 5px;
}

.skill {
  display: inline-block;
  margin: 10px;
  color:#a2a2a2
}

.picture {
  border-radius: 10px;
  width: 500px;
}

.holder {
  background-color:#1f1815;
}

.title {
  font-size: 2em;
  margin-top: 50px;
  color: #e2e2e2
}

.detail {
  padding: 10px;
  
  color: #e2e2e2
}
.content{
  font-size: 15px;
  color: #a2a2a2;
}



@media screen and (max-width: 600px) {
  .contacts {
    height: 300px;
    position: relative;
    width: 100%;
  }

  .skill {
    margin: 2px;
    font-size: 10px;
    width: 65px;
  }

  body {
    grid-template-columns: 100%;
    grid-template-rows: 300px 0px auto
  }
  
  .picture {
    width: 350px;
  }

  
  img {
    width: 40px;
  }

  
}