#entryOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;	
  backdrop-filter: blur(10px); /* the blur */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  display:flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

#entryPiano{
	position: absolute;
	top: 50%;
	left: 50%;
	scale:5;
	transition:.2s;

}
	#entryPiano:hover{
	scale:6;
	transition:.2s;
	cursor:pointer;	
	

}

.enterButton {
    font-size: 60px;
    background:none;
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    border: none;
	margin-top:10%;
}


.skip{
	position:absolute;
	top:5%;
	background-color: none;
	color:white;
	transition:.2s;
}

.skip:hover{
	scale:1.2;
	transition:.2s;
	cursor:pointer;
}

.swoop {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.1);
	opacity: 0;
	animation: swoopIn 4.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards,
			   flyOut 0.3s cubic-bezier(0.7, 0, 1, 1) 4.4s forwards;
}

  
@keyframes swoopIn {
	100% {
		transform: translate(-50%, -50%) scale(3);
		opacity: 1;
	}
}
@keyframes flyOut {
	100% {
		transform: translate(-50%, -50%) scale(6);
		display:none;
		opacity: 0;
	}
}




.entrance{
	animation: entrance .5s linear 4.4s 1 forwards;
	opacity:0;
}
@keyframes entrance{
	1%{
		scale:0;
		opacity:.5;
	}
	50%{
		scale:.5;
	}
	100%{
		scale:1;
		opacity:1;
	}
}
.entranceIcons{
	animation: entranceIcons .5s linear 4.4s 1 forwards;
	opacity:0;
}
@keyframes entranceIcons{
	1%{
		scale:0;
		opacity:.5;
	}
	50%{
		scale:.5;
	}
	100%{
		scale:1;
		opacity:1;
	}
}

#header{
	display:block;
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
  }
  
img{
	filter:grayscale(100%)
}
h1{
	text-align: center;
	font-size: 2.5rem;
    margin-bottom: 20px;
}

#enter{
	text-align: center;
}

body {
  background-image: url("media/mickey.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; 
  color:white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  height:100%;
}

#piano{
	position: absolute;
	top: 60px;
	right: 50px;
	transform: scale(4); 
	transition:.2s;
	
}
#piano:hover{
	cursor:pointer;
	transform:scale(5);
	transition:.2s;
}

#pause{
	cursor:pointer;
	position: fixed;
	top: 60px;
	left:50px;
	transform: scale(4); 
	transition:.2s;
}

#pause_text{
	position: absolute;
	top: 40px;
	left:120px;
	font-size: 15px;
	width:100px;
}
#unpause{
	cursor:pointer;
	position: fixed;
	top: 60px;
	left:50px;
	scale: 4 4;
	display:none;
	}

.chatbot{
	font-size: 20px;
	display:flex;
	flex-direction: column;
	
	position:fixed;
    bottom:20px;
	height:100px;
    left:20px;
    justify-content: space-between;
	text-align: center;
}

#chatIcon{
	transition: 0.2s;
	scale: 2;
}

#chatIcon:hover{
	transition: 0.2s;
	scale:3;
	cursor:pointer;
}


.page2{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-around;
	margin: auto;
	gap: 20px;
	font-size: 30px;
}

.description_holder{
	display:flex;
	flex-direction: row;
	justify-content: center;
	font-size: 40px;
	text-align: center;	
	margin-top: 40px;
}
#aboutMeText{
	display:none;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 40px;
	margin-right: 40px;
}

#recordingsText{
	display:none;
}
#upcomingEventsText{
	display: none;
}
#lessonsText{
	display: none;
}

ul {
  list-style-position: inside;
  text-align: center;
  padding: 0;
}
#contactMeText{
	display: none;
}
a:link, a:visited, a:hover, a:active {
	color: gray;
	background-color: transparent;
	
  }
  
 #about_me, #recordings, #upcoming_events, #lessons, #contact_me{
	 transition:.2s;
 }
 
#about_me:hover{
scale:1.3 1.3;
transition:.2s;
cursor:grab;
}

#recordings:hover{
	scale:1.3 1.3;
	transition:.2s;
	cursor:grab;
	}
	
#upcoming_events:hover{
	scale:1.3 1.3;
	transition:.2s;
	cursor:grab;
	}
		
#lessons:hover{
	scale:1.3 1.3;
	transition:.2s;
	cursor:grab;
	}
	
#contact_me:hover{
	scale:1.3 1.3;
	transition:.2s;
	cursor:grab;
	}

	.recording-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 40px;
		padding:0px;
		
	  }
	
	  video {
		width: 100%;
		height:190px;
		border: 2px solid #ccc;
		border-radius: 8px;
		
	  }
	
	  

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


.chatbot{display:none}


	#entryPiano{
		position: absolute;
		top: 50%;
		left: 50%;
		
		transition:.2s;
	}
	#entryPiano:hover{
		transform: scale(1); 
	transition:.2s;
	cursor:pointer;
	}
	
	.enterButton {
		font-size: 30px;
		background:none;
		color:white;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		border: none;
		margin-top:10%;
	}

	#pause_text {
		display: none;
	}

	#piano{
		position: absolute;
		top: 30px;
		right: 30px;
		
	}
	#pause{
		cursor:pointer;
		position: fixed;
		top: 30px;
		left:30px;
		
	}
	#unpause{
		cursor:pointer;
		position: fixed;
		top: 30px;
		left:30px;
	
	
		}
	
	}


	/* chatbot styling */

	#chatbot-container {
		
		position: fixed;
		bottom: 10px;
		left: 20px;
		width: 250px;
		height: 400px;
		border: 1px solid #ccc;
		border-radius: 10px;
		background: #fff;
		display: none;
		flex-direction: column;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		overflow: hidden;
		z-index: 9999;
	  }
	  #chat-header {
		display:flex;
		gap:40%;
		background: #000000;
		color: white;
		padding: 10px;
		font-weight: bold;
		text-align: center;
	  }

	  #closeChat{
		transition:.2s;
	  }

	  #closeChat:hover{
		transition:.2s;
		scale:1.5;
		cursor:pointer;
	  }

	  #chat {
		flex: 1;
		padding: 10px;
		overflow-y: auto;
		background: #f9f9f9;
	  }
	  .message {
		margin-bottom: 10px;
		text-shadow: none; 
		color:black;
	  }
	  .user {
		color: #545454;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	  }
	  .model {
		color: #333;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	  }
	  #chat-input {
		display: flex;
		padding: 10px;
		border-top: 1px solid #ccc;
		background: #fff;
	  }
	  #prompt {
		flex: 1;
		resize: none;
		padding: 5px;
		font-size: 14px;
	  }
	  button {
		margin-left: 5px;
		padding: 5px 10px;
	  }