@font-face{

  font-family: "passenger";
  src: url("fonts/passenger/PassengerLight.otf");
  font-style: normal;
  font-weight: 100;
}

@font-face{

  font-family: "passenger";
  src: url("fonts/passenger/PassengerLightItalic.otf");
  font-style: italic;
  font-weight: 100;
}

@font-face{

  font-family: "passenger";
  src: url("fonts/passenger/PassengerRegular.otf");
  font-style: normal;
  font-weight: 400;

}

@font-face{

  font-family: "passenger";
  src: url("fonts/passenger/PassengerRegularItalic.otf");
  font-style: italic;
  font-weight: 400;
}

@font-face{

  font-family: "fajardose";
  src: url("fonts/missfajardose.ttf");
}

body{

  overflow: hidden;
  cursor: url("hdjressources/muglerizedcursordown.png"), auto;
}

body{

  background-color: none;
}

a:hover,
*:hover{

   cursor: url("hdjressources/muglerizedcursordown.png"), auto;
}

div:hover{

  cursor: url("hdjressources/muglerizedcursordown.png"), auto;
}

h1:hover{

  cursor: url("hdjressources/muglerizedcursordown.png"), auto;
}

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

:root{

  --pink: #ffa0f4;
  --font-size: 50px;
  ---big-font-size: 30px;
  --font-courant: 14px;
  --line-height: 20px;
  --big-line-height: 25px;
}

a{

  color: black;
  text-decoration: none;

}

h1{
	font-family: "fajardose";
	font-weight: 100;
	font-size: 60px;
	margin-left: 20px;
	margin-top: 20px;
  max-width: 550px;
  -webkit-text-stroke-width: 0.07rem;
  -webkit-text-stroke-color: inherit;
}

h2{
  font-family: passenger;
  font-weight: 100;
  font-size: var(--font-size);
  margin-left: 40px;
  max-width: 600px;
  line-height: var(--big-line-height);
}

a:hover,
h2:hover{

  color: var(--pink);
  cursor: url("hdjressources/muglerizedcursor.png"), auto;
}

nav{
  font-family: fajardose;
}

nav > *{

  position: fixed;

}


#infos{

  top: 25px;
  right: 25px;
  font-size: var(--font-size);
   -webkit-text-stroke-width: 0.05rem;
}

#subtitle{

  font-size: 40px;
  left: 210px;
  pointer-events: none;
  top: 73px;
}

#faggyfag{

  position: fixed;
  z-index: -1;
  top: 25px;
  right: 50px;

}

#faggyfag img{

  display: block;
  margin: 0 auto;
  width: 100%;
}

#cumingslowlyweb{

  position: fixed;
  z-index: 0;
  bottom: 25px;
}

#cumingslowlyweb img{

  display: block;
  margin: 0 auto;
  width: 97%;
}

#cumingslowlymobile img{

  display: none;
}
}

/* DON'T TOUCH */

.project .wrapper{

	display: none;
}

.project.open .wrapper{

	display: block;
}


.project.open h2{

  color: var(--pink);
}

body.openState #faggyfag img{

  max-width: 500px;
  margin-left: 20px;
  position: fixed;
  margin-top: 280px;

}

@media screen and (max-width: 630px){

:root{

  --pink: #ffa0f4;
  --font-size: 40px;
  ---big-font-size: 30px;
  --font-courant: 14px;
  --line-height: 20px;
  --big-line-height: 25px;
}

a{

  color: inherit;
  text-decoration: none;

}

h1{
  font-family: "fajardose";
  font-weight: 100;
  font-size: 40px;
  margin-left: 20px;
  margin-top: 20px;
  max-width: 550px;
  -webkit-text-stroke-width: 0.07rem;
  -webkit-text-stroke-color: inherit;
}

a:hover,
h2:hover{

  color: var(--pink);
  cursor: pointer;
}

nav{
  font-family: fajardose;
}

nav > *{

  position: fixed;

}

#infos{

  top: 20px;
  right: 25px;
  font-size: var(--font-size);
   -webkit-text-stroke-width: 0.05rem;
}

#subtitle{

  font-size: 35px;
  left: 140px;
  pointer-events: none;
  top: 55px;
}

#faggyfag{

  position: fixed;
  z-index: -1;
  bottom: 60px;

}

#faggyfag img{

  display: block;
  margin: 0 auto;
  width: 80%;
}

#cumingslowlyweb{

  display: none;
}

#cumingslowlymobile{

  position: fixed;
  z-index: 0;
  bottom: 25px;
}

#cumingslowlymobile img{

  display: block;
  margin: 0 auto;
  width: 95%;
}
}