body {
  background-color: rgb(12, 246, 211);
  background-image: linear-gradient(to right, rgb(255, 134, 120), rgb(34, 255, 174));
  margin: 20px;
  user-select: none;
}

body.performance {
  cursor: url("media/cursors/vibratorcurse.png"), grab;
  cursor: url("media/cursors/vibratorclick.png"), grabbing;
  cursor: url("media/cursors/hand.png"), default;
}

body.MIST {
  cursor: url("media/cursors/fan20611.png"), grab;
  cursor: url("media/cursors/vibratorclick.png"), grabbing;
  cursor: url("media/cursors/fan20611.png"), default;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.text {
  position: relative;
  text-align: center;
  padding: 5px;
  z-index: 2;
}


p.index {
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 35px;
  font-weight: 2000;
  color: rgb(254, 252, 252);

  text-align: center;
  -webkit-text-stroke: 1px #000000; 
}

div.construction {
  width: 400px;
  background: repeating-linear-gradient(
    -45deg,
    #000,
    #000 20px,
    #ffd700 20px,
    #ffd700 40px
  );
  border: 10px;
  border-color: black;
  border-style: solid;
}

.right {
  width: 400px;
  margin-left: auto;
  margin-right: 0;
}

.wavy-text {
  filter: url('#wavy');
}

h2 {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  text-shadow: 5px 3px rgb(16, 157, 150);
  color: rgb(0, 253, 143);
  font-size: 50px;
}

h2:hover {
  text-shadow: 3px 3px rgb(32, 149, 178);
  color: rgb(255, 106, 0);
  cursor: url("media/cursors/vibratorcurse.png"), grab;
}

h2:active {
  cursor: url("media/cursors/vibratorclick.png"), grabbing;
}

.clouds text {
  font-family: cambria;
  font-size: 25px;
  font-weight: 900;
  fill: rgb(255, 51, 116);
}

.flower text {
  font-family: cambria;
  font-size: 30px;
  font-weight: 900;
  fill: rgb(242, 249, 29)
}

.butterfly {
  border: 20px dotted rgb(255, 51, 116);
  border-radius: 20%;
  background-image: url("media/butterfly-red-butterfly.gif");
  background-repeat: no-repeat;
  background-position: center;
}

.bubble {

  border-radius: 20%;
  background-image: url("media/poopants.gif");
  background-repeat: no-repeat;
  float: right;
  background-position: right;
  width: 300px;
  height: 300px;
  transition:
    transform 4s;
}

.bubble:hover {
  transform: rotate(-10deg);
}

.bubble text {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 25px;
  fill: rgb(34, 163, 255);
  text-shadow: 1px 1px rgb(5, 44, 42);
  font-weight: 900;
}

.butterfly text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 25px;
  fill: rgb(34, 163, 255);
  text-shadow: 1px 1px rgb(5, 44, 42);
  font-weight: 900;

}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  cursor: url("media/cursors/vibratorcurse.png"), grab;
}

a:active {
  text-decoration: none;
  cursor: url("media/cursors/vibratorclick.png"), grabbing;

}

.border img {

  width: 100%;
  height: auto;
}

.border {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 70%;
  font-size: 1.6rem;
  min-height: 200px;
  z-index: -1;
}

.floatybees {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 70%;
  font-size: 1.6rem;
  min-height: 200px;
}


.transition3 {
  display: inline-block;
  width: 600px;
  height: 400;
  text-shadow: 1px 1px rgb(5, 44, 42);
  background-image: url('media/nuuuvem.gif');
  background-repeat: no-repeat;

  transition:
    transform 4s;
  z-index: 1;
}

.transition3:hover {

  transform: rotate(-10deg);
}


.transition4 {
  width: 600px;

  float: right;
  text-align: right;
  text-shadow: 2px 1px rgb(5, 44, 42);
  background-position: right;
  background-image: url("media/virágok-flowers.gif");
  background-repeat: no-repeat;
  transition: width 2s, transform 4s;
}

.transition4:hover {
  width: 600px;
  transform: rotate(5deg);
}

.transition5 {
  width: 600px;
  text-shadow: 2px 1px rgb(255, 47, 252);
  transition: transform 4s;
}

.transition5:hover {
  width: 600px;
  transform: rotate(-20deg);
}

/*Performance page*/

.fishwoman {
  width: 30%;
  height: 400px;
  background-image: url("media/medieval/fishwoman.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 4s;
}

.fishwoman text {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 40px;
  fill: rgb(65, 244, 172);
  text-shadow: 1px 1px rgb(5, 44, 27);
  font-weight: 900;
}

.MIST text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 30px;
  font-weight: 900;
  fill: rgb(65, 244, 172);
}

.Parallax text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 30px;
  font-weight: 900;
  fill: rgb(65, 244, 172);
}

.transitionMIST {
  width: 100%;
  /* text-shadow: 1px 1px rgb(132, 248, 100);*/
  /*background-image: url('media/nuuuvem.gif');*/
  /*background-repeat: no-repeat;*/

  transition:
    transform 3s;
  z-index: 1;
}

.transitionMIST:hover {
  transform: rotate(15deg);
}

.transitionParallax {
  width: 100%;
  /* text-shadow: 2px 1px rgb(255, 47, 252);*/
  transition: transform 2s;
}

.transitionParallax:hover {
  width: 100%;
  transform: rotate(-20deg);
}

.transitionBlushing {
  width: 100%;
  /*text-shadow: 2px 1px rgb(206, 8, 97);*/
  transition: transform 4s;
}

.transitionBlushing:hover {
  width: 100%;
  transform: rotate(15deg);
}

.Blushing text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 30px;
  font-weight: 900;
  fill: rgb(65, 244, 172);
}

/*MIST*/

p.MIST {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: 300;
  color: rgb(65, 244, 172);
  text-align: left;
}

p.MIST.title {
  font-size: 23px;
  font-weight: 500;
}

div.MIST {
  text-align: center;
  padding: 5px;
  z-index: 999;

}

.Mtext {
  width: 500px;
  margin-left: auto;
  margin-right: 0;
}

.MISTimage {
  float: right;
  width: 35%;
  height: auto;
  border: 3px;
  border-color: rgb(65, 244, 172);
  border-style: solid;
  /*border-radius: 20%;*/
  margin-bottom: 10%;
  margin-left: 20%;
  margin-right: 0;
}

.MISTvideo {
  width: 90%;
  margin: 5% auto;
  border: 3px solid rgb(65, 244, 172);
  /*border-radius: 20%;*/
  overflow: hidden;
  box-sizing: border-box;
}

.MISTvideo iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.9);

  display: none;
  align-items: center;
justify-content: center;

  z-index: 1000;
}

.lightboxImage {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}

.lightboxClose {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 1001;

  font-size: 40px;
  cursor: pointer;
}

.lightboxNext {
  position: absolute;
  right: 30px;
  top: 50%;

  z-index: 1001;

  font-size: 60px;
  cursor: pointer;
}

.lightboxPrevious {
  position: absolute;
  left: 30px;
  top: 50%;
  z-index: 1001;
  font-size: 60px;
  cursor: pointer;
}

.lightboxCredit {
  position: absolute;
  bottom: 15px;
  left: 0;

  width: 100%;
  text-align: center;

  color: rgb(65, 244, 172);
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;

  z-index: 1001;
}

/*Blushing Phantom*/

p.blushing {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: 300;
  color: rgb(244, 113, 65);
  text-align: left;
}

p.blushing.title {
  font-size: 23px;
  font-weight: 500;
}

div.blushing {
  text-align: center;
  padding: 5px;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);

}

.Btext {
  width: 40%;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 150px;
}

.blushingimage {
  float: right;
  width: 35%;
  height: auto;
  border: 3px;
  border-color: rgb(65, 244, 172);
  border-style: solid;
  /*border-radius: 20%;*/
  margin-bottom: 10%;
  margin-left: 20%;
  margin-right: 0;
}

.blushingvideo {
  width: 90%;
  margin: 5% auto;
  border: 3px solid rgb(65, 244, 172);
  /*border-radius: 20%;*/
  overflow: hidden;
  box-sizing: border-box;
}


.blushingvideo iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/*Parallax*/


p.parallax {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: 300;
  color: rgb(65, 244, 172);
  text-align: left;
}

p.parallax.title {
  font-size: 23px;
  font-weight: 500;
}

div.parallax {
  text-align: center;
  padding: 5px;
  z-index: 999;

}

.Ptext {
  width: 500px;
  margin-left: auto;
  margin-right: 0;
}

.parallaximage {
  float: right;
  width: 35%;
  height: auto;
  border: 3px;
  border-color: rgb(65, 244, 172);
  border-style: solid;
  /*border-radius: 20%;*/
  margin-bottom: 10%;
  margin-left: 20%;
  margin-right: 0;
}

.parallaxvideo {
  width: 90%;
  margin: 5% auto;
  border: 3px solid rgb(65, 244, 172);
  /*border-radius: 20%;*/
  overflow: hidden;
  box-sizing: border-box;
}

.parallaxvideo iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Cyzmic swAy */

body.cyzmic {
  margin: 0;
   cursor: url("media/cursors/vibratorcurse.png"), grab;
  cursor: url("media/cursors/vibratorclick.png"), grabbing;
  cursor: url("media/cursors/hand.png"), default;
}

.cyzmicbanner {
    width: 100%;
    height: auto;
    display: block;
}

p.cyzmic {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: 400;
  color: rgb(127, 255, 52);
  text-align: left;
  margin: 20px;
}

p.cyzmic.title {
  font-size: 23px;
  font-weight: 500;
}

div.flex {
  max-width: 100vw;
  display: flex;
  margin-top: 50px;
  margin: 10px;
}

div.sticker {
  width: 30%;
 

}
div.cyzmic {
  text-align: center;
  padding: 5px;
  background-color: rgba(20, 9, 44, 0.1);
  background-image: linear-gradient(to right, rgba(56, 16, 105, 0.6), rgb(184, 2, 62, 0.7));
  border-radius: 2%;
  width: 70%;
  

}

div.cyzmicphotos {
  width: 90%;
  margin: 5px;
  margin-top: 30px;
}


img.sticker {
  width: 90%;
  height: auto;

}

.cyzmicphotos .flex img {
    width: 45%;
    margin: 2.5%;
}

img.cyzmicimage {
  
  width:90%;
  height: auto;
 /* border: 40px;
  border-color: rgb(65, 178, 244);
  border-style: dotted;
  border-radius: 20%;*/
  margin-bottom: 5%;
  margin-top: 5%;
  margin-right: 5%;
  margin-left: 5%;
}

.cyzmicvideo {
  width: 90%;
  margin: 5% auto;
  border: 3px solid rgb(244, 65, 122);
  /*border-radius: 20%;*/
  overflow: hidden;
  box-sizing: border-box;
}

.cyzmicvideo iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.custom-cursor {
  width: 250px;
  position: fixed;
  pointer-events: none;

}

.galleryimage {
  cursor: url("media/cursors/hand.png"), grab;
}

.galleryimage:hover {
  cursor: url("media/cursors/vibratorcurse.png"),grab;
}

.galleryimage:active {
    cursor: url("media/cursors/vibratorclick.png"), grabbing;
}


/*PSIPHON*/

div.flex .heading {
  gap: 20%;
}

h2.psiphon {
  width: 45%;
  margin-right: 30%;

}

div.psiphon {

  width: 35%;
  margin-right: 0;
  justify-content: right;
}
p.psiphon {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: 900;
  color: rgb(0, 0, 0);
  text-align: left;
  margin: 20px;
  margin-top: 200px;
}


.psiphonvideo {
  width: 90%;
  margin: 5% auto;
  border: 3px solid rgb(65, 244, 172);
  /*border-radius: 20%;*/
  overflow: hidden;
  box-sizing: border-box;
}

.psiphonvideo iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}