@font-face {
    font-family: 'bluu';
    src: url('cyberwitches-manifesto/bluunext-bolditalic-webfont.woff2') format('woff2'),
         url('cyberwitches-manifesto/bluunext-bolditalic-webfont.woff') format('woff'),
         url('cyberwitches-manifesto/bluunext-bolditalic.ttf') format('truetype'),
         url('cyberwitches-manifesto/bluunext-bolditalic-webfont.svg#bluu_nextbold_italic') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
font-family: 'VG5000';
    src:    url('type/VG5000-Regular_web.eot');
    src:    url('type/VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
            url('type/VG5000-Regular_web.woff') format('woff'),
            url('type/VG5000-Regular_web.woff2') format('woff2'),
            url('type/VG5000-Regular_web.ttf') format('truetype'),
            url('type/VG5000-Regular_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	background-image: url();
	background-repeat:no-repeat; 
	background-position:bottom;  
	background-position:right; 
	background-attachment:bottom; 
	background-attachment:right; 
	background-color:RosyBrown; 
  background: linear-gradient(to left, ghostwhite, lime, whitesmoke);
}
a:link {
	color: black;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: black;
}
a:hover {
	text-decoration: underline;
	color: white;
}
a:active {
	text-decoration: none;
	color: red;
}

.liengif {
    width: 100%;
    height: 100%; 
    background-image: url(img/cyberwitches.gif);
    justify-self: stretch; 
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    } 


@viewport {
   width: device-width; /* largeur du viewport */
   zoom: 1; /* zoom initial à 1.0 (et clin d'oeil aux fans d'IE6/7) */
}


@media screen and (min-width: 800px) {

.contenant {
  width: 100%; 
  margin-left: auto;
  margin-right: auto;
}

.style1 {font-family: 'Baskervville', cursive; font-weight: 300; }
.style2 {font-family: 'Baskervville', cursive; font-weight: 300, 400; font-size:11px} 
.style3 {font-family: 'Baskervville', cursive; font-weight: 300; font-size:20px}
.style4 {
  font-family: 'Baskervville', cursive;
  font-weight: 200;
  color: #FFF;
  font-size: 12px;
}
.style5 {font-family: 'Baskervville', cursive; font-weight: 300; font-size:12px }
.style6 {font-family: 'VG5000', cursive; font-weight: 300; font-size: 20px;}

.vignette {width: 100px;}

.pic {
  border: 5px;
  border-style: solid;
  border-color: transparent;
}
.pic:hover {
  border: 5px;
  border-style: solid;
  border-color: white;
}
.txt {
  border: 5px;
  border-style: solid;
  border-color: transparent;
}

.wrapper {
  width: 80%;
  display: grid;
  grid-auto-columns: 110px;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  margin-left: 15%;  
}
.CV {  grid-column: 1 / span 7;           grid-row: -5;}

.cyberwitches1 {  grid-column: 3;         grid-row: -4;}
.cyberwitches2 {  grid-column: 4 / span 2;  grid-row: -4;}

.cosmictalisman1 {  grid-column: 2;         grid-row: -3;}
.cosmictalisman2 {  grid-column: 3 / span 2;  grid-row: -3;}

.sigil1 {  grid-column: 5;         grid-row: -3;}
.sigil2 {  grid-column: 6 / span 2;  grid-row: -3;}

.bouche1 {  grid-column: 1;         grid-row: -2;}
.bouche2 {  grid-column: 2 / span 2;  grid-row: -2;}

.w2p1 {   grid-column: 4;              grid-row: -2;}
.w2p2 {   grid-column: 5 / span 2;     grid-row: -2;}

.terrecommune1 {  grid-column: 2;         grid-row: -1;}
.terrecommune2 {  grid-column: 3 / span 2;  grid-row: -1; }

.fictions1 {  grid-column: 5;             grid-row: -1;}
.fictions2 {  grid-column: 6 / span 2;    grid-row: -1;}



details { 
  grid-column: 1 / span 7;   grid-row: 6;
  margin-left: 15%; 
}

.wrapper2 {
  width: 100%;
  display: grid;
  grid-auto-columns: 110px;
  grid-gap: 5px;
  grid-auto-rows: 110px;
}

.tech-ghost1 {  grid-column: 1;           grid-row: -3;}
.tech-ghost2 {  grid-column: 2 / span 2;  grid-row: -3;}

.manieresdetrevivante1 {  grid-column: 2;   grid-row: -2;}
.manieresdetrevivante2 {  grid-column: 3 / span 2;  grid-row: -2; }

.zine1 {  grid-column: 4;                 grid-row: -3;}
.zine2 {  grid-column: 5 / span 2;        grid-row: -3; }

.alphabet1 {   grid-column: 5;            grid-row: -2;}
.alphabet2 {   grid-column: 6 / span 2;   grid-row: -2;}

.spiritisme1 {  grid-column: 1;           grid-row: 1;}
.spiritisme2 {  grid-column: 2 / span 2;  grid-row: 1;}
.essaim1 {  grid-column: 4;               grid-row: 1;}
.essaim2 {  grid-column: 5 / span 2;      grid-row: 1;}

.oracle1 {grid-column: 2;                 grid-row: 2;}
.oracle2 {grid-column: 3 / span 2;        grid-row: 2;}
.teotwawki1 {  grid-column: 5;            grid-row: 2;}
.teotwawki2 {  grid-column: 6 / span 2;   grid-row: 2;}
.blockchain1 {  grid-column: 1;           grid-row: 3;}
.blockchain2 {  grid-column: 2 / span 2;  grid-row: 3;}
.tdla1 {  grid-column: 4;                 grid-row: 3;}
.tdla2 {  grid-column: 5 / span 2;        grid-row: 3;}
.dessin1 {  grid-column: 2;               grid-row: 4;}
.dessin2 {  grid-column: 3 / span 2;      grid-row: 4;}
.penseesgeometriques1 {  grid-column: 5;  grid-row: 4;}
.penseesgeometriques2 {  grid-column: 6 / span 2;  grid-row: 4;}
.sucrerouge1 {  grid-column: 1;           grid-row: 5;}
.sucrerouge2 {  grid-column: 2 / span 2;  grid-row: 5;}
.passagealacte1 {  grid-column: 4;        grid-row: 5;}
.passagealacte2 {  grid-column: 5 / span 2;  grid-row: 5;}
.imagefantome1 {  grid-column: 2;         grid-row: 6;}
.imagefantome2 {  grid-column: 3 / span 2;  grid-row: 6;}
.Conduit1 {  grid-column: 5;              grid-row: 6;}
.Conduit2 {  grid-column: 6 / span 2;     grid-row: 6;}
.Conduit3 {  grid-column: 3;              grid-row: 7;}
.Conduit4 {  grid-column: 4 / span 2;     grid-row: 7;}
.disorderscreenc1 {  grid-column: 1;      grid-row: 10;}
.disorderscreenc2 {  grid-column: 2 / span 2;  grid-row: 10;}
.collab1 {  grid-column: 2;               grid-row: 11 / span 4;
  vertical-align: center;   align-self: stretch;
  background: linear-gradient(to top, transparent, #000000 80%); }
.collab2 {  grid-column: 3 / span 2;      grid-row: 11 / span 3;}

}



@media screen and (min-width: 500px) and (max-width: 800px) {

.contenant {width: 100%;}

.style1 {font-family: 'Baskervville', cursive; font-weight: 300; }
.style2 {font-family: 'Baskervville', cursive; font-weight: 300, 400; font-size:11px;} 
.style3 {font-family: 'Baskervville', cursive; font-weight: 300; font-size:20px;}
.style4 {
  font-family: 'Baskervville', cursive;
  font-weight: 200;
  color: #FFF;
  font-size: 12px;
}
.style5 {font-family: 'Baskervville', cursive; font-weight: 300; font-size:12px; }
.style6 {font-family: 'VG5000', cursive; font-weight: 300; }

.vignette {width: 100px;}

.pic {
  border: 5px;
  border-style: solid;
  border-color: transparent;
}
.pic:hover {
  border: 5px;
  border-style: solid;
  border-color: white;
}
.txt {
  border: 5px;
  border-style: solid;
  border-color: transparent;
}

.wrapper {
  width: 100%;
  display: grid;
  grid-auto-columns: 110px;
  grid-gap: 5px;
}
.CV {  grid-column: 1 / span 4;  grid-row: -8;}

.cyberwitches1 {  grid-column: 1 / span 2 ;  grid-row: -7 / span 2; height: 220px;}
.cyberwitches2 {  grid-column: 3 / span 2;  grid-row: -7;}

.cosmictalisman1 {  grid-column: 1;         grid-row: -5;}
.cosmictalisman2 {  grid-column: 2 / span 2;  grid-row: -5;}

.sigil1 {  grid-column: 2;         grid-row: -4;}
.sigil2 {  grid-column: 3 / span 2;  grid-row: -4;}

.bouche1 {  grid-column: 1;         grid-row: -3;}
.bouche2 {  grid-column: 2 / span 2;  grid-row: -3;}

.w2p1 {   grid-column: 2;              grid-row: -2;}
.w2p2 {   grid-column: 3 / span 2;     grid-row: -2;}

.terrecommune1 {  grid-column: 1;         grid-row: 3;}
.terrecommune2 {  grid-column: 2 / span 2;  grid-row: 3; }

.fictions1 {  grid-column: 2;             grid-row: 6;}
.fictions2 {  grid-column: 3 / span 2;    grid-row: 6;}


details { 
  grid-column: 1 / span 7;   grid-row: 11;
}

.wrapper2 {
  width: 100%;
  display: grid;
  grid-auto-columns: 110px;
  grid-gap: 5px;
  grid-auto-rows: 110px;
}

.alphabet1 {   grid-column: 2;            grid-row: -4;}
.alphabet2 {   grid-column: 3 / span 2;   grid-row: -4;}

.manieresdetrevivante1 {  grid-column: 1;   grid-row: -5;}
.manieresdetrevivante2 {  grid-column: 2 / span 2;  grid-row: -5; }

.tech-ghost1 {  grid-column: 1;           grid-row: -3;}
.tech-ghost2 {  grid-column: 2 / span 2;  grid-row: -3;
  /* background: linear-gradient(to right, transparent, #0CF); */ }
.zine1 {  grid-column: 2;                 grid-row: -2;}
.zine2 {  grid-column: 3 / span 2;        grid-row: -2; }

.spiritisme1 {  grid-column: 1;           grid-row: 1;}
.spiritisme2 {  grid-column: 2 / span 2;  grid-row: 1;}
.essaim1 {  grid-column: 2;               grid-row: 2;}
.essaim2 {  grid-column: 3 / span 2;      grid-row: 2;}

.oracle1 {grid-column: 1;                 grid-row: 3;}
.oracle2 {grid-column: 2 / span 2;        grid-row: 3;}
.teotwawki1 {  grid-column: 2;            grid-row: 4;}
.teotwawki2 {  grid-column: 3 / span 2;   grid-row: 4;}
.blockchain1 {  grid-column: 1;           grid-row: 5;}
.blockchain2 {  grid-column: 2 / span 2;  grid-row: 5;}
.tdla1 {  grid-column: 2;                 grid-row: 6;}
.tdla2 {  grid-column: 3 / span 2;        grid-row: 6;}
.dessin1 {  grid-column: 1;               grid-row: 7;}
.dessin2 {  grid-column: 2 / span 2;      grid-row: 7;}
.penseesgeometriques1 {  grid-column: 2;  grid-row: 8;}
.penseesgeometriques2 {  grid-column: 3 / span 2;  grid-row: 8;}
.sucrerouge1 {  grid-column: 1;           grid-row: 9;}
.sucrerouge2 {  grid-column: 2 / span 2;  grid-row: 9;}
.passagealacte1 {  grid-column: 2;        grid-row: 10;}
.passagealacte2 {  grid-column: 3 / span 2;  grid-row: 10;}
.imagefantome1 {  grid-column: 1;         grid-row: 11;}
.imagefantome2 {  grid-column: 2 / span 2;  grid-row: 11;}
.Conduit1 {  grid-column: 2;              grid-row: 12;}
.Conduit2 {  grid-column: 3 / span 2;     grid-row: 12;}
.Conduit3 {  grid-column: 1;              grid-row: 13;}
.Conduit4 {  grid-column: 2 / span 2;     grid-row: 13;}
.disorderscreenc1 {  grid-column: 2;      grid-row: 15;}
.disorderscreenc2 {  grid-column: 3 / span 2;  grid-row: 15;}
.collab1 {  grid-column: 1;               grid-row: 16 / span 11;
  vertical-align: center;   align-self: stretch;
  background: linear-gradient(to top, transparent, #000000 80%); }
.collab2 {  grid-column: 2 / span 2;      grid-row: 16 / span 11;}

}

@media screen and (min-width: 100px) and (max-width: 500px) and (orientation: portrait) {


a:hover {
  color: grey;
}
.style1 {font-family: 'Baskervville', cursive; font-weight: 300; }
.style2 {font-family: 'Baskervville', cursive; font-weight: 300, 400; font-size:14px;} 
.style3 {font-family: 'Baskervville', cursive; font-weight: 300; font-size:35px; }
.style4 {
  font-family: 'Baskervville', cursive;
  font-weight: 200;
  color: #FFF;
  font-size: 12px;
}
.style5 {font-family: 'Baskervville', cursive; font-weight: 300; font-size:16px; }
.style6 {font-family: 'VG5000', cursive; font-weight: 300; }

.style3 a:link {background-color: white;}
.style3 a:visited {background-color: white;}

.contenant {width: 100%;}

.vignette {width: 100%;}
.liengif {min-height: 500px;} 

.txt {
  border-left: 5px;
  border-top: 0px;
  border-bottom: 0px;
  border-style: solid;
  border-color: transparent;
}

.wrapper {
  width: 100%;
  display: grid;
  grid-auto-columns: 100%;
  grid-gap: 10px;
  grid-auto-rows: auto;
}

.CV {  grid-column: 1;  grid-row: -4;
  /*background: linear-gradient(to bottom, transparent, rgba(220,220,220,.1));*/ }
.CVp {background-color: ;}

.cyberwitches1 {  grid-column: 1;  grid-row: -3; z-index: -1;}
.cyberwitches2 {  grid-column: 1;  grid-row: -3;}

.cosmictalisman1 {  grid-column: 1;  grid-row: -2;  z-index: -1;}
.cosmictalisman2 {  grid-column: 1;  grid-row: -2;  background: linear-gradient(to top, transparent, RosyBrown);}

.sigil1 {  grid-column: 1;  grid-row: 1; z-index: -1;}
.sigil2 {  grid-column: 1;  grid-row: 1;}

.bouche1 {  grid-column: 1;  grid-row: 2; z-index: -1;}
.bouche2 {  grid-column: 1;  grid-row: 2;}

.w2p1 {   grid-column: 1;      grid-row: 3;  z-index: -1;}
.w2p2 {   grid-column: 1;      grid-row: 3;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}

.terrecommune1 {  grid-column: 1;  grid-row: 6; z-index: -1;}
.terrecommune2 {  grid-column: 1;  grid-row: 6; }

.fictions1 {  grid-column: 1;     grid-row: 11;  z-index: -1;}
.fictions2 {  grid-column: 1;     grid-row: 11;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}

details { 
  margin-top: 0.1em;
  grid-column: 1 / span 7;   grid-row: 14;
}
.wrapper2 {
  width: 100%;
  display: grid;
  grid-auto-columns: 100%;
  grid-gap: 10px;
  grid-auto-rows: auto;
}
.manieresdetrevivante1 {  grid-column: 1;  grid-row: -5; z-index: -1;}
.manieresdetrevivante2 {  grid-column: 1;  grid-row: -5; }

.alphabet1 {   grid-column: 1;    grid-row: -4;  z-index: -1;}
.alphabet2 {   grid-column: 1;    grid-row: -4;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}

.tech-ghost1 {  grid-column: 1;   grid-row: -3;  z-index: -1;}
.tech-ghost2 {  grid-column: 1;   grid-row: -3;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));   background: linear-gradient(to right, transparent, #0CF); */ }
.zine1 {  grid-column: 1;         grid-row: -2; z-index: -1;}
.zine2 {  grid-column: 1;         grid-row: -2; }

.spiritisme1 {  grid-column: 1;   grid-row: 1;  z-index: -1;}
.spiritisme2 {  grid-column: 1;   grid-row: 1;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}
.essaim1 {  grid-column: 1;       grid-row: 2;  z-index: -1;}
.essaim2 {  grid-column: 1;       grid-row: 2;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}

.oracle1 {grid-column: 1;         grid-row: 3;}
.oracle2 {grid-column: 1;         grid-row: 3; /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5)); */}
.teotwawki1 {  grid-column: 1;    grid-row: 4;  z-index: -1;}
.teotwawki2 {  grid-column: 1;    grid-row: 4;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}
.blockchain1 {  grid-column: 1;   grid-row: 5;  z-index: -1;}
.blockchain2 {  grid-column: 1;   grid-row: 5;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}
.tdla1 {  grid-column: 1;         grid-row: 6;  z-index: -1;}
.tdla2 {  grid-column: 1;         grid-row: 6;  /*background: linear-gradient(to top, transparent, rgba(250,250,250,.9));*/}
.dessin1 {  grid-column: 1;       grid-row: 7;  z-index: -1;}
.dessin2 {  grid-column: 1;       grid-row: 7;  /*background: linear-gradient(to top, transparent, rgba(250,250,250,.9));*/}
.penseesgeometriques1 {  grid-column: 1;  grid-row: 8;  z-index: -1;}
.penseesgeometriques2 {  grid-column: 1;  grid-row: 8;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}
.sucrerouge1 {  grid-column: 1;   grid-row: 9;  z-index: -1;}
.sucrerouge2 {  grid-column: 1;   grid-row: 9;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}
.passagealacte1 {  grid-column: 1;  grid-row: 10;  z-index: -1;}
.passagealacte2 {  grid-column: 1;  grid-row: 10;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}
.imagefantome1 {  grid-column: 1;  grid-row: 11;  z-index: -1;}
.imagefantome2 {  grid-column: 1;  grid-row: 11;  /*background: linear-gradient(to top, transparent, rgba(220,220,220,.5));*/}
.Conduit1 {  grid-column: 1;      grid-row: 12;  z-index: -1;}
.Conduit2 {  grid-column: 1;      grid-row: 12;  background: linear-gradient(to top, transparent, rgba(220,220,220,.5));}
.Conduit3 {  grid-column: 1;      grid-row: 13;  z-index: -1;}
.Conduit4 {  grid-column: 1;      grid-row: 13;  background: linear-gradient(to top, transparent, rgba(220,220,220,.5));}
.collab1 {  display:none;  z-index: -1;}
.collab2 {  grid-column: 1;       grid-row: 14;}

}

/* 
@media ( min-width: 600px ) {}
@media ( min-width: 1000px ) {}
@media ( min-width: 1220px ) {}
*/ 

@media print{

/* paramètres de la page, choisir le format d'export */
  @page{
    size: A4;
  }
}