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') 0 0, auto;
}

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

.playground-link:hover {
cursor: url('../../images/cursor-play2-2.svg') 0 0, 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;
display: block;
}

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

.snapask-toggle {
/* margin-top: 5px;
margin-bottom: 5px; */
}

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


.snapask-sublist {
display: none;
flex-direction: column;
margin-left: 15px;
border-left: 1px solid #444;
padding-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
gap: 5px;
}

.project-subitem {
font-size: 17px;
color: #cfcfcf;
font-weight: 300;
padding: 3px 0;
text-decoration: none;
}

.project-subitem:hover {
color: #EC3A3A;
}

@media (min-width: 2560px) {
canvas {
width: 100vw;
height: 100vh;
min-width: 2560px; /* 確保至少覆蓋2560px寬度 */
min-height: 100vh;
}

body {
min-width: 100vw;
min-height: 100vh;
}

h1 {
font-size: 45px;
font-weight: 300;
}

.logo {
top: 50px;
left: 50px;
z-index: 200;
font-size: 35px;
color: #cfcfcf;
text-decoration: none;
}

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

.preview {
	width: 1000px;
	display: none;
	flex-direction: column;
	z-index: 2;
	margin-top: 20px;
	margin-left: 50px;
	}	

	.preview-text {
		font-size: 30px;
		color: #cfcfcf;
		margin-top: 20px;
		}
		
		#previewLink {
		font-size: 30px;
		}
		
		#previewDescription {
		font-size: 40px;
		}

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

.nav-top-right {
position: absolute;
top: 29%;
right: 8%;
z-index: 2;
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-end;
}

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

.social-links {
font-size: 30px;
gap: 50px;
}

.category {
font-size: 30px;
}

.project-subitem {
font-size: 35px;
color: #cfcfcf;
font-weight: 300;
padding: 3px 0;
text-decoration: none;
}

footer {
	margin-bottom: 20px;
}

}