html,
body {
	height: 100%;
	padding: 0;
	margin: 0;
}

.background {
	background-color:black;
}

.background-2 {
	background-image: url("images/pattern.png");
	animation: moveBackground 20s linear infinite;
	background-size: 370px 370px;
}

.background-lines {
	background-image: url("images/pattern2.png");
	animation: moveBackground2 5s linear infinite;
	background-size: 200px 200px;
}

.background-pens {
	background-image: url("images/pattern3.png");
	animation: moveBackground2 5s linear infinite;
	background-size: 200px 200px;
}

.background-cameras {
	background-image: url("images/pattern4.png");
	animation: moveBackground2 5s linear infinite;
	background-size: 200px 200px;
}

.background-brickwall {
	background-image: url("images/pattern5.png");
	background-size: 200px 200px;
}

.background-wip {
	background-image: url("images/wipbg.png");
	animation: moveBackground2 2s linear infinite;
	background-size: 200px 200px;
}

.background-brain {
	background-image: url(images/patternbrain.png);
	background-size: 500px 500px;
}

.all-windows {
	display: flex;
	height: 100vh;
	gap: 20px;
}

.left {
	width: 20%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.top-left {
	flex: 0 0 40%;
	background-color: white;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 2px solid white;
	gap: 2px;
}

.bar-top-left {
	flex: 0 0 7.5%;
	background-color: black;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.window-top-left {
	flex: 1;
	background-image: url("images/pattern.png");
	animation: moveBackground 20s linear infinite;
	background-size: 370px 370px;
	overflow-y: auto;  
	overflow-x: hidden;
	scrollbar-width: none;
}

.bottom-left {
	flex: 1;
	background-image: url("images/pattern2.png");
	animation: moveBackground2 5s linear infinite;
	background-size: 200px 200px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 2px solid white;
}


.middle {
	width: 60%;
	min-height: 100%;
	height: auto;
	background-color: white;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 2px solid white;
	gap: 2px;
	margin: 0 auto;
}

.bar {
	flex: 0 0 3%;
	background-color: black;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
}

.window-middle {
	flex: 1;
	background-image: url("images/pattern.png");
	animation: moveBackground 20s linear infinite;
	background-size: 370px 370px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	place-items: center; 
	padding: 7%;
}

.window-middle-artgallery {
	flex: 1;
	background-image: url("images/pattern.png");
	animation: moveBackground 20s linear infinite;
	background-size: 370px 370px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	place-items: center;   
	padding: 20%;
	position: relative;
}

.window-middle-brainarchive {
	flex: 1;
	background-image: url("images/pattern.png");
	animation: moveBackground 20s linear infinite;
	background-size: 370px 370px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	place-items: center;   
	padding: 20%;
	position: relative;
}

.thought-grid {
	display: grid;
	grid-template-columns: repeat(3, auto);
	column-gap: 100px;
	justify-content: center;
	overflow: hidden;
}

.thought-text img {
	width: auto;
	max-width: 300px;
	height: auto;
	display: block;
	transition: transform 0.2s;
	margin: 0 auto;
}

.thought-text img:hover {
	transform: scale(1.3);
}

.thought-text a {
	display: inline-block;
	width: 300px;
	height: 200px;
}

.thought-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	font-family: "Salsa";
	font-size: 20px;
	text-align: center;
	color: white;
	max-width: 200px;
	margin: 0 auto;
	text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
             1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

.brain-container {
	padding-top: 350px;
}

.grid-section {
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	max-width: 30%;
	padding: 30px;
}

.grid-section h2 {
  color: white;
  font-family: "Salsa";
  font-size: 32px;
  margin-bottom: 20px;
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
  row-gap: 10px;
  padding: 10px;
  justify-content: center;
}

.grid-container img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid white;
  filter: grayscale(100%) brightness(80%);
}

.grid-container img:hover {
	filter: grayscale(0%) brightness(100%);
}

.floating-text {
	  position: absolute;
	  top: 15%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  font-size: 25px;
	  font-family: "Salsa";
	  color: white;
	  text-align: center;
	  padding: 0 10px;
	  width: 90%
}

.home-icon img {
	margin: 0;
	padding: 0;
	width: 250px;
	height: auto;
	transition: transform 0.2s;
}

.home-icon img:hover {
  transform: scale(1.1) rotate(-10deg);
  cursor: pointer;
}

.right {
	width: 20%;
	height: 100%;
	background-color: white;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: 2px solid white;
	gap: 2px;
}

.window-right {
	flex: 1;
	background-image: url("images/pattern2.png");
	animation: moveBackground2 5s linear infinite;
	background-size: 200px 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.linkbutton {
	display: inline-block;
	cursor: pointer;
	transform-origin: left center;
	transition: transform 0.2s;
}

.linkbutton img {
	width: 70%;
	height: auto;
	display: block;
}

.linkbutton:hover {
	transform: scale(1.1);
	cursor: pointer;
}

@keyframes moveBackground {
	from {background-position: 0 0;}
	to {background-position: 0 370px;}
}

@keyframes moveBackground2 {
	from {background-position: 0 0;}
	to {background-position: 200px 0;}
}

.bar-img {
	width: 170px;
	height: auto;
	margin: 0;
}

.bar-menu {
	width: 170px;
	height: auto;
	float: right;
	margin: 0;
}

.bubble {
	width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
  	margin-right: auto;
}

.kdt_float {
	width: 205px;
	height: auto;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
0% {
	transform: translateY(0);
}
50% {
	transform: translateY(20px);
}
100% {
	transform: translateY(0);
}
}

.bubble-container {
	position: relative;
	width: 100%;
	height: auto;
}

.bubble-text-main {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 15px;
	font-family: "Salsa";
	color: black;
	text-align: center;
	padding: 0 10px;
	width: 90%
}

.bubble-text-sub {
	position: absolute;
	top: 37%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 13px;
	font-family: "Salsa";
	color: rgb(0, 0, 0);
	text-align: center;
	padding: 0 10px;
	width: 90%
}

.ad img {
	width: 260px;
	height: auto;
	transition: transform 0.2s;
}

.ad img:hover {
	transform: scale(1.05);
	cursor: pointer;
}

.back-button {
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 999;
}

.back-button img {
	width: 100px;
	height: auto;
	transition: transform 0.2s ease;
}

.back-button:hover img {
	transform: scale(1.2);
	cursor: pointer;
}

.art-showcase {
	width: auto;
	height: 700px;
}

.divider {
	width: 300px;
	height: auto;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 20px;
}

.board-container {
	position: relative;
	width: 1200px;
	height: auto;
	padding-top: 100px;
	margin: 0 auto;
}

.board-bg,
.board-strings {
	width: 100%;
	display: block;
}

.board-strings {
	position: absolute;
	top: 100px;
	left: 0;
	pointer-events: none;
	z-index: 5;
}

.board-piece {
	position: absolute;
	display: block;
	z-index: 2;
}

.board-piece img {
	transition: transform 0.2s, filter 0.2s;
}

.board-piece:hover img {
	cursor: pointer;
	filter: drop-shadow(7px 6px 0 rgba(0, 0, 0, 0.5));
	transform: scale(1.05);
}

.board-piece:hover{
	z-index: 6;
}

.map-piece {
	position: absolute;
	display: block;
	z-index: 2;
}

.map-piece img {
	transition: filter 0.2s;
	width: 240px;
}

.map-piece:hover img {
	cursor: pointer;
	filter: brightness(1.2);
}

.map-piece:hover{
	z-index: 6;
}

.polaroid {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.board-piece-big {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	font-family: "Caveat";
}

.paper-wrapper-2 {
	position: relative;
	width: 1000px;
}

.paper-wrapper-3 {
	position: relative;
	width: 1300px;
}

.paper-bg {
	width: 100%;
	display: block;
}

.paper-content {
	position: absolute;
	top: 5%;
	bottom: 5%;
	left: 20%;
	right: 25%;
	padding: 20px;
	overflow: auto;
	font-size: 20px;
	line-height: 0.5;
}

.paper-content-2 {
	position: absolute;
	top: 7%;
	bottom: 5%;
	left: 18%;
	right: 18%;
	padding: 20px;
	overflow: auto;
	font-size: 18px;
	line-height: 1;
	font-family: "Special Elite";
	
}

.paper-content-3 {
	position: absolute;
	top: 8%;
	bottom: 5%;
	left: 31%;
	right: 31%;
	padding: 20px;
	overflow: auto;
	font-size: 18px;
	line-height: 1;
	font-family: "Special Elite";
}

.brain-content {
	position: absolute;
	top: 18%;
	bottom: 12%;
	left: 25%;
	right: 25%;
	padding: 20px;
	overflow: auto;
	font-size: 20px;
	line-height: 1;
	font-family: "Salsa";
	color: #622f41;
}

.brain-content img {
	width: 100%;
	height: auto;
}

.paper-content-3 ul {
	line-height: 1.3;
}

.paper-content-2 ul {
	line-height: 1.3;
}

.paper-content ul {
	line-height: 1;
	font-size: 25px;
}

.button-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 3px;
	margin: 17px;
	justify-items: start;
}

.button-grid a img {
	width: 88px;
	height: 31px;
	display: block;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.button-grid a img:hover {
	transform: scale(1.1) translateY(-3px);
	filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5));
}

.casefile-link {
	color: black;
	text-decoration: none;
}

.casefile-link:hover {
	text-decoration: underline;
}

.welcome-gif {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.normalsite-gif {
	position: absolute;
	top: 43%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.nomobile-gif {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.enter-button {
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
}

.enter-button img {
	display: block;
	width: 300px;
	height: auto;
	transition: border 0.2s;
}

.enter-button img:hover {
	border: 3px solid white;
	z-index: 1;
}