h1{
    color: #ff3333;
    font-size: 1rem;
}
#breadNav{
    display: flex;
    grid-area:breadNav;
    font-size: 0.9rem;
}
#breadNav a:link,#breadNav a:visited {
    color: #666;
    text-decoration: none;
}
#breadNav a:hover {
    color: #666;
    text-decoration: underline;
}
#breadNav a:active {
    color: #990000;
}
#title{
    grid-area:title;
    display: flex;
}
#title img{
    width: 2rem;
    height: auto;
    object-fit: contain;
}

main{
    display: grid;
    grid-template-areas:
    "breadNav breadNav"
    "title get-coupons";
    
}

#get-coupons {
    grid-area: get-coupons;
    /* 让按钮横向排列，并自动换行（防止文字太长超出屏幕） */
    display: flex;
    flex-wrap: wrap; 
    gap: 10px;       /* 按钮之间的间距 */
    align-items: center; /* 垂直居中对齐 */
}

#get-coupons a {
    display: inline-block; /* 必须设置，否则 padding 和高度会失效 */
    background-color: #ff3333;
    color: white;          /* 按钮文字通常设为白色 */
    padding: 8px 15px;     /* 上下 8px，左右 15px，撑开按钮形状 */
    text-decoration: none; /* 去掉链接默认下划线 */
    border-radius: 4px;    /* 圆角，看起来更像按钮 */
    font-size: 0.9rem;
    transition: background 0.3s; /* 增加平滑过渡效果 */
}

/* 按钮的鼠标悬停效果 */
#get-coupons a:hover {
    background-color: #e62e2e; /* 悬停时颜色深一点 */
    text-decoration: none;     /* 悬停也不要下划线 */
}

/* 按钮点击瞬间的效果 */
#get-coupons a:active {
    background-color: #cc0000;
    transform: translateY(1px); /* 点击时往下沉一点，模拟真实按压感 */
}