body{
    background-color: rgb(225, 255, 0); 
cursor:  url(../mediasindex/sunfacecursor), pointer; /* ajouter.png après cursor */
}
   .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0px;
    grid-auto-rows: minmax (50px, auto);
    position: sticky;
    top: 5px;
    
}
.one {
    grid-column: 1 / 3;
    grid-row: 1;
}
.one img {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 100%;
    }

.two {
    border-color: black;
    grid-column: 2;
    grid-row: 2;
    display: grid;
    justify-items: left;
    align-items: center;
    margin-left: 20px;
    margin-top: 6px;
}
  .two img {
    height: 84%;
    width:103%;
    }

  .three {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    justify-items: left;
    align-items: center;
    margin-top: 20px;
    margin-left: 30px;
    width:100%;
  }
  .three img {
  height: 100%;
    }
    img.morph {
      width: 97%;
      height: 110px;
      -webkit-filter: grayscale(0) blur(0px);
      filter: grayscale(0) blur(0px);
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
      }
             
      img.morph:hover {
      width: 50%; /* on affiche l'image au carré */
      height: 110px;
      }
  /*soleil animation*/
      
    .sunface {
    grid-column: 1 / 3;
    grid-row: 1;
    position: absolute;
    z-index: 1;
    margin-left: 400px;
}
.sunface img {
    width: 400px;
}
/*WRAPPER2*/
/*WRAPPER2*/
/*WRAPPER2*/
/*WRAPPER2*/
.wrapper2 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
width: 100%;
margin-left: 30px;
}
@font-face {
font-family: ibmplex;
src: url(../typos/ibmplexmonolight.ttf);
}
@font-face {
font-family: bau;
src: url(../typos/BauOT.otf);
}
h1 {
font-family: "bau";
letter-spacing: 1px;
font-size: 25px;
line-height: 1.1;
margin-bottom: 10px;
}
h2 {
font-family: "ibmplex";
letter-spacing: 0.5px;
font-size: 15px;
line-height: 1.3;
margin-top: 0px;
    }
h3 {
font-family: "ibmplex";
letter-spacing: 1px;
font-size: 12px;
line-height: 1.3;
margin-bottom: 10px;
margin-top: 0px;
}

h4 {
font-family: "bau";
letter-spacing: 1px;
font-size: 18px;
line-height: 1.3;
margin-bottom: 0px;
        }
/*LIEN*/
    
a:link{
color:black;
margin-top:  0px;
}
a:hover{
color: gray;
margin-top: 0px;
}
a:active{
color: red;
margin-top:  0px;
}
a{
text-decoration:none;
}
  
/*HOUSEWOOD BIG*/
/*HOUSEWOOD BIG*/
/*HOUSEWOOD BIG*/
.i11 {
  grid-column: 1;
  grid-row: 1;
}

 .i11 .housewoodgrande{
    width: 100%;
  }
 .i11 .boutonbuyhousegrande{
    width: 80px;
  }
  .i11 h2{
    margin-top: 10px;
  }

    

/*HOUSEWOOD SMALL*/
/*HOUSEWOOD SMALL*/
/*HOUSEWOOD SMALL*/
.i12 {
  grid-column: 2;
  grid-row: 1;
}

  
.i12 .housesmall{
    width: 100%;
  }
.i12 .boutonbuysmall{
    width: 80px;
  }
  .i12 h2{
    margin-top: 10px;
  }

/*green dolphin*/
/*green dolphin*/
/*green dolphin*/
.i1 {
grid-column: 3;
grid-row: 1;
}
.i1 h2{
  margin-top: 10px;
}
.greendolphin{
  width: 100%;
}
.boutonbuygreen{
  width: 80px;
}
.karaoke{
  width:150px;
}


/*FIREBALL*/
/*FIREBALL*/
/*FIREBALL*/
.i2 {
grid-column: 4;
grid-row: 1;
}


.i2 h2{
margin-top: 10px;
}

.i2 .boutonbuyfire {
width: 80px;
}
.i2 .fireballimg{
width: 100%;
}


/*BETTINABOOK*/
/*BETTINABOOK*/
/*BETTINABOOK*/
.i5 {
grid-column: 1;
grid-row: 3;
}


.i5 h2{
margin-top: 10px;
}

.i5 .bettinabook{
width: 100%;
}
    
.i5 .boutonbuybettina {
width: 80px;
}
 

/*SEPANDBOOK*/
/*SEPANDBOOK*/
/*SEPANDBOOK*/
.i6 {
  grid-column: 2;
  grid-row: 3;
 }

  .i6 h2{
  margin-top: 10px;
  }
    
  .i6 .sepandbook{
  width: 100%;
  }
        
  .i6 .boutonbuysepand {
  width: 80px;
  }

/*SUNSETPOSTER*/
/*SUNSETPOSTER*/
/*SUNSETPOSTER*/
.i7 {
  grid-column: 3;
  grid-row: 3;

  }
  .i7 img{
  width: 100%;
  margin-bottom: 0px;
  }
  .i7 h2{
    margin-top: 10px;
    }
      
    .i7 .postersunset{
    width: 100%;
    }
          
    .i7 .boutonbuysunsetposter {
    width: 80px;
    }


/*SEPAND POSTER*/
/*SEPAND POSTER*/
/*SEPAND POSTER*/
.i8 {
  grid-column: 4;
  grid-row: 3;
}

  .i8 h2{
    margin-top: 10px;
    }
      
    .i8 .postersepand{
    width: 100%;
    }
          
    .i8 .boutonbuypostersepand {
    width: 80px;
    }

/*POSTER KARL OLIVIER*/
/*POSTER KARL OLIVIER*/
/*POSTER KARL OLIVIER*/
.i13 {
  grid-column: 1;
  grid-row: 5;

  }
  .i13 img{
  width: 100%;
  margin-bottom: 0px;
  }

  .i13 h2{
    margin-top: 10px;
  }

  .i13 .posterkarlolivier{
    width: 100%;
    }
              
    .i13 .boutonbuyokarl {
    width: 80px;
    }

/*JOURNAL POMMES*/
/*JOURNAL POMMES*/
/*JOURNAL POMMES*/
.i9 {
  grid-column: 2;
  grid-row: 5;

  }
  .i9 img{
  width: 100%;
  margin-bottom: 0px;
  }

  .i9 h2{
    margin-top: 10px;
  }

/*MIREILLE BLANC*/
/*MIREILLE BLANC*/
/*MIREILLE BLANC*/
.i10 {
  grid-column: 3;
  grid-row: 5;
}

.i10 h2{
  margin-top: 10px;
}

.i10 img{
  width: 100%;
  margin-bottom: 0px;
}

.i10 .mireille{
width: 100%;
}
          
.i10 .boutonbuymireille {
width: 80px;
}

/*RESPONSIVE*/
/*RESPONSIVE*/
/*RESPONSIVE*/

/*RESPONSIVE WRAPPER1*/
/* ------------ */
@media screen and (max-width: 1368px) {
.wrapper{
grid-template-columns: repeat(1, 1fr);
width: 100%;
margin-left: 0px;
}}
 /* ------------ */  
 @media screen and (max-width: 1368px) {
.one{
width: 86%;
margin-left: 0px;
margin-bottom: 20px;
}}    

@media screen and (max-width: 480px) {
  .one{
  width: 100%;
  margin-bottom: 20px;
  }}   

@media screen and (max-width: 1368px) {
.one img{
margin-top: 10px;
margin-bottom: 20px;
width: 95%;
height: 110%;
}}

@media screen and (max-width: 480px) {
  .one img{
  height: 140%;
  }}


/* ------------ */ 
@media screen and (max-width: 1368px) {
.two{
width: 900px;
margin-left: 600px;
grid-column: 1;
grid-row: 2;
}}
@media screen and (max-width: 480px) {
.two{
width: 95%;
margin-left: 10px;
grid-column: 1;
grid-row: 3;
height: 100px;
}}


@media screen and (max-width: 1368px) {
.two img{
width: 70%;
}}
@media screen and (max-width: 480px) {
.two img{
width: 100%;
height: 100%;
}}
 /* ------------ */ 

@media screen and (max-width: 1368px) {
.three{
width: 98%;
margin-left: 10px;
grid-column: 1;
grid-row: 2;
}}
@media screen and (max-width: 1368px) {
.three img{
height: 100px;
}}

@media screen and (max-width: 480px) {
.three{
width: 98%;
margin-left: 10px;
grid-column: 1;
grid-row: 2;
}}

@media screen and (max-width: 480px) {
  .three img{
  height: 100px;
  }}
  @media screen and (max-width: 1368px) {
    img.morph {
    width: 96%;
    height: 100px;
    -webkit-filter: grayscale(0) blur(0px);
    filter: grayscale(0) blur(0px);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    }}
    @media screen and (max-width: 1368px) {
    img.morph:hover {
    width: 50.5%;
    height: 100px;
    }}
/*RESPONSIVE WRAPPER2*/

@media screen and (max-width: 1368px) {
.wrapper2{
grid-template-columns: repeat(3, 1fr);
width: 94%;
margin-left: 10px;
}}
@media screen and (max-width: 480px) {
.wrapper2{
grid-template-columns: repeat(1, 1fr);
width: 94%;
margin-left: 10px;
}}
/*-----housewood grande---------*/
@media screen and (max-width: 1368px) {
.i11{
grid-column: 1;
grid-row: 1;
}}
@media screen and (max-width: 480px) {
  .i11{
  grid-column: 1;
  grid-row: 1;
  margin-top: 20px;
  }}
/*-----housewood petite---------*/
@media screen and (max-width: 1368px) {
.i12{
grid-column: 2;
grid-row: 1;
}}

@media screen and (max-width: 480px) {
.i12{
grid-column: 1;
grid-row: 2;
}}
/*-----greendolphin---------*/
@media screen and (max-width: 1368px) {
.i1{
grid-column: 3;
grid-row: 1;
}}

@media screen and (max-width: 480px) {
.i1{
grid-column: 1;
grid-row: 3;
}}

 /*-----fireball---------*/
@media screen and (max-width: 1368px) {
.i2{
grid-column: 1;
grid-row: 2;
}}

 @media screen and (max-width: 480px) {
    .i2{
    grid-column: 1;
    grid-row: 4;
    }}

/*-----bettina book---------*/
@media screen and (max-width: 1368px) {
.i5{
grid-column: 2;
grid-row: 2;
}}

  @media screen and (max-width: 480px) {
    .i5{
    grid-column: 1;
    grid-row: 5;
    }}
 /*-----sepand book---------*/
@media screen and (max-width: 1368px) {
.i6{
grid-column: 3;
grid-row: 2;
}}

  @media screen and (max-width: 480px) {
    .i6{
    grid-column: 1;
    grid-row: 6;
    }}
 /*-----poster sunset---------*/
@media screen and (max-width: 1368px) {
.i7{
grid-column: 1;
grid-row: 3;
}}

  @media screen and (max-width: 480px) {
    .i7{
    grid-column: 1;
    grid-row: 7;
    }}
/*-----poster sepand---------*/
@media screen and (max-width: 1368px) {
.i8{
grid-column: 2;
grid-row: 3;
}}

@media screen and (max-width: 480px) {
.i8{
grid-column: 1;
grid-row: 8;
}}
/*-----poster karl olivier---------*/
@media screen and (max-width: 1368px) {
.i13{
grid-column: 3;
grid-row: 3;
}}

@media screen and (max-width: 480px) {
.i13{
grid-column: 1;
grid-row: 9;
}}
/*-----journal dans les pommes---------*/
@media screen and (max-width: 1368px) {
.i9{
grid-column: 1;
grid-row: 4;
}}

@media screen and (max-width: 480px) {
.i9{
grid-column: 1;
grid-row: 10;
}}
/*-----mireille---------*/
@media screen and (max-width: 1368px) {
.i10{
grid-column: 2;
grid-row: 4;
}}
@media screen and (max-width: 480px) {
.i10{
grid-column: 1;
grid-row: 11;
}}

  /* ----gradient-------- */

  #mydiv {
    position: absolute;
    z-index: 15;
    width: 5px;
    height: 5px;
  }
  
  #mydivheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
   width: 250px;
    height: 400px;
    margin-left:470px;
    margin-top: 240px;
    }
    @media screen and (max-width: 1368px) {
      #mydivheader {
        width: 300px;
        height: 2000px;
        margin-left:700px;
        margin-top: 250px;
      }}
      @media screen and (max-width: 480px) {
        #mydivheader {
          width: 150px;
          height: 100px;
          margin-left:15px;
          margin-top: 250px;
        }}