#theme-switch:not(:checked) ~ *{
--bg: rgb(255, 255, 255);
--text: black;
--card: #f5f4f8;
--card-hover: #f5f4f8f8;
}

#theme-switch{
display: none;
}

.theme-switch-label {
cursor: pointer;
z-index: 100;
position: absolute;
top: 0;
right: 0;
padding: 0.2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
margin: 1rem 1rem;
user-select: none;
mix-blend-mode: difference;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

&:hover {
background-color: #ffffff2a;
mix-blend-mode: difference;
transition: all 0.2s ease;
}
}

#theme-switch:checked ~ * {
--bg: rgb(22, 22, 22);
--text: white;
--card: #333;
--card-hover: #444;
}

html, body {
font-family: "Noto Sans CJK TC", Arial, sans-serif;
padding: 0;
margin: 0;
height: 100dvh;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

.container {
background-color: var(--bg);
color: var(--text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
text-align: center;
margin: 0;
overflow-y: scroll;
min-height: 700px;
height: calc(100dvh - 2*2rem);
transition: background-color 0.1s linear;
}

a {
margin: 0;
color: inherit;
text-decoration: none;
}

.title-container {
margin-bottom: 0rem;
}

.profile-image {
width: 100px;
height: auto;
border-radius: 50%;
pointer-events: none;
}

.icon-container {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-top: 1rem;
}

.icon img {
width: 3rem;
height: 3rem;
transition: transform 0.3s;
border-radius: 0.5rem;
}

.icon img:hover {
transform: scale(1.1);
}

.link-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: var(--card);
border-radius: 1rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.link-container:hover {
background-color: var(--card-hover);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.link-container img {
width: 3rem;
object-fit: contain;
border-radius: 0.5rem;
margin: 1rem;
}

.link-container h3 {
margin-right: 3rem;
font-size: 1.5rem;
width: 100%;
}

#links-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

#links-container a {
border-radius: 1rem;
display: flex;
justify-content: center;
flex-direction: column;
gap: 1rem;
margin: 1rem 0;
max-width: 80vw;
width: 100%;
background-color: var(--card);
transition: transform 0.3s, box-shadow 0.3s;
}

#links-container a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}