@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');


/* --------------------------------- */

body {
    background-image: url(img/fond.png); 
    background-repeat: repeat;
    margin: 0;
    filter: url(#dither); 
    width: 100%;
    height: 100%;
    overflow: hidden;
}

svg{
    display: none;
}

canvas {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    filter: blur(5px);  
    z-index: 22;
}


h1 {
    font-family: 'VT323', monospace;
    color: white;
    font-size: 12em;
    line-height: 70%;
    margin: 0 auto;
    text-align: center;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgb(0, 0, 0);
  text-transform:uppercase;
    image-rendering: pixelated;
    filter: blur(3px);

}

header{
    margin-top: 2%;
}

main{
    margin-top: 0;
}

/* --------------------------------- */

.images{
    height: 1vh;
}

:root {
  --pink: #ffffff;
  --pink-dark: #c3c3c3;
  --tape-gray: #dbd8be;
  --tape-edge-gray: #b7b49d;
  --transparent: rgba(255, 255, 255, 0);
}

.image{
    position: relative;
  background: linear-gradient(
      to bottom right,
      var(--paper-dark),
      20%,
      var(--transparent)
    ),
    var(--paper-color);
  min-width: 250px;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-size) var(--shadow-size) 2px var(--paper-dark);
  margin: auto;
  margin-top: 50px;
  background-color: #ffffff;
  border: 1px solid black;
      --paper-dark: var(--pink-dark);
    --shadow-size: 1px;
    --transparent: rgba(236, 178, 186, 0);
    margin: 0 auto;

}

.image::after{
      content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      var(--transparent),
      50%,
      var(--paper-dark),
      51%,
      var(--transparent)
    ),
    linear-gradient(
      to right,
      var(--transparent),
      50%,
      var(--paper-dark),
      51%,
      var(--transparent)
    );
}

img{
    width: 100%;
}

/* --------------------------------- */

.joy{
    width: 20%;
    margin: 0 auto;
    transform: rotate(8deg);
    top: -30px;
    z-index: 9;
}

.amour{
    width: 15%;
    transform: rotate(-10deg);
    left: -19%;
    top: -300px;
}

.ccs{
    width: 2%;
    transform: rotate(5deg);
    right: -30%;
    top: -750px;
        z-index: 8;
}

.pleurer{
    width: 20%;
    margin: 0 auto;
    transform: rotate(-10deg);
    right: -20%;
    top: -1000px;
}

.teuf{
     width: 15%;
    transform: rotate(12deg);
    left: -35%;
    top: -1450px;
}

.vaurien{
    width: 20%;
    margin: 0 auto;
    transform: rotate(-1deg);
    top: -1550px;
    z-index: 9;
}

/* --------------------------------- */

.sticker{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid black;
}

.afa1{
    margin: 0 auto;
    width: 70px;
    transform: rotate(3deg);
    left: -20%;
    top: -1670px;
}

.nuke{
    margin: 0 auto;
    width: 100px;
    transform: rotate(-5deg);
    left: 40%;
    top: -1900px;
}

.acab{
    margin: 0 auto;
    width: 100px;
    transform: rotate(10deg);
    left: -18%;
    top: -2350px;
    z-index: -1;
}

.ig{
    margin: 0 auto;
    width: 100px;
    transform: rotate(10deg);
    left: 35%;
    top: -1950px;
    z-index: 23;
        filter: blur(1px);
}

/* --------------------------------- */

.tape-section {
  position: absolute;
  width: 100%;
}

.tape-top{
    position: absolute;
    height: 4vmin;
    top: -5px;
    width: 110%;
    background-color: var(--tape-gray);
    border-right: 1px dotted var(--tape-edge-gray);
    border-left: 1px dotted var(--tape-edge-gray);
    opacity: 0.5;
}

.tape-section:first-of-type {
  top: 0;
}

.tape-section:last-of-type {
  bottom: 0;
}

.tape-section::before,
.tape-section::after {
  content: "";
  width: 10vmin;
  height: 4vmin;
  position: absolute;
  background-color: var(--tape-gray);
  opacity: 0.5;
  border-right: 1px dotted var(--tape-edge-gray);
  border-left: 1px dotted var(--tape-edge-gray);
}

.tape-section:last-of-type::after {
  transform: rotate(-45deg);
  right: -4vmin;
  top: -3vmin;
}

.tape-section:first-of-type::before {
  transform: rotate(-45deg);
  left: -4vmin;
}

.tape-section:first-of-type::after {
  transform: rotate(45deg);
  right: -4vmin;
  top: 0;
}

.tape-section:last-of-type::before {
  transform: rotate(45deg);
  left: -4vmin;
  bottom: 0;
}


@media print{
    @page{
        size: A4;
        
    }
}