body{
  font-family: "Isidora";
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background-color: #00d89c;

}



img{
  width: 100%;
}


.logo{
  width: 15%;
  margin-left: 4%;
  margin-top: 4%;
  z-index: 0;

}

@font-face{
  font-family: "Isidora";
  src: url("typo/Latinotype - Isidora Sans Black.otf");
  font-weight: bold;


}


@font-face{
  font-family: "Isidora";
  src: url("typo/Latinotype - Isidora Sans Alt Medium.otf");
font-weight: italic;


}


@font-face{
  font-family: "Isidora";
  src: url("typo/Latinotype - Isidora Sans Alt Regular.otf");
  font-weight: normal;


}

.bonjour{
  z-index: 12;
  position: absolute;
  margin-left: 33%;
  margin-top: 10%;
  color: white;
  font-size: 460%;

}

.jesuis{
  z-index: 12;
  position: absolute;
  margin-left: 44%;
  margin-top: 25%;
  color: white;
  font-size: 260%;
}

.juliette{
  z-index: 12;
  position: absolute;
  margin-left: 30%;
  margin-top: 35%;
  width: 40%;
}

.fond{
  width: 100%;
  height: 30%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  z-index: 0;
}

.portfolio{
  color: white;
  font-size: 560%;
  position: relative;
  margin-left: 4%;
  margin-top: 0%;
  z-index: 0;


}


.conteneur-projets{
  width:80vw;
  margin-left: 10vw;
  display: flex;
  flex-wrap: wrap;
}
.colonne-projets{
  flex:1 1 30%;
  overflow: hidden;
  margin: 0 2vh 0 2vh;
}


.projet-portfolio{
  display: block;
  margin: 2vh 0 5vh 0;
  background-color: white;
  padding:2vh;
}

.colonne-projet-actif{
  flex:1 1 30%;
  overflow: hidden;
  margin: 2vh 2vh 0 2vh;

}


.titre_projet{
  color: white;
  font-size: 260%;
}

.sous-titre{
  color: white;
  font-size: 140%;
  font-style: italic;
  margin-top: -5vh;
}
.texte{
  color: white;
  font-size: 120%;
  margin-top: 3vw;
}
.photo-sup{
  flex:1 1 70%;
  overflow: hidden;
  margin: 6vh 0 2vh 0;
  padding:2vh;
  display: flex;

}
.projet-portfolio-petit{
  display: block;
  margin: 0 2vh 0 0;
  background-color: white;
  padding:2vh;
}


.footer{
  background-color: #112193;
  color:white;
  padding: 1vw 1vw 3vw 1vw;
  text-align: center;
}














@media (min-width: 300px) and (max-width: 900px){
  body

  .logo{
    width: 35%;
    margin-left: 4%;
    margin-top: 4%;
    z-index: 0;

  }

    .conteneur-projets{
      width:80vw;
      margin-left: 10vw;
      display: inline-block;
      vertical-align: top;
    }
    .colonne-projets{
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      margin: 0 2vh 0 2vh;
    }


    .projet-portfolio{
      display: inline-block;
      vertical-align: top;
      margin: 2vh 0 5vh 0;
      background-color: white;
      padding:2vh;
    }

    .colonne-projet-actif{
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      margin: 2vh 2vh 0 2vh;

    }


    .titre_projet{
      color: white;
      font-size: 260%;
    }

    .sous-titre{
      color: white;
      font-size: 140%;
      font-style: italic;
      margin-top: -5vh;
    }
    .texte{
      color: white;
      font-size: 120%;
      margin-top: 3vw;
    }
    .photo-sup{
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      margin: 6vh 0 2vh 0;
      padding:2vh;


    }
    .projet-portfolio-petit{
      display: inline-block;
      vertical-align: top;
      margin: 0 2vh 0 0;
      background-color: white;
      padding:2vh;
    }


    .footer{
      background-color: #112193;
      color:white;
      padding: 1vw 1vw 3vw 1vw;
      text-align: center;
    }



  }