/** IMPORT */
  /** Fonts */
@import url('https://fonts.googleapis.com/css2?family=Jacquard+12&family=Jacquard+24&family=Macondo&family=Metamorphous&family=Mountains+of+Christmas:wght@400;700&family=Mozilla+Headline:wght@200..700&family=VT323&display=swap');

/** body and structure/text */
/** 
https://us.123rf.com/450wm/elenarolau/elenarolau1603/elenarolau160300061/54550929-checked-square-plaid-vector-seamless-pattern-vertical-and-horizontal-hand-drawn-uneven-crossing.jpg darker richer green grid
https://images.unsplash.com/photo-1712145176570-6cb1d98a126a?q=80&w=1332&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" paper texture */


/** body {
  margin:17%;
  background-image: url("https://us.123rf.com/450wm/turr17/turr171409/turr17140900730/31948248-geometric-vector-pattern-seamless-abstract-texture-for-wallpapers-and-background.jpg");
  background-size:20%;
  background-repeat: repeat;
  background-color: white;
  font-family:"Mozilla Headline";} */   /** WITH PICTURE BG */

body { /** with css pattern */
  background-color: #e0efe1;
  background-image:  repeating-linear-gradient(to right, transparent 0, transparent 3.1666666666666665px, #e0efe1 3.1666666666666665px, #e0efe1 9.5px, transparent 9.5px, transparent 12.666666666666666px), repeating-linear-gradient(to bottom, transparent 0, transparent 3.1666666666666665px, #e0efe1 3.1666666666666665px, #e0efe1 9.5px, transparent 9.5px, transparent 12.666666666666666px), linear-gradient(to bottom, #f1f6ee 1.14px, transparent 1.14px), linear-gradient(to right, #f1f6ee 1.14px, transparent 1.14px) ;
  background-size: 100% 100%, 100% 100%, 38px 38px, 38px 38px;
  background-position: 0 0, 0 0, 0 -0.38px, -0.38px 0;
  padding: 5%;
  font-family:"Mozilla Headline";}
 
nav {
  float:left;
  width: 15%;
  height:100vh;
  position: relative;
  z-index:-10}

.separator {
  float: left;
  width: 3%;
  height: 100vh;
  background-color: white;
}

main {
  position:relative;
  /**border:double; border-color:white; border-radius:25px; border-width:8px;*/
  height: 85vh;
  width: 82%;
  padding: 1em;
  overflow-y: scroll;
  z-index:10;
  }

p { 
  color: black;
  font-family: "Mozilla Headline";
  font-size: 15px;
  text-align:justify;}

#psubtitles {
  text-align:center;
  color:gray;
  font-size: 13px;}
  
h1, h2 {
  margin: 3px;
  color: black;
  font-family: VT323;
  font-size: 40px;}

h3 {  
  margin: 3px;
  color: black;
  font-family: VT323;
  font-size: 25px;}

h4 {
  margin: 3px;
  color: black;
  font-family: "Jacquard 12";
  font-size:25px;}
  
strong {
  background-image: linear-gradient(90deg, #70d48e, #5cbcc4);
    color: transparent;
    background-clip: text;}
    
em {
  background-image: linear-gradient(90deg, #d93021,#ed773b,#f5bb27);
    color: transparent;
    background-clip: text;}
    
.underline {
  text-decoration:underline;}
    
li {
  text-align:left;
  list-style-type: square;
  font-size:13px;}

a, u {
  text-decoration: none;}

details {
  color: black;
  font-family: "Mozilla Headline";
  font-size: 15px;}


/** BACKGROUND BOXES */
.blockline {
  width: 95%;
  display: flex;
  padding: 1%;
  margin: 0%;}

.index-bbox {
  display: grid;
  place-items: end;}
  
.stampbox {
  max-width:60%;
  text-align:center;
  display: inline;
  margin:2%;} 

.box1 { /** white rounded lower opacity COLUMNS */
  width: 40%;
  justify-content:center;
  display: flex;
  border: none;
  border-radius: 5px;
  padding: 1%;
  margin: 3%;
  background-color: rgb(255 255 255 / 0.65);} /** White 65% opacity background */
  
.box2 { /** white rounded */
  width: 40%;
  justify-content:center;
  border: none;
  border-radius: 5px;
  padding: 1%;
  margin: 3%;
  background-color: white;}
  
.box3 { /** white squarish */
  margin: 1%;
  padding: 7%;
  background-color: white;}

.box4 { /** transparente */
  width: 25%;
  text-align:center;
  border: none;
  margin: 10px;
  padding: 1%;}
  
.box5 { /** white rounded lower opacity 100% width*/
  display: flex; flex-direction:column;
  width: 106%; height:100%;
  border: none;
  border-radius: 5px;
  margin:1%;
  padding: 0;
  background-color: rgb(255 255 255 / 0.65);} /** White 65% opacity background */
  
.box6 { /** white rounded 100% width */
  width: 94%; height: 100%;
  border: none;
  display:flex; flex-basis:0;
  border-radius: 5px;
  margin:1%;
  padding:1%;
  background-color: white;}

#chronology {
  border-left:solid; border-left-width:5px; border-left-style: dotted; border-left-color:#c0f5a9;
  margin: 10px;
  padding: 30px;
  background-color: white;}
 
/** MEDIA LOG */

.mediacover { /** FOR MEDIA COVER LOG */
  max-width: 150px;
  height: 190px;
  border:solid; border-width:5px; border-style: dotted; border-color:#c0f5a9;
  padding:5px;
  margin: 5px;}
  
.mediatext { /** FOR MEDIA BLABLA */
  margin:2%;}
  
/** END OF MEDIA LOG */

/** GALLERY */

.galleryimg { /** FOR ART PAGE PICTURE LOGO */
  height: 150px;
  margin: 5px;
  background: #fff;}
  
.galleryimg:hover {
  height: 150px;
  margin: 5px;
  opacity: 0.7;} 

/** END OF GALLERY */

.contentBox-green {
  position: static;
  margin:1%;
  width:90%; height:90%;
  text-align:right;
  border: solid; color: white; 
  padding: 3%;
  background-image: linear-gradient(90deg, #fcedbb, #c8f097, #c0f5a9); /**tender green gradient*/}

/** DRAGGABLE ITEMS */
.draggable-div {
  position:absolute;
  cursor:move}
  
.draggable-divheader {
  padding:10px;
  cursor:move;
  z-index:15;}
  

/** BANNIERE LUTIN FACTIEUX - START */
.subtitle {
  font-family:"Jacquard 12";
  color: white;
  font-size: 50px;}
  
.subtitle span {
    display: inline-block;
    animation: wave 4s ease-in-out infinite;}

.subtitle span:nth-child(1) {
    animation-delay: 0s;}
.subtitle span:nth-child(2) {
    animation-delay: 0.2s;}
.subtitle span:nth-child(3) {
    animation-delay: 0.4s;}
.subtitle span:nth-child(4) {
    animation-delay: 0.6s;}
.subtitle span:nth-child(5) {
    animation-delay: 0.7s;}
.subtitle span:nth-child(6) {
    animation-delay: 0.8s;}
.subtitle span:nth-child(7) {
    animation-delay: 0.9s;}
.subtitle span:nth-child(8) {
    animation-delay: 0.8s;}
.subtitle span:nth-child(9) {
    animation-delay: 0.7s;}
.subtitle span:nth-child(10) {
    animation-delay: 0.6s;}
.subtitle span:nth-child(11) {
    animation-delay: 0.5s;}
.subtitle span:nth-child(12) {
    animation-delay: 0.4s;}
.subtitle span:nth-child(13) {
    animation-delay: 0.3s;}
.subtitle span:nth-child(14) {
    animation-delay: 0.2s;}
.subtitle span:nth-child(15) {
    animation-delay: 0.3s;}
.subtitle span:nth-child(16) {
    animation-delay: 0.4s;}
.subtitle span:nth-child(17) {
    animation-delay: 0.5s;}
.subtitle span:nth-child(18) {
    animation-delay: 0.6s;}
.subtitle span:nth-child(19) {
    animation-delay: 0.7s;}
.subtitle span:nth-child(20) {
    animation-delay: 0.8s;}
.subtitle span:nth-child(21) {
    animation-delay: 0.9s;}
.subtitle span:nth-child(22) {
    animation-delay: 0.8s;}
.subtitle span:nth-child(23) {
    animation-delay: 0.7s;}
.subtitle span:nth-child(24) {
    animation-delay: 0.6s;}
.subtitle span:nth-child(25) {
    animation-delay: 0.5s;}
.subtitle span:nth-child(26) {
    animation-delay: 0.4s;}
.subtitle span:nth-child(27) {
    animation-delay: 0.3s;}
.subtitle span:nth-child(28) {
    animation-delay: 0.2s;}
.subtitle span:nth-child(29) {
    animation-delay: 0.3s;}
.subtitle span:nth-child(30) {
    animation-delay: 0.4s;}
.subtitle span:nth-child(31) {
    animation-delay: 0.5s;}
.subtitle span:nth-child(32) {
    animation-delay: 0.6s;}
    
@keyframes wave {
    0%, 100% {
        transform: translateY(0);}
    50% {
        transform: translateY(-20px);}}
/** BANNIERE LUTIN FACTIEUX - END */

/** BANNIERE DEFILANTE DE BLINKIES - START */
.banniere {
  display: flex;
  height: 20px; 
  width: 100%;
  overflow:hidden;
  gap: 5px;}
  
.banniere-groupe { 
    display: flex;
    will-change: transform; 
    animation: scrolling 60s linear infinite;
  }

.banniere-item {
	height: 100%;
	width: 200px;
	background-size: contain;
	background-repeat: no-repeat;
	overflow:hidden;}

  @keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

.item1 {
  background-image: url("https://64.media.tumblr.com/f2fb53340dd946416c8ddf77758285cb/c83bf0415975f040-f6/s250x400/3bef1c28ee4071f71c3e8f2f1bb28163edb0a341.gifv");}
.item2 {
  background-image: url("https://64.media.tumblr.com/5631467dfd04774afef88bbe54fceda4/44b88cdeb699e68c-e2/s250x400/c625d0515106da6e16948a391d6c1af7272a5df0.gifv");}
.item3 {
  background-image: url("https://64.media.tumblr.com/c26e525067de1a9d4285e451d050bad6/44b88cdeb699e68c-3b/s250x400/09627b04be19ad33c50768c5d13a4df419284a23.gifv");}
.item4 {
  background-image: url("https://64.media.tumblr.com/98272e76ad6b5c2e3c138c06f7a7f6b8/67c914075dd03bb8-c3/s250x400/15392c2d19b8c1cfac239e2c8ff2b9c56ec98bef.gifv");}
.item5 {
  background-image: url("https://64.media.tumblr.com/f29f2708d42dfe76ed7a828a2d2c709f/c83bf0415975f040-e3/s250x400/c8f227c2cf0f86c5623e345127d21a1f987c8ea7.gifv");}
.item6 {
  background-image: url("https://64.media.tumblr.com/dfa7134894c2a3f2d47752885ec78258/46553f7b16d5ae16-bf/s250x400/b495aa6692bde6859d26bb2243ffb1c03dc6017c.gifv");}
.item7 {
  background-image: url("https://pixelsafari.neocities.org/blinkies/web/surfer.gif");}
.item8 {
  background-image: url("https://pixelsafari.neocities.org/blinkies/web/deletetiktok.gif");}
.item9 {
  background-image: url("https://pixelsafari.neocities.org/blinkies/idiotrights.gif");}
.item10 {
  background-image: url("https://pixelsafari.neocities.org/blinkies/werewolf.gif");}
.item11 {
  background-image: url("https://pixelsafari.neocities.org/blinkies/dishwashersafe.gif");}
.item12 {
  background-image: url("https://pixelsafari.neocities.org/blinkies/animal/nudibranch.gif");}

/** BANNIERE DEFILANTE DE BLINKIES - END */

/** ------------------------------- RAINBOW BOX */
.rainbox {
  position:absolute;
  border-radius: 5px;
  background-color: white;
  padding: 3px;}

.rainbox-bar {
  background: linear-gradient(270deg, #ff8c8c, #fff08c, #96e38a, #7fbcf5, #c582d9); 
  border-radius: 5px;
  padding: 3px 0 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;}
  
.rainbox-bar-text {
  font-weight: bold;
  font-size:12px;
  font-family: "Mozilla Headline";
  color: white;
  letter-spacing: 1px;
  text-align: left;}
  
/** STICKY NOTE WITH TEXT */

.stickynote-container {
  padding: 5px;
  margin-bottom: 200px;
  height: 100px;
  position: relative;}

.stickynote-text {
  position: absolute;
  top: 140px;
  margin: 0px 55px;
  width: 350px;
  padding: 10px 60px 30px 70px;
  transform: rotate(2deg);
  transform-origin: top;}
  
  
/** PAGEDOLLS */

.lobster {
  position:fixed;
  left: 550px;
  top: 650px;
  }

.self {
  position: absolute;
  right: 45vw;
  top: 0vh;}

/** -------------------------------- BLOG PARTS ZONELETS */

.right {
  float: right;
  margin-left: 1em;}

.left {
  float: left;
  margin-right: 1em;}

.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;}

@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: white;
  color: black; /* text for titles */
  outline-style: none;
  outline-offset: 0;
  border-radius: 15px;}

#content {
  padding: 10px 5% 20px 5%;
}


/*HEADER STYLE*/
#header {
  background-image: linear-gradient(90deg, #fcedbb, #c8f097, #c0f5a9);
  /*background-color: #8dcc90;*/
  padding: 0 5%;
  border-color: #a9a9a9;
  border-style: none;
  border-radius:15px 15px 0 0;}
  
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: white;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  color: #8dcc90;
  text-decoration: underline;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
}