/* 基礎設定：消除瀏覽器預設間距 */
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

:root {
  --mk-black: #2d2a2e;
  --mk-white: #fcfcfa;
  --mk-green: #a9dc76;
  --mk-yellow: #ffd866;
  --mk-purple: #ab9df2;
  --mk-red: #ff6188;
  --mk-cyan: #78dce8;
  --mk-blue: #6699df;
  --mk-gray: #676568;
}

html {
        scroll-behavior: smooth;
}

body {
        background-color: var(--mk-black);
        font-family: "Segoe UI", "PingFang TC", "Microsoft YaHei", sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
}

.center-things {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        width: 100%;
        padding: 20px;
        animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
        from {
                opacity: 0;
                transform: translateY(15px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}

.terminal-container {
	display:grid;
	grid-template-columns: auto 1fr;
	gap: 15px;
	align-items: center;
	border: 1px solid var(--mk-gray);
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 10px 20px;
	width: fit-content;
	min-width: 90vw;
	max-width: 800px;
}

.line-numbers {
	color: var(--mk-gray);
	font-family: "Consolas", monospace;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	user-select: none;
}

.big-title {
        color: var(--mk-green);
        text-shadow: 0 0 10px rgba(169,220,118, 0.5);
        font-size: clamp(2rem, 5vw, 3rem);
        font-family: "Consolas", "Monaco", "Courier New", monospace;
        display: block;
}

.youtube-btn {
        color: var(--mk-black);
        background-color: var(--mk-yellow);
        padding: 12px 24px;
        text-decoration: none;
        border-radius: 8px;
        font-weight: bold;
        box-shadow: 0 0 15px rgba(255,216,102, 0.4);
        transition: transform 0.2s, box-shadow 0.2s;
}

.youtube-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(255,216,102, 0.6);
}

.youtube-btn:active {
        transform: scale(0.95) translateY(2px);
}

.social-btns {
        position: fixed;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: 20px;
}

.social-btn img {
        width: 50px;
        height: 50px;
        display: block;
        filter: drop-shadow(0 0 8px rgba(252,252,250, 0.6));
        transition: filter 0.2s, transform 0.2s;
}

.social-btn:hover img {
        transform: scale(1.1);
        filter: drop-shadow(0 0 16px rgba(252,252,250, 0.9));
}

.social-btn:active img {
        transform: scale(0.95) translateY(2px);
}