body{
user-select: none;
background:linear-gradient(90deg, pink 1%, transparent 5%, cyan 7%, transparent 9%, magenta 10%, transparent 13%, yellow 3%, transparent 17%, black 19%, transparent 0%, #fff 23%, transparent 25%, #fff 27%, transparent 29%, pink 31%, transparent 33%);
background-color: white;
background-size: 60px 100px;
}

  .cursor-left {cursor: w-resize;}
  .cursor-right {cursor: e-resize;}
  .cursor-ok {cursor: initial;}
  
#blabla{
  color: black;
  z-index: 1;
    position: fixed;
    padding: 1vw;
    left: : 0%;
    top: 0%;
    width: 25vw;
}
#news{
  color: black;
  z-index: 12;
    position: fixed;
    padding: 2vh;
    left: : 0%;
    bottom: 0%;
    width: 25vw;
    text-align: center;
}
#news-mobile{display: none;}


.style_p{    font: 1.2vw  "Oswald", serif;
    font-weight: 300;
    line-height: 1.4vw;}
img.myImg{
  height:94vh;
  z-index: 14;
  position: fixed;
  pointer-events: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);}

.no_show{display: none;}
.show{display: block;}
.ciao{animation: ciao-animation .8s linear forwards;}
.in-ciao{animation: in-ciao-animation .8s linear forwards;}
.pas-ciao{transform: translateY(-130%)rotate(0deg);}

@keyframes ciao-animation {
  0% {transform: translateY(0%)rotate(0deg);}
  20% {transform: rotate(4deg);}
  50% {transform: translateY(-50%)rotate(9deg);}
  70% { transform: translateY(-100%)rotate(0deg);}
  100% { transform: translateY(-130%)rotate(0deg);}
}
@keyframes in-ciao-animation {
  100% {transform: translateY(0%)rotate(0deg);}
  90% { transform: translateY(0%)rotate(-1deg);}
  70% {transform: rotate(4deg);}
  50% {transform: translateY(-50%)rotate(9deg);}
  20% { transform: translateY(-100%)rotate(0deg);}
  0% { transform: translateY(-130%)rotate(0deg);}
}

.ref{
  color: black;
  z-index: 15;
    position: absolute;
    float: top;
    transform: rotate(35deg);
    right: 0%;
    top: 15%;
    width: 25vw;
    font: 1.5vw  "Loved by the King", cursive;
    line-height: 1.7vw;
    text-align: center;
}
#signature{pointer-events: none;width: 70%;position: relative;top:0%;left:0%;z-index:1;filter: grayscale(1);margin-bottom: -0.5vw;margin-right: 0vw;}
#block_img{
  margin: 0;
  top: 0;
  left:0;
width: 100%;
height: 100%;
z-index: 10;
display: block;
position: fixed;
text-align: center;
}

#egg {
      position: fixed;
      display: flex;
    justify-content: center;
    align-items: center;
      top: 12vh;
      left:5vw;
      z-index: 33;
      color: white;
      text-align: center;
      width: 3.1vw;
      height: 4.5vw;
      background-color: black;
      font: 1.2vw  "Oswald", serif;
      font-weight: 300;
      transform: rotate(10deg);
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
#egg:hover{transform: rotate(0deg);}

#paper {
    background: white;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.05);
    background-image: linear-gradient(hsla(0,0%,0%,.025), hsla(0,0%,100%,.05) 33%, hsla(0,0%,0%,.05) 33%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,0%,.05) 67%, hsla(0,0%,100%,.025));
    position: fixed;
    right:0vw;
    height: 94vh;
    width: 40vw;
    padding: 1vw;
     overflow: scroll;
     float: right;
     
}
#paper-all {
    position: fixed;
    right:10vw;
    height: 94vh;
    width: 55vw;
}

#cv {margin-top:10em;}
#colophon {margin-top:5em;}
.txt-cv::before {content: "• ";display: inline;}
#parcours {column-count: 2;}
#expo {column-count: 1;}
#residence {column-count: 2;}
#autres {column-count: 1;}
.subtitle{font: 1vw "Oswald", serif;margin-left:0.5em;font-weight: 300;
text-align: center;}
ul, li {
    margin: 0;
    list-style-type: none;
}
li {
    display: list-item;
    text-align: -webkit-match-parent;
    unicode-bidi: isolate;
}
article.list-items {
    display: grid;
    grid-template-columns: auto auto;
    grid-column: 1;
    column-gap: 0em;
}
.date-cv {grid-column: 2;
  font: 0.8vw Libre Caslon Display, serif;margin-left:0.5em;
}
.txt-cv {grid-column: 1;margin:0;}
.txt-cv::before {
    content: "• ";
    display: inline;
}
.twist_font{font-family: Libre Caslon Display, serif;}
.tearoff {width: 15vw;}
p.tearoff {
  
  background-color: #fff;
  background-clip: padding-box;
  border-right: 0.15vw dotted #fff;
  float: left;
  width:10.8vw;
  text-align: center;
  margin-top: 0vw;
  margin-bottom: 0.15vw;
  padding: 1vw;
  -webkit-filter: drop-shadow(0.05em 0.05em 0.05em hsla(0,0%,0%,.15));
}
span.ticket{
  font: 1.2vw "Oswald", serif;margin-left:0.5em;font-weight: 300;
  display: block; }
p.tearoff:hover {
  animation: tearoff 1s both;
  cursor: default;
  transform-origin: 0 100%;
    z-index: 30;
  -webkit-filter: drop-shadow(0.05em 0.05em 0.05em hsla(0,0%,0%,.15));
  
}
@keyframes tearoff {
  50% { margin-left: 0;z-index: 10; }
  60% { transform: rotate(5deg);z-index: 10; }
  100% { margin-left: -1em;z-index: 10; }
}
a{text-decoration: none;color: black;}
a:hover{color: grey;}
@media only screen and (max-width: 480px) {
img.myImg{
  width:95vw;
  height: auto; 
  pointer-events: none;

}
.ref{
 right: 0%;
 font: 5vw  "Loved by the King", cursive;
    top: 87%;
    width: 100vw;
    line-height: 5vw;
    text-orientation: top;
    transform: rotate(8deg); 
    color: black;
}

#egg {
    
      top: 6vh;
      left:80vw;
      width: 3.1em;
      height: 4.5em;
      font: 4vw  "Oswald", serif;
      font-weight: 300;
      transform: rotate(10deg);
    }

#egg:hover{transform: rotate(0deg);}
#signature{width: 60%;top:0%;left:0%;z-index:1;filter: grayscale(1);margin-bottom: -1.5vw;margin-right: 0vw;}
#blabla{
    padding: 1vw;
    left: : 0%;
    top: 0%;
    width: 100vw;
}
#news{
  color: black;
  z-index: 15;
    position: fixed;
    padding: 2vh;
    left: : 0%;
    bottom: 0%;
    width: 90vw;
    text-align: center;
}
#blabla.style_p{    font: 4.5vw  "Oswald", serif;
    font-weight: 300;
    line-height: 4.5vw;}
.style_p{    font: 5vw  "Oswald", serif;
    font-weight: 300;
    line-height: 5.5vw;}
#paper {
    position: fixed;
    right:0vw;
    height: 56vh;
    width: 84vw;
    margin: 0;
    top: 0vh;
    padding: 6vh;
     overflow: scroll;
    
     
}
#paper-all {
    position: fixed;
    right:0vw;
    top: 0vh;
    padding: 2vw;
    height: 90vh;
    width: 90vw; z-index: 30;
}
article.list-items {
    column-gap: 0em;
}
.tearoff {width: 90vw;top: 67.5vh;}
p.tearoff {
  border-top: 0.5vw dotted #fff;
  float: left;
  height: 19vh;
  width:10vw;
  margin-top: -1.1vw;
  margin-left: 0vw;
  margin-right: 2vw;
  text-align: center;
  padding: 4vw;
  position:relative;
  -webkit-filter: drop-shadow(0.1em 0.1em 0.1em hsla(0,0%,0%,.15));
}
span.ticket{
  font: 5vw "Oswald", serif;margin-left:0.5em;font-weight: 300;
  display: block;
  transform: rotate(90deg);}
.date-cv {grid-column: 2;
  font: 3.5vw Libre Caslon Display, serif;margin-left:2em;
}
#parcours {column-count: 1;}
#expo {column-count: 1;}
#residence {column-count: 1;}
.subtitle{font: 4vw "Oswald", serif;font-weight: 300;}
#news-mobile{display:block;text-align: center;margin-bottom: 4vh;margin-top: -4vh;}
#news{display: none;}
#cv {margin-top:0em;}
@keyframes tearoff {
  50% { margin-top: 0;z-index: 10; }
  60% { transform: rotate(5deg);z-index: 10; }
  100% { margin-top: 1em;z-index: 10; }
}