3-3-1 美化頁首樣板檔 header.tpl

1. 打算在頁首放個插圖換個底色，把字變大，設定字型，加個外框。
2. 要改變外觀，要編輯的是 style.css 樣式檔

一、加底圖

1. 底圖可以到這裡找： https://www.cleanpng.com，請將圖存入images（需自行建立資料夾）
2. 圖檔若比較大，請自行縮小即可，例如欲插入此圖（play.png）檔當背景：
   
3. 編輯 style.css 樣式檔，修改.header樣式

   /* 網頁部份 */
   .header {
       background: #bccc75 url('images/play.png') no-repeat 20% center;
       padding: 60px 0;
   }

    

二、改變標題文字外觀

1. 先跟AI講需求

   請用CSS設定文字，需有白色外框，外框不可遮住文字本體，如果是大螢幕，希望文字以3.6rem顯示，框可以粗一點，如果是手機小螢幕，希望文字以 2rem顯示，框可以細一點。

    

2. 然後根據回應，編輯 style.css 樣式檔：

   .outlined-text {
     color: black; /* 文字顏色 */
     text-shadow: 
       -3px -3px 0 white,  
       3px -3px 0 white,
       -3px 3px 0 white,
       3px 3px 0 white;
     font-size: 3.6rem; /* 大螢幕的文字大小 */
   }
   
   /* 小螢幕設置 */
   @media (max-width: 768px) {
     .outlined-text {
       font-size: 2rem; /* 小螢幕的文字大小 */
       text-shadow: 
         -2px -2px 0 white,  
         2px -2px 0 white,
         -2px 2px 0 white,
         2px 2px 0 white;
     }
   }

    

3. 由於有新樣式，所以，要到 templates/header.tpl 套用之：

   <header class="header mb-4">
       <div class="container">
           <h1 class="text-center outlined-text">{$webTitle}</h1>
       </div>
   </header>

    

4. 若要自己加字型（隨便挑一兩個即可），亦可點此預覽字型：

   /* 851電機文字 */
   @font-face {
     font-family: "851DianJiWenZiTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/851DianJiWenZiTi.woff2) format("woff2");
   }
   
   /* 莫大毛筆字體 */
   @font-face {
     font-family: "Bakudai";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Bakudai.woff2) format("woff2");
   }
   
   /* 波塔 */
   @font-face {
     font-family: "BoTa";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BoTa.woff2) format("woff2");
   }
   
   /* 源流注音明體-粗體 */
   @font-face {
     font-family: "BpmfGenRyuMin-B";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenRyuMin-B.woff2) format("woff2");
   }
   
   /* 源流注音明體 */
   @font-face {
     font-family: "BpmfGenRyuMin-R";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenRyuMin-R.woff2) format("woff2");
   }
   
   /* 源石注音黑體-粗體 */
   @font-face {
     font-family: "BpmfGenSekiGothic-B";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenSekiGothic-B.woff2) format("woff2");
   }
   
   /* 源石注音黑體 */
   @font-face {
     font-family: "BpmfGenSekiGothic-R";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenSekiGothic-R.woff2) format("woff2");
   }
   
   /* 源泉注音圓體-粗體 */
   @font-face {
     font-family: "BpmfGenSenRounded-B";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenSenRounded-B.woff2) format("woff2");
   }
   
   /* 源泉注音圓體 */
   @font-face {
     font-family: "BpmfGenSenRounded-R";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenSenRounded-R.woff2) format("woff2");
   }
   
   /* 源雲注音明體 */
   @font-face {
     font-family: "BpmfGenWanMin-R";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenWanMin-R.woff2) format("woff2");
   }
   
   /* 源樣注音黑體-粗體 */
   @font-face {
     font-family: "BpmfGenYoGothic-B";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenYoGothic-B.woff2) format("woff2");
   }
   
   /* 源樣注音黑體 */
   @font-face {
     font-family: "BpmfGenYoGothic-R";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenYoGothic-R.woff2) format("woff2");
   }
   
   /* 源樣注音明體-粗體 */
   @font-face {
     font-family: "BpmfGenYoMin-B";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenYoMin-B.woff2) format("woff2");
   }
   
   /* 源樣注音明體 */
   @font-face {
     font-family: "BpmfGenYoMin-R";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfGenYoMin-R.woff2) format("woff2");
   }
   
   /* 字嗨注音標楷 */
   @font-face {
     font-family: "BpmfZihiKaiStd-Regular";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfZihiKaiStd-Regular.woff2) format("woff2");
   }
   
   /* 字嗨注音黑體-粗體 */
   @font-face {
     font-family: "BpmfZihiSans-Bold";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfZihiSans-Bold.woff2) format("woff2");
   }
   
   /* 字嗨注音黑體 */
   @font-face {
     font-family: "BpmfZihiSans-Regular";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfZihiSans-Regular.woff2) format("woff2");
   }
   
   /* 字嗨注音宋體-粗體 */
   @font-face {
     font-family: "BpmfZihiSerif-Bold";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfZihiSerif-Bold.woff2) format("woff2");
   }
   
   /* 字嗨注音宋體 */
   @font-face {
     font-family: "BpmfZihiSerif-Regular";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/BpmfZihiSerif-Regular.woff2) format("woff2");
   }
   
   /* 粉筆體 */
   @font-face {
     font-family: "Chalk";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Chalk.woff2) format("woff2");
   }
   
   /* 超級細ゴシック體 */
   @font-face {
     font-family: "ChaoJiXi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ChaoJiXi.woff2) format("woff2");
   }
   
   /* 公司LOGO圓體 */
   @font-face {
     font-family: "CorpRound";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/CorpRound.woff2) format("woff2");
   }
   
   /* 黑板粉筆體 */
   @font-face {
     font-family: "Crayon";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Crayon.woff2) format("woff2");
   }
   
   /* 俐方體11號 */
   @font-face {
     font-family: "Cubic";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Cubic.woff2) format("woff2");
   }
   
   /* 豆豆體 */
   @font-face {
     font-family: "Doudouziti";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Doudouziti.woff2) format("woff2");
   }
   
   /* 王漢宗中仿宋 */
   @font-face {
     font-family: "HanWangFangSongMedium";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangFangSongMedium.woff2) format("woff2");
   }
   
   /* 王漢宗特黑體 */
   @font-face {
     font-family: "HanWangHeiHeavy";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangHeiHeavy.woff2) format("woff2");
   }
   
   /* 王漢宗細黑體 */
   @font-face {
     font-family: "HanWangHeiLight";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangHeiLight.woff2) format("woff2");
   }
   
   /* 王漢宗中楷注音 */
   @font-face {
     font-family: "HanWangKaiMediumChuIn";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangKaiMediumChuIn.woff2) format("woff2");
   }
   
   /* 王漢宗勘亭流 */
   @font-face {
     font-family: "HanWangKanTan";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangKanTan.woff2) format("woff2");
   }
   
   /* 王漢宗中隸書 */
   @font-face {
     font-family: "HanWangLiSuMedium";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangLiSuMedium.woff2) format("woff2");
   }
   
   /* 王漢宗超明體 */
   @font-face {
     font-family: "HanWangMingBlack";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangMingBlack.woff2) format("woff2");
   }
   
   /* 王漢宗魏碑體 */
   @font-face {
     font-family: "HanWangWeBe";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangWeBe.woff2) format("woff2");
   }
   
   /* 王漢宗特圓體 */
   @font-face {
     font-family: "HanWangYenHeavy";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangYenHeavy.woff2) format("woff2");
   }
   
   /* 王漢宗細圓體 */
   @font-face {
     font-family: "HanWangYenLight";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangYenLight.woff2) format("woff2");
   }
   
   /* 王漢宗綜藝體 */
   @font-face {
     font-family: "HanWangZonYi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanWangZonYi.woff2) format("woff2");
   }
   
   /* 漢字筆順體原版 */
   @font-face {
     font-family: "HanZiBiShunZiTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HanZiBiShunZiTi.woff2) format("woff2");
   }
   
   /* 衡山毛筆草書 */
   @font-face {
     font-family: "HengShanMaoBiCaoShu";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/HengShanMaoBiCaoShu.woff2) format("woff2");
   }
   
   /* 刻石錄顏體 */
   @font-face {
     font-family: "I-Ngaan";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/I-Ngaan.woff2) format("woff2");
   }
   
   /* 刻石錄鋼筆鶴體 */
   @font-face {
     font-family: "I-PenCrane-B";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/I-PenCrane-B.woff2) format("woff2");
   }
   
   /* 芫荽體 */
   @font-face {
     font-family: "Iansui";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Iansui.woff2) format("woff2");
   }
   
   /* 清松手寫體1 */
   @font-face {
     font-family: "JasonHandwriting1";
     src: url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting1-Regular.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting1-Regular.woff) format("woff");
   }
   
   /* 清松手寫體2 */
   @font-face {
     font-family: "JasonHandwriting2";
     src: url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting2-Regular.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting2-Regular.woff) format("woff");
   }
   
   /* 清松手寫體3 */
   @font-face {
     font-family: "JasonHandwriting3";
     src: url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting3-Regular.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting3-Regular.woff) format("woff");
   }
   
   /* 清松手寫體4 */
   @font-face {
     font-family: "JasonHandwriting4";
     src: url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting4-Regular.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/gh/max32002/JasonHandWritingFonts/webfont/JasonHandwriting4-Regular.woff) format("woff");
   }
   
   /* jf open 粉圓 */
   @font-face {
     font-family: "JfOpenhuninn";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/JfOpenhuninn.woff2) format("woff2");
   }
   
   /* jf open 粉圓 */
   @font-face {
     font-family: "jf-openhuninn";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/JfOpenhuninn.woff2) format("woff2");
   }
   
   /* 解星 B */
   @font-face {
     font-family: "KaiseiTokumin";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/KaiseiTokumin.woff2) format("woff2");
   }
   
   /* 荊南麥圓體 */
   @font-face {
     font-family: "KingnamMaiyuan";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/KingnamMaiyuan.woff2) format("woff2"),
     url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/KingnamMaiyuan.woff) format("woff");
   }
   
   /* 苦累蛙圓體 */
   @font-face {
     font-family: "Kurewa";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Kurewa.woff2) format("woff2");
   }
   
   /* Mamelon字體 */
   @font-face {
     font-family: "Mamelon";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Mamelon.woff2) format("woff2");
   }
   
   /* Mamelon新版字體 */
   @font-face {
     font-family: "MamelonHi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/MamelonHi.woff2) format("woff2");
   }
   
   /* 正風毛筆字體（衡山毛筆行書） */
   @font-face {
     font-family: "MasaFont";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/MasaFont.woff2) format("woff2");
   }
   
   /* 內海字體 */
   @font-face {
     font-family: "NaikaiFont";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/NaikaiFont.woff2) format("woff2");
   }
   
   /* 馬克筆手寫體 */
   @font-face {
     font-family: "NishikiTeki";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/NishikiTeki.woff2) format("woff2");
   }
   
   /* 胖胖豬肉體 */
   @font-face {
     font-family: "PangPangZhuRouTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/PangPangZhuRouTi.woff2) format("woff2");
   }
   
   /* 破碎零號字 */
   @font-face {
     font-family: "PoSuiLingHaoZi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/PoSuiLingHaoZi.woff2) format("woff2");
   }
   
   /* 大波浪圓體 */
   @font-face {
     font-family: "PopGothicCjkJp";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/PopGothicCjkJp.woff2) format("woff2");
   }
   
   /* 千圖馬克手寫體 */
   @font-face {
     font-family: "QianTuMaKeShouXieTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/QianTuMaKeShouXieTi.woff2) format("woff2");
   }
   
   /* 黒薔薇 */
   @font-face {
     font-family: "Qiang";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Qiang.woff2) format("woff2");
   }
   
   /* 青柳隷書 */
   @font-face {
     font-family: "QingLiuShu";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/QingLiuShu.woff2) format("woff2");
   }
   
   /* 隨峰體 */
   @font-face {
     font-family: "SuiFengTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/SuiFengTi.woff2) format("woff2");
   }
   
   /* 獅尾詠腿黑體 */
   @font-face {
     font-family: "SweiFistLegCJKjp";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/SweiFistLegCJKjp.woff2) format("woff2");
   }
   
   /* 獅尾四季春 */
   @font-face {
     font-family: "SweiSpringSugarCJKtc";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/SweiSpringSugarCJKtc.woff2) format("woff2");
   }
   
   /* 獅尾牙膏圓體 */
   @font-face {
     font-family: "SweiToothpasteCJKtc";
     src: url(https://cdn.jsdelivr.net/gh/max32002/swei-toothpaste@2.0/WebFont/CJK%20TC/SweiToothpasteCJKtc-Regular.woff2) format("woff2"),
       url(https://cdn.jsdelivr.net/gh/max32002/swei-toothpaste@2.0/WebFont/CJK%20TC/SweiToothpasteCJKtc-Regular.woff) format("woff");
   }
   
   /* 糖果手寫粗體 */
   @font-face {
     font-family: "TanugoTangGuoShouXieTiBold";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/TanugoTangGuoShouXieTiBold.woff2) format("woff2");
   }
   
   /* 糖果手寫體 */
   @font-face {
     font-family: "TanugoTangGuoShouXieTiRegular";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/TanugoTangGuoShouXieTiRegular.woff2) format("woff2");
   }
   
   /* たぬき油性マジック */
   @font-face {
     font-family: "Tanukimagic";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/Tanukimagic.woff2) format("woff2");
   }
   
   /* 鵪鶉字體 */
   @font-face {
     font-family: "UzuraZiTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/UzuraZiTi.woff2) format("woff2");
   }
   
   /* 無心手寫體 */
   @font-face {
     font-family: "WuXinShouXieTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/WuXinShouXieTi.woff2) format("woff2");
   }
   
   /* 賢二體 */
   @font-face {
     font-family: "XianErTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/XianErTi.woff2) format("woff2");
   }
   
   /* 字體圈欣意冠黑體 */
   @font-face {
     font-family: "XinYiGuanHeiTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/XinYiGuanHeiTi.woff2) format("woff2");
   }
   
   /* YOz手寫體 */
   @font-face {
     font-family: "YOzShouXieTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/YOzShouXieTi.woff2) format("woff2");
   }
   
   /* 英椎行書 */
   @font-face {
     font-family: "YingZhuiXingShu";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/YingZhuiXingShu.woff2) format("woff2");
   }
   
   /* 佑字 */
   @font-face {
     font-family: "YouZi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/YouZi.woff2) format("woff2");
   }
   
   /* 源影黑體 */
   @font-face {
     font-family: "YuanYingHeiTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/YuanYingHeiTi.woff2) format("woff2");
   }
   
   /* 宅在家粉條甜 */
   @font-face {
     font-family: "ZhaiZaiJiaFenTiaoTian";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ZhaiZaiJiaFenTiaoTian.woff2) format("woff2");
   }
   /* 宅在家粉條甜 */
   @font-face {
     font-family: "ZhaiZaiJiaFenTiaoTian";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ZhaiZaiJiaFenTiaoTian.woff2) format("woff2");
   }
   
   /* 宅在家麥克筆 */
   @font-face {
     font-family: "ZhaiZaiJiaMaiKeBi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ZhaiZaiJiaMaiKeBi.woff2) format("woff2");
   }
   
   /* 宅在家自動筆 */
   @font-face {
     font-family: "ZhaiZaiJiaZiDongBi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ZhaiZaiJiaZiDongBi.woff2) format("woff2");
   }
   
   /* 佐佐木字體 */
   @font-face {
     font-family: "ZuoZuoMuZiTi";
     src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/ZuoZuoMuZiTi.woff2) format("woff2");
   }

    

5.  例如欲套用「解星 B」，則編輯 style.css 樣式檔：

   ...略...
   
   /* 解星 B */
   @font-face {
       font-family: "KaiseiTokumin";
       src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/KaiseiTokumin.woff2) format("woff2");
   }
   .outlined-text {
       /* 文字字型 */
       font-family: "KaiseiTokumin";
       color: black;
       /* 文字顏色 */
       text-shadow:
           -3px -3px 0 white,
           3px -3px 0 white,
           -3px 3px 0 white,
           3px 3px 0 white;
       font-size: 3.6rem;
       /* 大螢幕的文字大小 */
   }
   
   ...略...

    

6. 最後的 style.css 樣式檔內容：

   /* 主樣板樣式 */
   .header {
       background: #bccc75 url("images/play.png") no-repeat 20% center;
       padding: 60px 0;
   }
   
   /* 標題樣式 */
   
   /* 解星 B */
   @font-face {
       font-family: "KaiseiTokumin";
       src: url(https://cdn.jsdelivr.net/gh/tadlearn/webfonts/KaiseiTokumin.woff2) format("woff2");
   }
   
   .outlined-text {
       font-family: KaiseiTokumin;
       color: black;
       /* 文字顏色 */
       text-shadow: -3px -3px 0 white, 3px -3px 0 white, -3px 3px 0 white,
           3px 3px 0 white;
       font-size: 3.6rem;
       /* 大螢幕的文字大小 */
   }
   
   /* 小螢幕設置 */
   @media (max-width: 768px) {
       .outlined-text {
           font-size: 2rem;
           /* 小螢幕的文字大小 */
           text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white,
               2px 2px 0 white;
       }
   }
   
   /* 輪播圖樣式 */
   
   .thumbnail-container {
       overflow-y: auto;
       scrollbar-width: thin;
       scrollbar-color: #888 #f1f1f1;
   }
   
   .thumbnail-container::-webkit-scrollbar {
       width: 6px;
   }
   
   .thumbnail-container::-webkit-scrollbar-track {
       background: #f1f1f1;
   }
   
   .thumbnail-container::-webkit-scrollbar-thumb {
       background: #888;
   }
   
   .thumbnail-container::-webkit-scrollbar-thumb:hover {
       background: #555;
   }
   
   .thumbnail {
       opacity: 0.5;
       transition: opacity 0.3s;
       cursor: pointer;
   }
   
   .thumbnail:hover {
       opacity: 0.8;
   }
   
   .thumbnail.active {
       opacity: 1;
       border: 2px solid blue;
   }
   
   #mainImage {
       width: 100%;
       height: auto;
   }