:root {
    --bg-primary: rgb(233, 251, 255);
    --border-color: rgb(143, 179, 236);
    --text-btn: rgb(120, 47, 25);
    --bg-btn: rgb(195, 201, 249);
    --border-btn: rgb(185, 219, 249);
    --border-btn-hover: rgb(212, 190, 236);
    --bg-btn-active: rgb(219, 173, 246);
    --focus-color: rgb(136, 169, 224);
    --bg-modal: rgb(221, 198, 246);
    --carousel-text: rgb(195, 219, 255);
    --carousel-shadow: rgba(0, 0, 0, 0.8);
}

/* 黑夜模式*/
body.dark {
    --bg-primary: #1e272e;
    --border-color: #4b6584;
    --text-btn: #d2dae2;
    --bg-btn: #2d3436;
    --border-btn: #4b6584;
    --border-btn-hover: #6a89cc;
    --bg-btn-active: #6a89cc;
    --focus-color: #6a89cc;
    --bg-modal: #2d3436;
}

body {
    background-color: var(--bg-primary);
}

.navbar {
    display: flex;
    justify-content: space-between;
    height: 100px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.navbaraction {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn {
    height: 40px;
    color: var(--text-btn);
    font-weight: 700;
    padding: 10px;
    margin: 20px;
    background-color: var(--bg-btn);
    border: solid 2px var(--border-btn);
    border-radius: 20px;
    transition: 0.2s;

    /* 表示可以点击 */
    cursor: pointer;
}

.btn:hover {
    border-color: var(--border-btn-hover);
    transform: translateY(-3px);
}

.btn:active {
    background-color: var(--bg-btn-active);
}


.logo {
    width: 402px;
    height: 100px;
    margin-left: 20px;
}

.logo h1 {
    width: 100%;
    height: 100%;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -999px;
    overflow: hidden;
    background: url(image/logo.png) center/cover;
}


/* 黑夜模式logo图片替换 */
body.dark .logo a {
    background: url(image/logo_dark.png) center/cover;
}



.carousel {
    position: relative;
    background-color: var(--bg-primary);
    width: 100%;
    max-width: 1200px;
    height: 500px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 12px;
}

.all-slides {
    display: flex;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);

}

.slide {
    /* 加上这一行可以不用给allslides设置width: 300%;   意思是禁止缩小，默认值是1允许缩小*/
    flex-shrink: 0;

    position: relative;
    height: 100%;
    width: 100%;
}

.carousel .all-slides img {
    width: 100%;
    height: 100%;

    /* img用object-fit实现覆盖 */
    object-fit: cover;
    object-position: 50% 0%;
}

.slide .caption {
    position: absolute;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    height: 100px;
    width: 100%;
    bottom: 0%;
    line-height: 100px;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--carousel-text);
    text-align: center;
    letter-spacing: 4px;
    padding-bottom: 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.3s ease-out, transform 1.3s ease-out;
}

.slide.active .caption {
    opacity: 1;
    transform: translateY(0);
}

.carousel-btn {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--border-color);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 15px 20px;
    transition: 0.3s;

    /* 按键默认有边框 */
    border: none;
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev {
    left: 0%;
    border-radius: 0 8px 8px 0;
}

.next {
    right: 0%;
    border-radius: 8px 0 0 8px;
}


.dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
    gap: 10px;


}

.dot {
    width: 12px;
    height: 12px;
    background: var(--border-btn);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}


/* :active 是 瞬时的,不能实现点击后一直高亮，所以js一般是用.active加上一个额外的类名实现效果 css是用的单选框绑定的圆点checked实现的*/
.dot.active {
    background: var(--border-color);
    transform: scale(1.3);
}

.container {
    color: rgb(160, 86, 230);

    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    gap: 20px;

    font-size: 1rem;
    font-weight: 700;

}

.container .controls {
    /* 多行伸缩布局  控制侧边栏为固定的250px */
    flex: 0 0 250px;
}

.container .control {
    margin-bottom: 10px;
}

.container .control label {
    display: block;
    margin-bottom: 10px;
}

.container .control input,
.container .control select {
    width: 100%;
    padding: 10px;
    border: solid var(--bg-primary) 2px;

    border-radius: 6px;

    /* 移除表单点击后自带的轮廓线 */
    outline: none;
}

.container .control input:focus,
.container .control select:focus {
    border-color: var(--focus-color);
}



.cards {
    display: grid;
    /* 这里改成auto-fill在元素少的时候grid列数也是全的，不会直接占完一整行导致过大 */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;

}

.card {
    position: relative;
    border-radius: 5%;
    overflow: hidden;
    transition: 0.3s;

    /* 原来只控制了列宽，没设置高度，所以高度随图片大小来，因此出现和模板样式不一样的情况 */
    /* 该行控制宽高比为3比4 */
    aspect-ratio: 3 / 4;
}

.love-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: 0.3s;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.love-btn:hover {
    transform: scale(1.1);
    background: white;
}

/* 注意无空格才表示选择同时具有两个类名的元素，用空格就变成下面的子元素了 */
.love-btn.active {
    color: #e74c3c;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.card-content {
    display: flex;
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 28%;
    background-color: var(--border-color);
    text-align: center;
    /* block用行高没法垂直居中 改为flex盒模型 */
    justify-content: center;
    align-items: center;
    color: aliceblue;
    font-size: 1.2rem;
    font-weight: 700;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card:hover img {
    /* 缩放 */
    transform: scale(1.05);

}


/* model是整个页面 model-content 是出现的文本框 */
.modal {
    /* 后面用js调出 */
    display: none;

    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed;

    /* inset相当于四个方向都设置零 即全屏覆盖 */
    inset: 0;
    z-index: 1000;

}

.modal-content {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    padding: 30px;
    border-radius: 12px;
    background-color: var(--bg-modal);
    border: solid 2px var(--focus-color);

    /* y轴向溢出时自动显示滚动条 */
    overflow-y: auto;

    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.close-btn:hover {
    color: var(--focus-color);
}