body{
	background-color: floralwhite;
}
nav{
	display: flex;
	background-color: greenyellow;
	font-family: cursive;
	-webkit-font-family: cursive;
}

.name {
	display: block;
	padding: 30px ;
}

.name img{
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin: 4px 0 5px 0;
}

.name span{
	font-style: italic;
	vertical-align: middle;
}
.name span:nth-child(1){
	font-weight: bold;
	font-size: 25px;
	font-style: normal;
	-webkit-font-style: normal;
}

.navbar {
	padding: 20px 10px 30px 43.8%;
}

.navbar a:hover{
	font-weight: bold;
	text-decoration: underline;
}

.navbar a{
	font-size: 18px;
	text-decoration: none;
	padding: 20px;
}

.about {
	display: flex;
	margin: 3% 20% 29% 25%;
	font-family: 'Trebuchet MS', sans-serif;

}

main .profil{
	width: 25%;
	height: 30%;
	border-radius: 50%;

}

main h1{
	color: #04895D;
}

.intro{
	vertical-align: middle;
	display: block;
	margin-left: 5%;
	margin-top: 1%;
}

.skills{
	margin: 2% 7% 15% 7%;
	display: block;
	align-items: center;
	text-align: center;
}

.firstLine, .secondLine{
	display: flex;
}

.firstLine div, .secondLine div{
	box-shadow: 5px 5px 8px gray;
	margin: 1.5%;
	background-color: whitesmoke;
	width: 13%;
	height: auto;
}

.skills .skillWrapper .firstLine div img, .skills .skillWrapper .secondLine div img{
	width: 35%;
	height: 38%;
}

.skills .skillWrapper .firstLine div, .skills .skillWrapper .secondLine div{
	padding: 2% 2% 1% 2%;
}

.skills .skillWrapper .secondLine div h4{
	margin-bottom: 14%;
}

.skills .skillWrapper .firstLine div h4{
	margin-bottom: 2%;
}

.skills .skillWrapper .firstLine div h4, .skills .skillWrapper .secondLine div h4{
	padding-top: 9%;
}

.skills .skillWrapper{
	margin: 2%;
}

.skills .skillWrapper .firstLine div span, .skills .skillWrapper .secondLine div span{
	font-weight: bold;
	font-size: 12px;
}

.projects h1, .projects h2, .projects .projectContainer ul li span, .recommendations h1{
	font-family: 'Trebuchet MS', sans-serif;
}

.details{
	margin-left: 3%;
}

.projects{
	padding: 1% 10% 20% 10%;

}

.projects .projectContainer ul hr{
	margin-top: 2%;
	width: 82%;
	border-top: 1px solid lightgray;
}

.recommendations{
	padding: 1% 10% 10% 5%;
}

.recommendations .records{
	display: inline-flex;
	border: 1px solid gray;
	border-radius: 5%;
	padding: 2%;
	width: 20%;
	height: 100px;
	margin: 1%;
	
}

.recommendations .recomWrapper{
	margin-left: 5%;
}


.recommendations .records span{
	text-align: justify;
	margin-top: -5%;
	font-style: italic;
	font-weight: bold;
	font-size: 16px;

}


 .iconbutton{
  width: 48px;
  height: 48px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 3%;
  bottom: 3%;
  cursor: pointer;
}

#contact{
	margin: 1% 10% 5% 10%;
}

.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup {
  width:400px;
  background-color: #e8bcf0;
  border-radius: 3mm;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align: center;
  position: fixed;
  /* padding: 30px; */
  visibility: hidden;
}

.popup img {
  padding-top: 20px;
}

.popup button {
  background-color: #fff;
  border: 1px solid #7600bc;
  color: #7600bc;
  display: block;
  border-radius: 6px;
  text-align: center;
  margin: 50px;
  padding: 10px;
  width: 2in;
  font-size: 20px;
  margin-left: 25%;
}

.popup button:hover {
  background-color: #fff;
  border: 2px solid #7600bc;
  color: #7600bc;
  display: block;
  font-weight: bolder;
  text-align: center;
  cursor: pointer;
  margin-left: 25%;
}

input, textarea {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
  margin: 10px;  
  width:100%;
}

fieldset {
  display: flexbox;
  align-content: center;
  justify-content: center;  
  padding: 25px; 
  margin-left: 50px; 
  margin-right: 50px;   
  border: thin solid white;
  width: 50%;
}

.introduction {
  text-align: justify;
  font-size: 30px;
  text-align: center;
  float: left;
  margin-top: 30px;
  margin-bottom: 20px;
  animation-duration: 5s;
  position: relative;
}

 #check{
  	display: none;
  	position: absolute;
  }

@media only screen and (max-width:700px) {
  /* For mobile phones: */
  nav{
  	width: 100%;
  }

  .navbar a{
    display: none;
  }
  img.menuBtn{
  	display: flex;
  	width: 40px;
		height: 40px;
		margin: 30px 5% 30px 25%;
		cursor: pointer; 

  }

  .name .email{
  	display: flex;

  }
  .name .email span{
  	padding-left: 5%;
  }

  .about{
  	margin: 2% 2% 50% 2%;
  	padding: 2%;
  }

  .about p{
  	text-align: justify;
  }

  .firstLine, .secondLine {
  	display: block;
  	width: 60%;
  }

  .firstLine div, .secondLine div{
			width: 120%;
			margin-top: 10%;
			margin-left: 18%;
}

  .skills{
  	margin-right: -200px;
  	padding-right: -100px;
  	width: 85%;
  }

  .recommendations .records{

  	display: block;
  	width: 95%;
  }

  .iconbutton{
  	left: 88%;
  }

  .popup{
  	width: 300px;
  	height: auto;
  	left: 35%;
  }

  .skillWrapper{
  	width: 100%;
  }

  #check:checked ~ .navbar a, .navbar{
  	display: block;

  }

  #check:checked ~ .navbar{
  	display: block;
  }

  .navbar{
  	display: none;
  	position: absolute;
  	background-color: lightblue;
  	width: 45%;
  	top: 12%;
  	left: 45%;
  	padding-left: 1%;

  }

  #contact{
	margin: 1% 10% 5% 0.5%;
}

}

.menuBtn{
		display: none;
	}