@import url('https://fonts.googleapis.com/css?family=Poiret+One');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

@keyframes example {
    from {background-color: #fba5aa;}
    to {background-color: #1712ab;}
}

@viewport{
orientation: portrait;
}

/* .menucontainer {
    width: 100vw;
    height: 100vw;
    background-color: #1712ab;
    -webkit-animation-name: example;
    -webkit-animation-duration: 10s;
    animation-name: example;
    animation-duration: 10s;
} */

body.home {
  background-color: #1712ab;
  -webkit-animation-name: example;
  -webkit-animation-duration: 20s;
  animation-name: example;
  animation-duration: 20s;
}

body{
  background: #1712ab;
  font-size: 15px;

}

h1{
  color: #b4e6fa;
  font-family: 'Poiret One', cursive;
  font-size: 8vw;
  text-align: right;
  margin-right: 5vw;
}

h2{
  color: #b4e6fa;
  font-family: 'Poiret One', cursive;
  font-size: 6vw;
  text-align: right;
  margin-right:5vw;
}



header{
  position: fixed;
  background: #1712ab;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  height: 26vh;
}

img{width:100%;}

.principal{
  top: 5vw;
  position: relative;
}

.backmenu {
  position: absolute;
  width: 50vw;
  height: 30vw;
  top: 4vh;
}

.image-back{
  width: 30vw;
}

.home .backmenu {
  top: 37vh;
  left: 37vw;
}

.maintitle {

}

.sophia {
  position: absolute;
  top: 25vh;
  left: 7vw;
  width: 40vw;
  height: 40vw;
}

.webgirl {
  position: absolute;
  top: 40vh;
  left: 53vw;
  width: 40vw;
  height: 40vw;
}

.bitecoin {
  position: absolute;
  top: 53vh;
  left: 25vw;
  width: 40vw;
  height: 40vw;
}

.apprentissageauto {
  position: absolute;
  top: 78vh;
  left: 10vw;
  width: 40vw;
  height: 40vw;
}

.femmesnumeriques {
  position: absolute;
  top: 85vh;
  left: 45vw;
  width: 40vw;
  height: 40vw;
}

.horreurdomotique {
  position: absolute;
  top: 109vh;
  left: 7vw;
  width: 40vw;
  height: 40vw;
}

.pinkghetto {
  position: absolute;
  top: 120vh;
  left: 53vw;
  width: 40vw;
  height: 40vw;
}

.selfish {
  position: absolute;
  top: 130vh;
  left: 20vw;
  width: 40vw;
  height: 40vw;
}

body.article1{
  background: #B4e6fa;
  margin:0;

}

.div1, .bleu{
    background: #1712ab;
}

.div1{
  height: auto;
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 20vw;
  padding-bottom: 5vw;
}

.imgarticle{

}

.texte{
  background: #b4e6fa;
  width: 100vw;
  /* height: 110vw; */
  font-size: 6vw;
  color: #1712ab;
}

.texte p{
  margin-top:0;
  padding-top: 2vh;
  padding-left: 5vw;
  padding-right: 5vw;
  margin-bottom: 0;
  padding-bottom: 50px;
}


.zizi{
  position: absolute;
  top: 4vw;
  left: 5vw;
  width: 14.5vw;
  height: 10.625vw;
}
p{
  font-family: 'Poiret One', cursive;
  font-weight: bold;
}

.textesarticles{
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.dates{
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  margin-left: 75vw;
  margin-top: 10vh;
}

.headerarticle{
  position:fixed;
  background: #1712ab;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  height: 10vh;
}

.touchme{
  position: absolute;
  top: 11vh;
  left: -3vw;
  color: #fba5aa;
  font-size: 9vw;
  font-weight: bold;
 }
}