body{
  max-width:100vw;
  color:#fff;
}
#landing{
  height:100vh;
  background:url(./images/IMSOUANE.jpeg) no-repeat center center fixed;
  background-size:80px;
  -webkit-background-size:cover;
  -o-background-size:cover;
  -moz-background-size:cover;
}
#portfolio{
  background:url(https://images.unsplash.com/photo-1449709992276-24bbca940809?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c5de67a556b843958d279d2b74a09550) no-repeat center center fixed;
  background-size:cover;
  -webkit-background-size:cover;
  -o-background-size:cover;
  -moz-background-size:cover;
  min-height:100vh;
  position: relative;
    margin: 0; /* Entfernt zusätzlichen Abstand */
    padding: 0; /* Entfernt zusätzlichen Abstand */
  }
  

/* end landing page */


/* cool name effect */
a:hover,a:focus{text-decoration:none;}
.svg-wrapper {
  position: relative;
  top: 35%;
  transform: translateY(-50%);
	margin: 0 auto;
  width: 320px;
  max-height:60px;
  cursor:default;
}
.shape {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  fill: transparent;
  /* modify this with the color you want */
  stroke: #19f6e8;  
  border-bottom: 5px solid black;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
  font-family: serif;
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #fff;
  top: -48px;
  position: relative;
  text-align:center;
}
.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}
/* end cool name effect */
#port-wrapper{
  width:100%;height:100%;
  background:rgba(0,0,0,0.3);
  position:absolute;
}
.text-2 h2{
  font-family: 'Josefin Slab', serif;
  font-size: 20px;
}
button{
  background:none;
  border:none;
  padding:0 20px;
}
button:hover, button:focus{
  background:rgba(0,0,0,0.4);
  outline:none;
}
.content{
  margin:50px;
  margin-top:75px;
  margin-bottom:0;
}
@media only screen and (max-width : 768px){
  #text-changer-1{
    margin-left:50px;
  }
}

#text-changer-3 .social{
  margin:35px;
}
#text-changer-3 .fa{
  margin:5px;
  color:#fff;
}
#text-changer-3 .fa:hover{
  color:#2e8ece;
}
.project{
  height:100%; width:100%;
  border:1px solid #fff;
  margin-bottom:5px;
}
#text-changer-2{
  text-align:center;
  height:100%;
}
a#first {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}

a#first:hover {
  background-color: #0056b3;
}
.project {
  width: 100%;
  height: 250px; /* Höhe der Boxen */
  overflow: hidden; /* Verhindert, dass Bilder über die Box hinausgehen */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc; /* Optional: Rahmen um die Box */
  box-sizing: border-box;
}

.project img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Bilder passen sich an die Box an, ohne verzerrt zu werden */
}
#text-changer-1 p {
  font-family: 'Playfair Display', serif;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.8;
  margin: 0 auto;
  max-width: 600px;
}

#text-changer-1 img {
  float: left;
  margin-right: 20px;
  border-radius: 10px;
}
@media (max-width: 768px) {
  /* Hintergrundbilder zentrieren und anpassen */
  #landing {
    background-size: cover;
    background-position: center;
    height: 100vh;
  }

  #portfolio {
    background-size: cover;
    background-position: center;
    min-height: 100vh;
  }

  /* Allgemeine Anpassungen */
  #port-wrapper {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
  }

  .text-2 h2 {
    font-size: 18px;
  }

  .project {
    height: 200px;
  }

  #text-changer-1 img {
    width: 100%;
    height: auto;
    margin: 10px auto;
    display: block;
  }

  #text-changer-1 p {
    font-size: 1em;
    line-height: 1.5;
    margin: 0 10px;
  }

  #text-changer-2 .col-xs-6 {
    margin-bottom: 10px;
  }

  #text-changer-3 .social {
    margin: 15px;
    text-align: center;
  }

  #text-changer-3 .fa {
    margin: 10px;
    font-size: 1.5em;
  }

  .calendly-inline-widget {
    width: auto;
    height: auto;
    
  }

  a#first, button {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 0;
    text-align: center;
  }
}