@charset "utf-8";
/* CSS Document */
html {
	scroll-behavior: smooth;
}
body {
	background-color: #fbf7f0;
	background-image: radial-gradient(#e5dbc9 1.2px, transparent 0);
	background-size: 18px 18px;
	color: #2d2d2d;
}
        
/* 手繪不規則筆觸邊框 */
.sketch-box {
	border: 2.5px solid #2d2d2d;
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	box-shadow: 4px 4px 0px #2d2d2d;
	transition: transform 0.2s, box-shadow 0.2s;
}
.sketch-box-sm {
	border: 2px solid #2d2d2d;
	border-radius: 125px 10px 105px 8px / 8px 105px 8px 125px;
	box-shadow: 3px 3px 0px #2d2d2d;
}
.sketch-btn {
	border: 2.5px solid #2d2d2d;
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	box-shadow: 4px 4px 0px #2d2d2d;
	transition: all 0.15s ease-in-out;
}
.sketch-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0px #2d2d2d;
}
.sketch-btn:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0px #2d2d2d;
}

/* 螢光筆與畫線特效 */
.pencil-underline {
	background-image: linear-gradient(120deg, #f4c430 0%, #f4c430 100%);
	background-repeat: no-repeat;
	background-size: 100% 35%;
	background-position: 0 88%;
}

/* 滾動條 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1e9da; }
::-webkit-scrollbar-thumb { background: #a39580; border-radius: 8px; border: 2px solid #2d2d2d; }