/* 定义第一个字体 */
@font-face {
    font-family: 'SoulHandwriting';
    src: url('../fonts/soul-handwriting_free-version.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 定义第二个字体 */
@font-face {
    font-family: 'PoppinsMedium';
    src: url('../fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 定义第三个字体，具有不同的权重 */
@font-face {
    font-family: 'Seaside_Resort_NF';
    src: url('../fonts/Seaside_Resort_NF.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* 然后在你的CSS中使用定义好的字体 */
body {
    font-family: 'PoppinsMedium', sans-serif;
    /* 在这里使用你的字体 */
}

.website-name {
    font-family: 'Seaside_Resort_NF', sans-serif;
}

/* 动画展示条样式 */
.navbar-top {
    background-color: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
    animation: slideDown 5s ease-out forwards;
}

/* 动画效果 */
@keyframes slideDown {
    from {
        top: -50px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes bottomBorderAnimation {
    0% {
        width: 0;
        opacity: 0;
    }

    50% {
        width: 100%;
        opacity: 1;
    }

    100% {
        width: 0;
        opacity: 0;
    }
}

.nav-item {
    position: relative;
    overflow: hidden;
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #007bff;
    /* 你可以根据需要更改颜色 */
    opacity: 0;
    /* 默认不显示线条 */
    transition: none;
    /* 移除默认的过渡效果 */
}

.nav-item:hover::after {
    animation: bottomBorderAnimation 2s ease-in-out forwards;
    /* 添加动画，并使动画在结束时保持最后一个关键帧的样式 */
}

.navbar {
    font-weight: bolder;
}

.image-text-container {
    display: flex;
    width: 100%;
}

.image-container,
.text-container {
    flex: 1;
    /* Each takes up an equal amount of space */
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container img {
    width: 100%;
    /* Image takes up full width of its container */
    height: auto;
}

.text-container {
    background: #f8f9fa;
    /* Light background for text */
    padding: 20px;
    /* Add some padding */
}

/* 底部自此始 */
.footer {
    padding: 40px 0;
    background-color: #f5f5c6;
    /* 米色背景 */
}

.footer h5 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #333;
    /* Darker text for headings */
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer li {
    margin-bottom: 0.5rem;
}

.footer a {
    text-decoration: none;
    color: #666;
    /* Lighter text for links */
    transition: color 0.3s ease;
}

.footer a:hover,
.footer a:focus {
    color: #000;
    /* Darken links on hover/focus */
}

/* Add some spacing between columns on large screens */
@media (min-width: 992px) {
    .footer .col-lg-4 {
        padding-left: 15px;
        padding-right: 15px;
    }
}