* {
	box-sizing: border-box;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration:none; 
    cursor:pointer;  
}

.backdrop{
	width: 100vw;
	height: 100vh;
	z-index: 20;
	position: fixed;
	left: 0;
	top: 0;
}

.music{
	position: fixed; 
	right:2rem; 
	top:8rem;
	z-index: 10;
	border-radius: 50%;
	width: 3rem;
	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.music:hover{
	cursor: pointer;
}

.mobile{
	display: none;
}

.desktop{
	display: block;
}

.landing{
	background-image: url('images-mobile/背景圖1.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5rem 1rem 1rem;
	display: flex;
	align-items: center; 
	flex-direction: column;
}

.logo{
	width: 30px; 
	aspect-ratio: 1;
	display: inline-block;
}

.suggestion{
	text-align: center;
	font-weight: bold;
	margin-bottom: 1rem;
}

.btn{
	padding: 0.7rem 1rem;
	border-radius: 0.5rem;
	color: white;
	background-color: rgb(0, 139, 196);
	/* margin: 0.5rem; */
	display: inline-block;
}

.landing-img-container{
	background-color: white;
	margin: 0 0 1rem;
	padding: 1rem;
	max-width: 500px;
	text-align: center;
}

.landing-img{
	width: 100%;
}

.landing-img-title{
	color: rgb(70, 51, 38);
	margin:0.5rem 0 0;
}

.landing-img-subtitle{
	margin:0.5rem 0 0;
}

.page{
	background-repeat: no-repeat;
	background-size: cover;
	padding: 4rem 2rem;
	display: flex;
	align-items: center; 
	flex-direction: column;
	min-height: 100vh;
}

.narrow-padding{
	padding: 4rem 0.5rem;
}

.bk2{
	background-image: url('images-mobile/背景圖2.jpg');
}

.bk3{
	background-image: url('images-mobile/背景圖3.jpg');	
}

.intro-container{
	max-width: 600px;
	margin-bottom: 1.7rem;
}

.header{
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgb(0, 104, 185);
	min-height: 4rem;
	width: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;

	color: white;
	font-size: 1.2rem;
	text-align: center;

	padding: 1rem;

	text-shadow: black 0em 0em 0.5em;
}

.footer{
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: rgb(0, 139, 196);
	height: 3rem;
	width: 100%;
	height: 4rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-link{
	color: white;
	border: 1px solid white;
	border-radius: 0.2rem;
	padding: 0.4rem 0.5rem;
	margin: 0.2rem 0.5rem;
	font-size: 85%;
}

.map-item{
	margin: 1rem 0;
	display: block;
	color: white;
	text-shadow: black 0em 0em 0.5em;
}

.map-item-flex{
	padding: 0.4rem 0.6rem;
	background-color: white;
	color: black;
	border: 1px solid white;
	border-radius: 20px;
	margin: 0.5rem 0.3rem;
	font-size: 90%;
}

.title{
	margin-top:1rem; 
	color: white;
	text-align: center;
	text-shadow: black 0em 0em 0.5em;
}

.subtitle{
	margin: 0 0 1.5rem;
	color: lightgray;
	text-align: center;
}

.btmtitle{
	margin: 0.5rem 0 0rem;
	color: white;
	text-align: center;
	text-shadow: black 0em 0em 0.5em;
}

.btn-container{
	display: flex;
	justify-content: center;
	align-items: center;
}

.island-link{
	margin:1rem; 
	max-width: 500px;
}

.island-img{
	width: 100%; 
}

.img{
	margin: 0 0 1.2rem;
	width:100%;
	max-width: 400px;
}

.img > img{
	width:100%;
}

.youtube{
	width: 100%;
	aspect-ratio: 1.85;
	max-width: 500px;
}

@media all and (max-width: 768px), (orientation: portrait){
	.mobile{
		display: block;
	}
	.desktop{
		display: none;
	}
	.music{
		right:1rem; 
		top:4.75rem;
		width: 2rem;
	}
}