body {
    font-family: 'Roboto', sans-serif;
}
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 90%;
    margin: 0 auto;
    position: relative;
}
.container img{
    position: absolute;
    transition: 0.3s;
    border-radius: 8px;
    scale: 1;
    z-index: 1;
}
.container img:hover {
    scale: 1.15;
    box-shadow: 0 0 60px 0 rgba(110, 110, 110, 0.8),
 	  0 0 40px 10px rgba(164, 164, 164, 0.54);
    z-index: 2;
}
.container img:active {
    scale: 1.9;
    z-index: 2;
}
.title {
   text-align: center;
   margin-top: 30%;
   margin-bottom: 10%;
}
#titleh1, #titlep {
    opacity: 0;
    transition: opacity 2s ease-in-out; /* 延长过渡时间到2秒，添加平滑效果 */
}
.title p {
    color: #363636;
}
#source-p {
    color: #898989;
    margin-bottom: 5rem;
}
footer {
	background: #f9f9f9;
	color: #8d8d8d;
	text-align: center;
	padding: 10px 0;
}

.footer-links {
    position: relative;
    color: #515151;
    transition: 0.3s ease;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 999px;
    background-color: #ffffff00;
    margin-top: 16px;
}

.footer-links:hover {
    color: #767676;
    background-color: #d7d7d7;
}

@media screen and (max-width: 1600px) {
    .container img:hover {
        scale: 1.1;
        box-shadow: 0 0 60px 0 rgba(110, 110, 110, 0.8),
           0 0 40px 10px rgba(164, 164, 164, 0.54);
        z-index: 2;
    }
    .container img:active {
        scale: 1.5;
        z-index: 2;
    }
}
@media screen and (max-width: 1200px) {
    .container img:hover {
        scale: 1.05;
        box-shadow: 0 0 60px 0 rgba(110, 110, 110, 0.8),
           0 0 40px 10px rgba(164, 164, 164, 0.54);
        z-index: 2;
    }
    .container img:active {
        scale: 1.5;
        z-index: 2;
    }
}
@media screen and (max-width: 600px) {
    .container img:hover {
        scale: 1.5;
        box-shadow: 0 0 60px 0 rgba(110, 110, 110, 0.8),
           0 0 40px 10px rgba(164, 164, 164, 0.54);
        z-index: 2;
    }
    .container img:active {
        scale: 1.5;
        z-index: 2;
    }
}


#cursor {
    position: fixed;
    width: 18px;
    height: 18px;
    background: #000000;
    border-radius: 25px;
    opacity: 0.25;
    z-index: 10086;
    pointer-events: none;
    transition: 0.2s ease-in-out;
    transition-property: background, opacity, transform;

    &.hidden {
        opacity: 0;
    }

    &.active {
        opacity: 0.5;
        transform: scale(0.5);
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #313131;
    }
    h1 {
        color: #ffffff;
    }
    .title p {
        color: #ffffff;
    }
    #source-p {
        color: #adadad;
    }
    #cursor {
        position: fixed;
        width: 18px;
        height: 18px;
        background: #ffffff;
        border-radius: 25px;
        opacity: 0.25;
        z-index: 10086;
        pointer-events: none;
        transition: 0.2s ease-in-out;
        transition-property: background, opacity, transform;
    
        &.hidden {
            opacity: 0;
        }
    
        &.active {
            opacity: 0.5;
            transform: scale(0.5);
        }
    }
    footer {
        background: #3a3a3a;
        color: #898989;
        text-align: center;
        padding: 10px 0;
    }
    .footer-links {
        position: relative;
        color: #bdbdbd;
        transition: 0.3s ease;
        text-decoration: none;
        padding: 4px 8px;
        border-radius: 999px;
        background-color: #ffffff00;
        margin-top: 16px;
    }
    
    .footer-links:hover {
        color: #ffffff;
        background-color: #535353;
    }
    
}