html, body{
  background-image: url(https://i.postimg.cc/yY2DcyQj/tumblr-static-50rjgkcu7m88woco048o4g4sg.png);
  background-repeat: repeat-x;
  animation: scroll 1000s infinite linear;
  background-size: auto 100%;
  perspective: 800px;
  overflow: auto;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;

}
@keyframes scroll{
  from { background-position: 0%;}
  to  { background-position: 10000%;}
}
 .header{
    height: 60px;
    text-align:  right;
    text-overflow: unset;
    line-height: 1.7em;
    font-size: 30px;
    margin-bottom: 20px;
    width: 100%;
    background-image: -webkit-linear-gradient( #ecf7aa75, transparent);
  }
  .header p{
    margin-right: 25px;
}
  .all{
  display: flex;
  max-height: auto;
  max-width: auto;
} 
/* flexbox */
  .container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #93c4b4;
    height:530px;
    width:900px;
    margin-left: 35px;
    border: 1px solid black;
  }
  .subcontainer{
    display: flex;
    justify-content: center;
    background-color: rgb(255, 250, 241);
    height:465px;
    width:900px;
    margin: 10px;
   margin-bottom: 10px;
   border: 1px solid black;
  }
  .navbar{
    flex:1;
    flex:22%;
    background-color: #ffffff;
    justify-content: center;
    border-right: 1px solid black;
  }
  .main{
    flex:3;
    flex:78%;
    background-color: #ffffff;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    overflow: auto;

  }
  .subhead{
    background-color: rgb(61, 122, 207);
    width:900px;
    height: 45px;
    flex:100%;
    margin: 10px;
    margin-bottom: -18px;
    border: 1px solid black;
  }
  .extra{
    margin-left: 20px;
    width:230px;
    height:530px;
    
  } 
  /* flexbox en bas c suppose etre navbar img */
  #kiku{
    border: 1px solid black;
    border-radius: 2px;
    width: 80%;
    object-fit: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
  } 
  .navbar a{
    color: black;
  }  
/* mobile code */
@media all and (max-width: 800px){
  .html, .body{
    overflow: auto;
 }
  .all{
      flex: 1;
      flex-direction: column !important;
      margin-left: -20px !important;
      margin-right: auto !important;
      display: block !important;
   }
   .container{
      order: 1;
      max-width: 90% !important;
      margin-bottom: 20px;
      height:1500px !important;
   }
   .subcontainer{
    height: 1480px;
    width: 97% !important;
 }
 .subhead, subhead h4{
  display: none !important;
} 
.content{
   overflow: auto;
   background-size: 0% !important;
   border: 0.5px black solid;
 }
 .content h3, content h4, content p{
    background-color: #e6f6fe !important;
}
 .main{
  overflow: auto;
}
.navbar{
  overflow: auto;
}
.navbar a{
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  width: 70% !important;
}
.navbar table{ 
  margin-left: auto !important;
  margin-right: auto !important;
  width: 70% !important;
}
.stamps{ 
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  width: 70% !important;
}
 .subcontainer{
  flex-direction: column;
}
.maintop{
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.misc{
  flex: 1;
  flex-direction: column;
}
.pixeltalia{
  width: 50% !important;
  margin-left: 25% !important;
}
table{
  margin-left: auto!important;
  margin-right: auto!important;
}
.faketabs table{
  display: none !important;
}
#img1, #img2{
  display: none !important;
}
 #td2, #td3, #td4 {
  display: none !important;
 }
 #kiku{ width: 50%;}
   .extra{
      order: 2;
      width: 90% !important;
      margin-left: 100px !important;
   }
   .main p, .main h3, .content h4, .content h5, .content a, .extrabox p, .extraheader p, .navbar a, .navbar table, .main table{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
  }
   .extra{
    margin-left: 35px !important;
    margin-right: auto !important;
 }
 .vn{
  display: flex;
  flex-direction: column !important;
  gap: 10px;
}
.imgflx3{
  display: flex;
  flex-direction: column !important;
  gap: 10px;
  max-width: 40% !important;
  justify-content: center !important;
  margin-left: 30%;
}
.vn img{
  max-width: 40% !important;
  margin-left: 30%;
}
.imgflx{
  margin-left: 20% !important;
}
  }
  
/* mobile code */
.content h5{
  margin-bottom: -20px;
  margin-top: -2px;
  margin-left: 5px;
  
}
.content h4{
  margin-top: px;
  margin-left: 2px;
  
}
.content a{
  margin-left: 10px;
  text-align: left;
}
.content img{
  object-fit: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    width: 95%;
}

#list{
  margin-left: 20px;
  width: 275px;
}
table{
  border-collapse: collapse;
  height: 80px;
  width: 200px;
  margin-top: -10px;
  font-family: ms ui gothic;
}
.table, td {
  border: 1px solid black ;
}
.navbar a{
    position: relative;
    line-height: 30px;
    margin-left: 20px;
    text-align: center;
    margin-top: 10px;
    border: 1px solid black;
    border-radius: 5px;
    width: 150px;
    text-decoration: none;
    background-color: #e6f6fe;
    background-image: -webkit-linear-gradient(#6ab09c,#93c1ac,#dde6a4 );
    box-shadow:0px 9px 5px -6px  #d6cfa7;
    color: #ffffff;
    
    font-family: tahoma;
    font-size: 11px;
    display: inline-block;
    transition: 0.5s;
}
.navbar a::after{
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: 50%;
  background: linear-gradient(rgba(229, 252, 180, 0.584), rgba(151, 122, 131, 0.2));
  
}
.navbar a:hover{
    text-decoration: underline;
}
.navbar table{
  border-collapse: collapse;
  height: 20px;
  width: 150px;
  margin-left: 20px;
  font-size: 13px;
  font-size: 10px;
}
.faketabs{
 display: flex;
  margin-top: 17px;
  margin-left: 15px;
  margin-right: 13px;
}
.faketabs table{
  height:10px;
  width: 500px;
  font-family: ms ui gothic;
}
#table3{
  border: 0px transparent;
  width: 60%;
  
}
#table1,#table2,#table3{
  font-family: ms ui gothic;
}
#table1 a{
   color: #456b17;
   text-decoration: none;
}
#table2 a{
  color: #395f0a;
  text-decoration: none;
}
#log p{
  color: #456b17;
}
#aqua{
  width: 95%;
}
#img1{
  position: absolute;
  bottom: 75px;
  left:850px;
  backface-visibility: hidden;
  z-index: 100;
}
#img2{
  position: absolute;
  bottom: 75px;
  left:850px;
  z-index: 50;

}
#img1, #img2 {animation: rotation 2s infinite linear; }
@keyframes rotation {
  100%{ transform:rotatey(360deg); }
  
}
.extraheader{
  height: 20px;
  border: 1px solid black;
  background-color: coral;
}
.extrabox{
  height: 210px;
  border: 1px solid black;
  border-top: 1px solid rgb(126, 126, 126);
  background-color: rgb(220, 255, 80);
}
.box{
  height: 250px;
}

#td1, #td2, #td3, #td4 {
  border: transparent;
 }
.subhead table{
  width: 878px;
  border: transparent;
 }
 #pixel{
  margin-top: 20px;
  margin-left: 10px;
  width: 40%;
 }
 #hr2{
  margin-bottom: -25px;
  margin-top: 15px;
}
.subhead{
  background-color: #03a8fa;
    background-image: -webkit-linear-gradient(#6ab09c,#93c1ac,#dde6a4 );
    color: #f4ffff;
    display:inline-block;
    position: relative;
}
.subhead h4{
  color: #f4ffff;
  margin-left: 20px;
  margin-top: 5px;
  font-family: homemade apple;
}
  
  .content h5, .content h4{
    font-family: ms ui gothic;
    color: rgb(88, 69, 52);
    font-size: 11px;
  }
  .content a{
     font-size: 14px;
     color: #175c6b;
     text-decoration: none;
     font-family: ms ui gothic;
     
  }
  .content a:hover{
    text-decoration: UNDERLINE;
 }
  .content hr{
    border: 1px solid #91ad70;
 }
 .content {
  background-image: url(https://s6.ezgif.com/tmp/ezgif-6-3d6536bbf5.jpg);
background-repeat: no-repeat;
background-size: calc(120%);
padding: 10px;

}
.extraheader {
  color: #ffffff;
  background-image: -webkit-linear-gradient(#6ab09c,#93c1ac,#bcd88b );
}
.extraheader p{
  font-family: tahoma;
  font-weight: bold;
  font-size: 10px;
  margin-top: 2px;
  margin-left: 10px;
}
.extrabox{
  background-color: #ffffff;
 }
.stamps{
  display: flex;
  flex-direction: column;
  width: 120%;
 }
 #pixel2{
  width: 40%;
  margin-left: 10px;
 }
 #pixel{
  margin-top: 8px;
  margin-bottom: 2px;
 }
 .albums{
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 5px;
  margin-top: 20px;
 }
 #spaghetti{
  display: flex;
  justify-content: center;
  margin: 5px;
  margin-bottom: -5px;
 }
 #berry{
  width:  120px
 }
 #ayso{
  width:  95px
 }
#td2, #td3, #td4{
            color: #fefff4;
 }
 .pixeltalia{
        display: flex;
        flex-direction: column;
        width: 23%;
        margin-top: 30px;
        margin-left: 40px;
 }
 .misc{
  display: flex;

}
#voiture{
      margin-bottom: 10px;
      margin-left: 0px;
}
#music{
  width: 100%;
  height: 10%;

}
.misc{
  display: flex;

}
.main a{
  width: px;
}
#heatmg{
 margin-left: auto;
 margin-right: auto;
 display: block;
 margin-top: 20px;
 margin: 20px;
 width: 90%;
}
#music{
  width: 100%;
  height: 10%;

}
.main p, .main h3{
 font-family: ms ui gothic;
  margin-left: 20px;
}
#banns{
  position: static;
  width: 50%;
  margin-left: 370px;
  margin-bottom: 10px;
  }
  #td2{
    width: 700px;
    }
    .imgflx3{
    display: flex;
    justify-content: center;
    gap: 10px;
    width: auto;
  }
  #sherlock, #hamilton, #mdzs{
    max-height: 300px;
  }
  .vn{
    display: flex;
    flex-direction: row;
    justify-content:center;
    gap: 10px;
    width: auto;
  }
  .vn img{
    max-height: 300px;
  }
  #imgflx{
    display: flex;
    justify-content: center;
  }
  #intuos{
    max-width: 300px;
    margin-left: 60px;
    margin-bottom: 35px;
  }
  #intuos1{
    width: 300px;
  }