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: #cfcfcf; 
	color: #242424;
}

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

.logo {
	position: fixed;
	top: 30px;
	left: 30px;
	z-index: 200;
	font-size: 18px;
	color: #cfcfcf;
	text-decoration: none;
  }

.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;
}

footer {
width: 100%;
position: fixed;
bottom: 20px;
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;
}

.social-links {
	display: flex;
	gap: 30px;
	z-index: 2;
	}
	
	.links {
	color: #CFCFCF;
	text-decoration: none;
	}
	
	footer p {
	margin: 0;
	color: black;
	}

.container {
position: absolute;
top: 12%;
left: 13%;
right: 50px;
display: grid;
grid-template-columns: 2.6fr 7.4fr;
gap: 5px;
/* justify-content: space-between; */
/* align-items: flex-start; */
}

.project-list {
display: flex;
flex-direction: column;
/* gap: 14px; */
min-width: 180px;
}

.project-item {
font-size: 22px;
color: #cfcfcf;
font-weight: 300;
/* gap: 3px; */
padding-top: 5px;
padding-bottom: 5px;
text-decoration: none;
}

.preview {
/* position: absolute; */
/* top: 20%; */
/* right: 17%; */
width: 600px;
display: none;
flex-direction: column;
/* align-items: flex-start; */
/* gap: 10px; */
z-index: 2;
margin-top: 20px;
}

.preview img {
display: block;
width: 100%;
object-fit: cover;
/* border: 1px solid #444; */
}

.preview-text {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 14px;
color: #cfcfcf;
margin-top: 8px;
}

.preview-text a {
color: #cfcfcf;
text-decoration: none;
font-weight: 400;
}

#previewLink {
font-size: 16px;
}

#previewDescription {
font-size: 18px;
}

.category {
/* padding-bottom: 5px;
padding-top: 10px; */
font-size: 14px;
font-style: italic;
/* font-family: 'degular-mono', sans-serif; */
}

.block {
padding-top: 30px;
padding-bottom: 10px;
}

.preview-info {
font-size: 14px;
line-height: 1.5;
color: #cfcfcf;
max-width: 88%;
}

/* new */

.project-item.coming-soon {
	color: #777;
	cursor: default;
  }

  /* 讓包住圖片的連結可以當覆蓋層的定位容器 */
.preview-image {
	position: relative;
	display: inline-block;
	line-height: 0;
  }
  
  /* 黑色覆蓋 + 置中 "Coming Soon" */
  .coming-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	letter-spacing: 0.3px;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
  }
  
  /* 只有當目前 hover 的項目是 coming-soon 時，滑到圖片才會顯示覆蓋 */
  .preview.has-coming-soon .preview-image:hover .coming-overlay {
	opacity: 1;
  }
  

  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;
  }

  .github-link {
	text-decoration: none;
	color: #CFCFCF;
	font-size: 15px;
	margin-bottom: 20px;
  }