html, body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
font-family: 'degular-text', sans-serif;
/* background-color: #f2f2f2; */
color: #CFCFCF;
}

body {
	cursor: url('../../images/cursur-r2.svg') 16 16, auto;
}

a {
	cursor: url('../../images/cursur-w.svg') 16 16, pointer;
  }

  .playground-link:hover {
	cursor: url('../../images/cursor-play2-2.svg') 16 16, auto;
  }

::selection {
	background-color: #242424; 
	color: #f1f1f1;
}

canvas {
position: absolute;
top: 0;
left: 0;
display: block;
/* width: 100vw;
height: 100vh; */
z-index: -1;
pointer-events: none;
}

/* Nav Menu */
.nav-top-right {
position: absolute;
top: 29%;
right: 10%;
z-index: 2;
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-end;
}

.nav-top-right a {
text-decoration: none;
color: #CFCFCF;
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
}

h1 {
font-size: 20px;
font-weight: 400;
color: #cfcfcf;
}


.spotify-block {
display: flex;
flex-direction: column;
gap: 8px;
width: 250px;
flex-shrink: 0;
}

.music-label {
font-size: 14px;
font-style: italic;
margin: 0;
}

.iris {
width: 250px;
height: auto;
padding-top: 20px;
flex-shrink: 0;
}


.intro {
max-width: 65%;
font-size: 14px;
line-height: 1.5;
}

.grid {
padding-top: 30px;
display: grid;
grid-template-columns: 3fr 7fr;
gap: 20px;
font-size: 15px;
line-height: 1.6;
}

.title {
font-size: 16px;
text-transform: uppercase;
color: #CFCFCF;
}

.love {
/* max-width: 80%; */
}

.love-grid {
padding-top: 20px;
display: grid;
grid-template-columns: 1.5fr 8.5fr;
line-height: 1.6;
}

.container {
display: flex;
align-items: flex-start;
gap: 60px;
padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
z-index: 2;
}

.overlay-text {
max-width: 640px;
}

.overlay-text h1 {
font-size: 14px;
font-weight: 300;
margin-bottom: 10px;
}

.overlay-text .intro {
font-size: 14px;
font-weight: 100;
max-width: 500px;
margin-bottom: 30px;
}

.info-blocks {
display: flex;
gap: 80px;
margin-bottom: 30px;
font-size: 14px;
}

.info-blocks p {
margin: 0;
font-weight: 300;
line-height: 1.6;
}

.info-love {
font-size: 14px;
font-style: italic;
margin-top: 10px;
line-height: 1.6;
}


footer {
width: 100%;
position: fixed;
bottom: 3%;
left: 0;
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding: 0 50px;
font-size: 15px;
color: #CFCFCF;
z-index: 5;
box-sizing: border-box;
}


.touch {
position: relative;
left: 70%;
bottom: -10%;
text-transform: uppercase;
font-weight: 500;
animation: bounce 1.5s infinite;
font-style: italic;
color: #EC3A3A;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(6px);
}
}

footer .links {
color: #CFCFCF;
text-decoration: none;
}

.social-links {
display: flex;
gap: 30px;
z-index: 2;
}


body {
	opacity: 0;
	transform: translateY(40px); /* 起始往下 40px */
	transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  body.page-loaded {
	opacity: 1;
	transform: translateY(0);
  }

  a:hover {
	color: #EC3A3A;
  }