/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
 */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}



* {
	box-sizing: border-box;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
.muteBtn{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  border-radius:6px;
  width:4.5%;
  height:9%;
  border:4px solid black;
  background:red;
  cursor:pointer;
  font-size:7px;
  font-weight:900;
  line-height:1.05;
  padding:6px;
word-wrap: break-word;
    
  font-family:monospace;
}

.muteBtn pre{
  margin:0;
}

/* Default body styling */
body {
	margin: 0;
	background-image: url('../img/basicimg/bg3.1.webp');
	background-size: cover;
	background-position: top;
	min-height: 100vh;
	overflow-x: hidden;
	transition: background-image 1s ease-in-out;

}

/* A class to apply the hover effect */
body.main.hover-active {
	background-image: url('../img/basicimg/bg7.1.webp');

}


/* Optionally, you can set a class to control hover effect without affecting the original image */
.bg-active {
	background-image: url('../img/basicimg/bg7.1.webp');
	/* New background image */
	bottom: 10%;
	float: right;
}

/* For mobile phones: */
[class*="col-"] {
	width: 100%;
}

.eightyeight {
	border: 3px solid black;
	margin-left:1%;

	float:right;
	position: relative;
	border-style: outset;
}

/* WIZARD */

:root{
--main-color: rgb(230,230,220);
--main-color-bright:rgb(250,250,240);

}
.wizContainer{
	z-index: 4;
	border: 2px solid black;
	display:block;
	width:12.5%;
	height:49.8%;
	
	top:0;
	position: absolute;
	left:0;

	overflow:hidden;
	background-color: var(--main-color);
	/*TODO: OVERFLOW*/

}

.wiz {
	width: 100%;
	height: 100%;
	position: absolute;
}

.wiz img {
	position: absolute;
	display: block;
}

.faceImg {
  width: 47%;
  margin-top: -2%;
  top:19%;
  left:26%;

  z-index: 0;
}
.hatImg {
  width: 100%;
  margin-top: 0%;
  top:0%;
  margin-left: 0%;
  z-index: 0;
}
#wizZone{
height:100%;
margin:0;
width:100vw;
padding:0;
}

.eyeImg {
	width: 2%;
	margin-top: -6%;
	margin-left: 22%;
	z-index: 4;
}

.bodyImg {
  width: 98.5%;
  margin-top: -1%;
  margin-left: 1.5%;
  top:40%;
  z-index: 0;
}

.eyesImg {
  width: 30%;
  left: 32.7%;
  top: 29.3%;

  z-index: 0;
}
.closeButton{
	position:relative;
	right:-78%;
	display:inline-block;
	
  width: 21%;
  height: 10%;
  margin-top: 0%;
  top:0%;
  margin-left: 0%;
  z-index: 0;
  border:1% solid black;
  border-radius: 0;
  background-color:red;

}

.wizardQuestion{
position:absolute;
display: block;
width:79%;
bottom:20%;
font-family: 'Brush Script MT', cursive;
font-size:1.5em;
line-height:0.9;
left:1%;
font-weight:100;
/*background-color:var(--main-color);*/
color:blue;
	text-shadow: 2px 0 white, -2px 0 white, 0 2px white, 0 -2px white,
	1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;


}

.wizardSubmit{
position:absolute;
	right:0;
	display:inline-block;
	color:var(--main-color);
	
  width: 50%;
  height: 10%;
  top:80.5%;
  margin-left: 0%;
  z-index: 0;
  border:1% solid black;
  border-radius: 0;
  background-color:blue;

}
.wizardInput{
position:absolute;
	left:0;
	display:inline-block;
	background-color:var(--main-color-bright);
	box-sizing:border-box;
	
  height: 8%;
  top:90.4%;
  left:-1%;
  z-index: 0;
  border:1% solid black;
  border-radius: 0;
  color:blue;

}

/* ~wizard */

/*friends*/
.friends{
padding-left: 15%;
padding-top: 3%;  
text-shadow: 1px 0 #000000, -1px 0 #000000, 0 1px #000000, 0 -1px #000000,
    1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
    }
/*~friends*/


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

	/* For desktop: */
	.col-1 {
		width: 8.33%;
	}

	.col-2 {
		width: 16.66%;
	}

	.col-3 {
		width: 25%;
	}

	.col-4 {
		width: 33.33%;
	}

	.col-5 {
		width: 41.66%;
	}

	.col-6 {
		width: 50%;
	}

	.col-7 {
		width: 58.33%;
	}

	.col-8 {
		width: 66.66%;
	}

	.col-9 {
		width: 75%;
	}

	.col-10 {
		width: 83.33%;
	}

	.col-11 {
		width: 91.66%;
	}

	.col-12 {
		width: 100%;
	}
}



#musicheader {
	background-color: black;
/*	background-blend-mode: saturation;*/
	mix-blend-mode: none !important;
	position: -webkit-sticky;
}



.header {
	background-blend-mode: color-burn;
	background-color: rgb(203, 0, 81);
	/*mix-blend-mode: difference;*/
	background-image: url('../img/basicimg/bg10.webp');
	/* background-color: #717171; */
	background-size: contain;
	background-attachment: scroll;
	background-position: 0px -65%;
	/* background-position-y:10%; */
	background-size: 127%;

	overflow: hidden;
	position: relative;
	top: 0;
	left: 0px;
	height: 10%;
	width: 100vw;
	margin: 0;
	border: 3px solid transparent;
	cursor: pointer;


}




.footer {
	border-radius: 6%;
	/* background-image: url('../img/basicimg/bg6blk 3.webp'); */
	background-color: rgba(100, 100, 100, 0.6);
	overflow: hidden;
	width: 75vw;
	margin: 0%;
	padding: 1%;
	position: fixed;
	left: 0;
	bottom: 0;
	/* float: right; */
	/* margin-bottom: 12%; */
}



.header h1 {
	width: fit-content;
	position: relative;

	/* left: -1%; */
	color: rgb(203, 0, 81);
	mix-blend-mode: difference;
	border: 3px solid transparent;
	padding: 0.2%;
	font-size: 200%;
	transition: 1s;
	/* border-image: url('../img/basicimg/bg1.webp') 30 space; */
	/* border-color: blue; */
	text-align: left;
	text-shadow: 2px 0 wheat, -2px 0 wheat, 0 2px wheat, 0 -2px wheat,
	1px 1px wheat, -1px -1px wheat, 1px -1px wheat, -1px 1px wheat;
}

#headerlink {
	text-shadow: 2px 0 wheat, -2px 0 wheat, 0 2px wheat, 0 -2px wheat,
	1px 1px wheat, -1px -1px wheat, 1px -1px wheat, -1px 1px wheat;
}

.header h1:hover {
	padding: 1%
}

.links {
	font-size: medium;
}

.link {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0;
}



div#thricendary.links a.mainlink {
	width: 55%;
	color: rgb(255, 0, 0);
	text-shadow: 2px 0 wheat, -1px 0 wheat, 0 1px wheat, 0 -1px wheat,
	1px 1px wheat, -1px -1px wheat, 1px -1px wheat, -1px 1px wheat;
	transition: 1s;
	font-size:1.5em
}
div#thricendary.links a.mainlink:hover {
	font-size: 2em;
}


div#secondary.links a.mainlink {
	color: rgb(255, 0, 0);
	font-size: 1.2em;
	text-shadow: 2px 0 wheat, -1px 0 wheat, 0 1px wheat, 0 -1px wheat,
	1px 1px wheat, -1px -1px wheat, 1px -1px wheat, -1px 1px wheat;
	transition: 1s;
    padding-right:1%;
}
div#secondary.links a.mainlink:hover {
	font-size: 2em;
}

.content {
	border: 1px solid black;
	border-radius: 10%;
	overflow: hidden;
	background-color: rgba(100, 100, 100, 0.6);
	position: absolute;
	right: 5%;
	background-blend-mode: color-burn;
	width: 30%;
}

.content video {
	position: relative;
	right: 35%;
}

.CDLmusic {
	background-image: url('../img/basicimg/bg6.webp');
	background-size: contain;
}

/* img {
border: 3px solid transparent;
padding: 15px;
border-image: url('../img/basicimg/bg1.webp') 50 space;
border-radius: 10px;
} */

a:hover~body {
	background-image: url('../img/basicimg/bg8.webp');
}

p {
	/* color:blue; */
	/* border: 5px solid transpa; */
	/* padding: 15px;
	border-image: url('../img/basicimg/bg1.webp') 30 space; */
border-radius: 10px;
/* width: 80vw; */
/* background-image: url('../img/basicimg/bg3.webp'); */
text-align: justify;
font-size: large;
text-overflow: clip;

/* font-family:  A Std, monospace */
/* transition: color 2 ms; */
}

.p1 {  font-family: 'Times New Roman', serif;
	margin-left: 2%;
	text-align: justify;
	width: 70vw;
	text-shadow: 1px 0 #000000, -1px 0 #000000, 0 1px #000000, 0 -1px #000000,
	1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;

	text-overflow: clip;
	color: white;
}

.mainlink {
	font-size: xx-large;
	font-weight: 600;
}

@keyframes white {
	to {
		color: rgb(255, 255, 255);
	}
}

canvas {
	border: 1px solid black;
}

h3 {
	color: rgb(203, 0, 81);
	border: 3px solid transparent;
	background-color:rgb(50,50,50);
	padding-bottom: 1%;
	top:50%;
	text-align: left;
	text-shadow: 2px 0 #000000, -2px 0 #000000, 0 2px #000000, 0 -2px #000000,
	1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
}



h1 {
	color: rgb(203, 0, 81);
	border: 3px solid transparent;
	padding: 15px;
	text-shadow: 8px 0 wheat, -8px 0 wheat, 0 8px wheat, 0 -8px wheat,
	8px 1px wheat, -8px -1px wheat, 1px -8px wheat, -1px 8px wheat!important;
	transition: 1s;
	font-size:6.5em;

	/* border-image: url('../img/basicimg/bg1.webp') 30 space; */
	text-align: left;
	text-shadow: 8px 0 #000000, -8px 0 #000000, 0 8px #000000, 0 -8px #000000,
	1px 8px #000000, -1px -8px #000000, 1px -8px #000000, -1px 8px #000000;
}

.nerdLinks {
	background-color: #777;
	opacity: 90%;
	color: rgb(255, 204, 0);
	font-weight: 800;
	text-shadow: 1px 0 #000000, -1px 0 #000000, 0 1px #000000, 0 -1px #000000,
	1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
	display: inline-block;

}

h2 {
	color: rgb(193, 0, 71);
	text-shadow: 2px 0 #000000, -2px 0 #000000, 0 2px #000000, 0 -2px #000000,
	1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
}

a {
	text-shadow: 1px 0 #000000, -1px 0 #000000, 0 1px #000000, 0 -1px #000000,
	1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
	color: rgb(204, 0, 91);
	font-weight: 900;

	/* mix-blend-mode:difference; */
}

a:hover {
	color: rgb(94, 30, 255);
}

#cd1 {
	border: 5px solid transparent;
	/* position:absolute; */
	/* top:0; */
	margin: 100px;
	border-radius: 10px;
	border-image: url('../img/basicimg/bg1.webp') 50 space;
	background-image: url('../img/basicimg/bg4.webp');
	background-repeat: round;
	background-size: 150vh
}

#slowscan {
	margin: 2%;
	background-color: white;
	background-image: url(../img/basicimg/horses_sstv.webp);
	background-blend-mode: multiply;
	/* background-blend-mode:luminosity; */
	background-size: 80%;
	background-position: 50% 50%;
}

#FlightToTaiwan {
	width: 95%;
	margin: 2%;
	background-color: white;
	background-size: cover;
	background-image: url(../img/basicimg/PlaneBG.webp);
	background-blend-mode: multiply;
	/* background-blend-mode:luminosity; */
	background-size: 100%;
	background-position: 50% 50%;
}

audio {
	filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(102%);
	/* width: 400px; */
	background-color: rgb(255, 255, 255);
	/* height: 200px; */
	border: 2px solid red;
}

caption {
	text-align: center;
}

.Yellow{
	color: yellow;
	text-shadow: 1px 0 #000000, -1px 0 #000000, 0 1px #000000, 0 -1px #000000,
	1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;>

}
#threedscan {
	margin: 2%;
	background-color: white;
	background-size: cover;
	background-image: url(../img/basicimg/laptop_one.webp);
	background-blend-mode: multiply;
	/* background-blend-mode:luminosity; */
	background-size: 100%;
	background-position: 50% 50%;
}

#sketch_container {
	color: rgb(193, 0, 71);
}

#trigger-btn {
	/* border: 1px solid black; */
	/* border-radius:5%; */
	/* color: white; */
	position: relative;
	float: right;
	top: 1%;
	width: 66px;
	height: 22px;
	/* left: 10%; */

	background-image: url('../img/CDLbutton.gif');
	background-size: 100%;
	background-repeat: round;

	padding-bottom: 1%;

	position: absolute;
	right: 1%;
	display: block;
	font-size: 16px;
}

#blocke {
	color: red;
	border: 1px solid black;
	border-radius: 10px;
	margin: 5%;
	/*background-image: url('../img/basicimg/dlan2\(blk\)\ copy.webp');*/

}

.p5Canvas {
	position: relative;
	left: 7%;


	border: 5px solid transparent;
	margin: 0px;
	border-radius: 3px;
	border-image: url('../img/basicimg/bg1.webp') 50;

	overflow: hidden;
}

.window {
	border: 3px solid black;
	padding: 2%;
	border-radius: 5px;
	background-color: rgba(100, 100, 100, 0.6);
	/* background-blend-mode: color-burn; */
	/* color: red; */
	/* margin: 5%; */
	/* margin-bottom: 30px; */
	height: fit-content;
	/* width: max-content; */
	width: fit-content;
	/* overflow: hidden; */

	overflow: auto;
	/*test */


}
#mr-jobs{
margin:auto;
width:95%;
padding:2%;
}

#contact{
margin:3%;
width:50%;
margin-right: 1%;
display:inline-block;
}
#contactImage{
margin:3%;
margin-left:0%;
width:43%;
display:inline-block;
float:right;
}
#contactImage img{
}

#mlem {

	border: 0px;
	border-top: 7px solid black;
	border-radius: 0%;
	position: relative;
	bottom: 0%;
	z-index: -1;
	/* width: 110%; */
	width: 100%;

	background-color: white;
	display: block;
	font-size: 2em;
	margin-block-start: 0.67em;

	padding-left: 2%;
	font-weight: bold;
	unicode-bidi: isolate;

	--itchio_font_family: Inter;
	--itchio_link_color: #D1D1D6;
	--itchio_gray_back: #f2f2f2;
	--itchio_border_radius: 10px;
	color: var(--textColor);
	font-size: 150%;

}

h6 {
	font-size: 2em;
}


div#LoveUnder.window {
	position: absolute;
	bottom: 3%;
	right: 3%;
	padding: 0;
	background-color: #000000;


	overflow: hidden;
	margin: 5% 0 2% auto;
	width: 30%;
	border: 7px solid black;
	border-radius: 3px;
	float: right;


}




#ilg {
	color: rgb(255, 0, 102);
	text-shadow: 1px 1px #f2f2f2;
	font-size: medium;
	position: relative;
	font-weight: 600;
	background-image: url('../img/basicimg/koe.webp');
	background-color: rgb(224, 210, 206);
	background-blend-mode: exclusion;
	margin: 2%;
	width: 96%;
}

#wacko {
	color: rgb(255, 0, 102);
	text-shadow: 1px 1px #f2f2f2;
	font-size: medium;
	position: relative;
	font-weight: 600;
	background-image: url('../img/basicimg/bg9.webp');
	background-color: rgb(224, 210, 206);
	background-blend-mode: exclusion;
	margin: 2%;
	width: 96%;
}

#CDL1 {
	color: rgb(203, 0, 81);
	font-size: medium;
	font-weight: 600;
	/* background-image: url(../img/basicimg/bg9.webp); */
	background-image: url('../img/basicimg/bg6blk.webp');
	background-color: rgb(224, 210, 206);
	background-blend-mode: exclusion;
	margin: 2%;
	width: 96%;
}


#windowHeader {
	cursor: all-scroll;
	display: block;
	width: 100%;
	color: rgb(203, 0, 81);
	font-size: large;
	font-weight: 600;
	/* padding: 5%; */
	background-size: cover;
	background-color: gray;
	background-image: url("../img/basicimg/bg8.webp");
	background-blend-mode: color-burn
}

div#youtube1.window {


	width: 65%;
	margin: 3%;
	height: 60vh;
}


.maintext {
	width: 70%;
	float: left;
	background-color: rgba(100,100,100,0.5);


}

div#mainWindow.window {
	position: absolute;
	/* Keep absolute positioning for drag functionality */
	right: 2%;
	/* Remove float: right */
	padding: 0%;
	top: 20%;
	width: 300px;
	/* Set a fixed width instead of a percentage */
	margin: 1%;
	overflow: hidden;
	/* Retain overflow as needed */
}

.gifimg {
	width: 30%;
	float: right;
	border: 3px solid black;
	margin-right: 2%;
	margin-left: 2%;

}

div#mainWindow1.window {
	position: absolute;
	/* Keep absolute positioning for drag functionality */
	right: 0%;

	/* Remove float: right */
	padding: 0%;
	top: 25%;
	width: 300px;
	background-image: url('../img/Richart/buble.webp');
	/* Set a fixed width instead of a percentage */

	margin: 1%;
	overflow: hidden;
	/* Retain overflow as needed */
}

div#blogWindow.window {
	position: absolute;
	/* Keep absolute positioning for drag functionality */
	right: 0%;

	/* Remove float: right */
	padding: 0%;
	top: 25%;
	width: 300px;
	background-image: url('../img/basicimg/horses_sstv.webp');
	/* Set a fixed width instead of a percentage */

	margin: 1%;
	overflow: hidden;
	/* Retain overflow as needed */
}

div#mainWindow2.window {
	position: absolute;
	/* Keep absolute positioning for drag functionality */
	right: 0%;

	/* Remove float: right */
	padding: 0%;
	top: 25%;
	width: 300px;
	/* Set a fixed width instead of a percentage */

	margin: 1%;
	overflow: hidden;


	/* Retain overflow as needed */
}
#fancy-style:checked ~ #fancy-stylesheet {
	media: all; /* Enable the fancy stylesheet */
}

div#wackoWindow.window {
	color: rgb(255, 0, 102);
	text-shadow: 1px 1px #f2f2f2;
	font-size: medium;
	background-image: url('../img/basicimg/bg9.webp');
	width: 300px;
	height: 500px;
	overflow: scroll;
	background-color: rgb(224, 210, 206);
	background-blend-mode: exclusion;
	padding: 0;
	position: absolute;
	top: 15%;
	right: 5%;
}


.sideContent{
	display: block;
	right:0;
	width:25%;
	background-color:black;
	position:fixed;
height:100%}
@media only screen and (max-width: 800px) {
	#headerlink{
		display: inline-block;
		width:100%
	}
	.sideContent{
		display: none;
	}
	.mainContent{
		width: 100%
	}
	div#secondary.links a.mainlink {
		padding:0.1%;
		width: 55%;
		/* float: right; */
		/* float:left; */
		color: rgb(255, 0, 0);
		/* mix-blend-mode: difference; */
		font-size: 0.5em;
		text-shadow: 2px 0 wheat, -1px 0 wheat, 0 1px wheat, 0 -1px wheat,
		1px 1px wheat, -1px -1px wheat, 1px -1px wheat, -1px 1px wheat;
		transition: 1s;
	}
	div#secondary.links a.mainlink:hover {
	font-size: 1.2em;
}

	.header {
		background-blend-mode: color-burn;
		background-color: rgb(203, 0, 81);
		mix-blend-mode: difference;
		background-image: url('../img/basicimg/bg7.webp');
		mix-blend-mode: normal;
		background-size: cover;
		background-attachment: fixed;
		background-position: 0px 600px;
		background-size: 127% 200%;


	}

	div#secondary.links a.mainlink {
		width: 20%;
		float: left;
		/*text-align: end;*/
		/*text-overflow: ellipsis;*/
		position: relative;
		/* top: -35px; */
		/* float:left; */
		color: rgb(255, 0, 0);
		/* mix-blend-mode: difference; */
		font-size: 1em;
		text-shadow: 2px 0 wheat, -1px 0 wheat, 0 1px wheat, 0 -1px wheat,
		1px 1px wheat, -1px -1px wheat, 1px -1px wheat, -1px 1px wheat;
		transition: 1s;
	}
	#mainPageText{
	width:100%
	}
	#extraMainText{
	width:100%
	}
	#extraMainText1{
	width:100%;
  background-color: rgba(100,100,100,0.5);
	}
	#mainWindow{
	display:none;
	}
	.p1{
	width:100%
	}

	.footer {
		border-radius: 6%;
		/* background-image: url('../img/basicimg/bg6blk 3.webp'); */
		background-color: rgba(100, 100, 100, 0.6);
		overflow: hidden;
		width: 50%;
		margin: 0%;
		padding: 0%;
		position: fixed;
		left: 0;
		bottom: 0;
		/* float: right; */
		/* margin-bottom: 12%; */
	}

	/* .header {
	mix-blend-mode: normal;
	height: 60px;
	} */
/* div#secondary.links a.mainlink:hover{
display: initial;
} */

#video {
	width: auto;

}

.bgListener {
	display: none;
}

body {
	background-image: url(../img/basicimg/bg10.webp);
	background-position: top;
	background-size: cover;
}

#sketch_container {
	display: none;
}

div#youtube1.window {
	align-items: center;
	width: auto;
}


.eightyeight {
	margin-bottom: 0;
	float: right;
	border: 3px solid black;
	position: relative;
	border-style: outset;
}


.tracklisting {

	font-size: large;
	width: fit-content;
	padding: 1%;
	display: block;
	background-color: rgb(84, 84, 70);
	mix-blend-mode: exclusion;
	color: rgb(247, 227, 3);
	margin-right: 34%;


}



#musicheader {
	background-color: rgb(62, 1, 1);
	background-image: url('../img/basicimg/bg8.webp');
	background-blend-mode: multiply;

	mix-blend-mode: hard-light;
	position: relative;
	padding-left: 3%;
}

div#LoveUnder.window {

	position: relative;
	overflow: hidden;
	left: 0.5%;
	/* margin: 2% 0 2% auto; */
	width: 100%;
	background-color: #000000;
	border: 7px solid black;
	padding: 0;
	display: block;
	float: right;
	bottom: 1%;
}

div#mainWindow.window {
	position: absolute;
	/* Keep absolute positioning for drag functionality */
	right: 2%;
	/* Remove float: right */
	padding: 0%;
	top: 60%;
	width: 100px;
	height: 170px;
	/* Set a fixed width instead of a percentage */
	margin: 1%;
	overflow: hidden;
	/* Retain overflow as needed */
}

div#blogWindow.window {
	display: none;
}



div#mainWindow1.window {
	display: none;
}

div#mainWindow2.window {
	position: absolute;
	/* Keep absolute positioning for drag functionality */
	right: 0%;

	/* Remove float: right */
	padding: 0%;
	top: 25%;
	width: 100px;
	/* Set a fixed width instead of a percentage */

	margin: 1%;
	overflow: hidden;
	/* Retain overflow as needed */
}

div#wackoWindow.window {
	display: none;
}

body {
	touch-action: none;
	/* Prevent default touch behaviors like scrolling */
}

p {
	color: aliceblue;
}

/* EIND VAN MEDIA UHH */
}
.windowBG {
	background-color: rgb(203, 0, 81);
	mix-blend-mode: color-burn;
	opacity: 0.6;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/* Ensure it covers the full height of the parent */
}

div#performance.window {
	width: 65%;
	margin: 3%;

	background-blend-mode: normal;
	opacity: 90%;
	background-image: url('../img/Richart/P52.webp'), url('../img/Richart/p.webp');
	background-size: contain;
	transition: 1.5s;
}

div#performance.window:hover {
	background-blend-mode: color;
}

div.gallery {
	border: 1px solid #ccc;
}

div.gallery:hover {
	border: 1px solid #777;
}

div.gallery img {
	width: 100%;
	height: auto;
}

div.desc {
	padding: 15px;
	text-align: center;

}

* {
	box-sizing: border-box;
}

.responsive {
	background-image: url("../img/basicimg/bg7.1.webp");
	color: white;
	font-weight: 800;
	text-shadow: 1px 0 #000000, -1px 0 #000000, 0 1px #000000, 0 -1px #000000,
	1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
	padding: 0 6px;
	font-size: larger;
	overflow: hidden;
	float: left;
	width: auto;
}

@media only screen and (max-width: 700px) {
	.responsive {
		width: 49.99999%;
		margin: 6px 0;
	}
}

@media only screen and (max-width: 500px) {
	.responsive {
		width: 100%;
	}
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

* {
	box-sizing: border-box
}

/* Slideshow container */
.slideshow-container {
	max-width: 40vw;
	padding: 2%;


	position: relative;
	margin: auto;
}

/* Hide the images by default */
.mySlides {

	display: none;
}

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active,
.dot:hover {
	background-color: #717171;
}

/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}


@keyframes fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

.grow {
	padding: 5px 5px 5px 5px;
	border: 2px solid black;

	color: rgb(193, 0, 71);
	text-shadow: 2px 0 #000000, -2px 0 #000000, 0 2px #000000, 0 -2px #000000,
	1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;

	border-radius: 10px;
	height: 49px;
	width: 22%;
	margin: 5px 1% 5px 1%;
	float: left;
	position: relative;
	/* transition: height 0.5s; */
	transition: all 1.5s;
	/* -webkit-transition: height 0.5s; */
	text-align: center;
	overflow: scroll;
	background-image: url('../img/basicimg/bg6blk.webp');
	background-size: contain;
}

.grow:hover {
	height: 50%;
	/* This is the height on hover */
	width: 40%;

}


#Richart:hover {
	height: 50%;
	/* This is the height on hover */
	width: 40%;
	color: rgb(193, 0, 164);
	text-align: center;
	word-spacing: 20px;
	/* text-align: justify; */
	background-image: url("../img/Richart/buble.webp");
	word-wrap: normal;
}