@charset "utf-8";

/* ===== 背景設定（6個屬性）===== */
body{
    background-color:#fbf9cc;
    background-image:url(img/bg.png);
    background-repeat:repeat-x;
    background-position:top center;
    background-attachment:fixed;
    background-size:auto;
}

/* ===== 元素選擇器 ===== */
a{
    color:#df4839;
}

/* ===== 偽類別 ===== */
a:hover{
    color:#ff705b;
}

/* ===== menu（class）===== */
.menu{
    text-align:center;
}

.menu li{
    display:inline-block;
    margin:10px;
}

.menu a{
    padding:10px 20px;
    background:#6fbb9a;
    color:#fff;
    border-radius:10px;
    text-decoration:none;
}

.menu a:hover{
    background:#90ddbb;
}

/* ===== LOGO設計 ===== */
h1{
    width:300px;
    margin:30px auto;
    padding:30px;
    text-align:center;
    color:#fff;
    border-radius:50%;
    background:linear-gradient(to bottom,#6fbb9a,#4a9d79);
    box-shadow:0 0 10px rgba(0,0,0,0.5);
    text-shadow:2px 2px 3px #333;
}

/* ===== 次標題 ===== */
h2{
    padding:10px;
    border-left:10px solid #d0e35b;
    border-radius:10px;
    background:#eee;
}

/* ===== id選擇器 ===== */
#contents{
    width:800px;
    margin:40px auto;
    padding:30px;
    background:#fff;
}

/* ===== 偽元素 ===== */
.more::after{
    content:" →";
}

/* ===== 屬性選擇器 ===== */
a[target="_blank"]::after{
    content:" 🔗";
}

a[href^="mailto"]::after{
    content:" ✉";
}

/* ===== Lesson 8：第二種背景 ===== */
.section-bg{
    background-image:url(img/pattern.png), url(img/bg2.jpg);
    background-repeat:repeat, no-repeat;
    background-position:center, center;
    background-size:auto, cover;
    padding:20px;
}

/* ===== 四角裝飾 ===== */
.corner{
    background-image:
        url(img/corner1.png),
        url(img/corner2.png),
        url(img/corner3.png),
        url(img/corner4.png);
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
    background-repeat:no-repeat;
}

/* ===== class 選擇器 ===== */
.h-sub span{
    font-weight:normal;
}