@font-face {
    font-family: 'Ashfina';
    src: url("./font/Ashfiana\ Regular.otf");
}


body{
    background-color: black;
    margin: 0px;
}
p{
    color: white;
    font-family: Ashfina ;
}
h2{
    color: white;
    font-family: Ashfina ;
    font-size: 2.5em;
}
h3{
    color: white;
    font-family: Ashfina ;
    font-size: 1.1em;
}
/* -------------------Header----------------------- */
.header{
    text-align: center;
}
.header .header-title{
    margin: 20px 0;
    width: 60%;
    object-fit: cover;
}
.header .header-title img{
    width: 100%;
    object-fit: cover;
}
.header ul{
    list-style: none;
    margin: 10px 200px;
    padding: 0;
    background-color: #403E4A;
}
.header ul li{
    display: inline-block;
    padding: 20px 60px;
}
.header ul li a{
    padding: 20px 20px;
    color: white;
    text-decoration: none;
    font-family: Ashfina ;
    font-size: 1.1em;
}
.header ul li:hover{
    background-color: #26252C;
}
/* -------------------Carousel----------------------- */
.carousel{
    width: 100%;
    height: 1000px;
    position: relative;
    overflow: hidden;
    margin: 20px 0;
}
.carousel .img-container{
    
    height: 100%;
    position: relative;
    left: 0;

    display: flex;

    transition: 2s;
    transition-timing-function: ease-in-out;
     
}
.carousel .img-container img{  
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
}

.carousel .shift .btn{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;

    color: white;
    width: 50px;
    height: 50px;

    font-size: 40px;
    text-align: center;
    stroke-width: 20%;

    opacity: 0.1;

}
.carousel .shift .left{
    left: 50px;
}
.carousel .shift .right{
    right: 50px;
}
.carousel .bottom {
    display: flex;
    /* 设置点之间的间距 */
    gap: 20px;

    /* 设置点的定位 */
    position: absolute;
    bottom: 20px;
    width: max-content;
    left: 0;
    right: 0;
    margin: 0 auto;

}
.carousel .bottom .indicator {
    height: 5px;
    width: 5px;
    border-radius: 2.5px;

    background-color: white;

    cursor: pointer;

    opacity: 0.3;
}

.carousel:hover .bottom .indicator{
    opacity: 0.7;
}
.carousel:hover .shift .btn{
    opacity: 0.7;
}
/* -------------------Main----------------------- */
.main-container {
    margin: 50px;
}
.main-container .text-content{
    margin: 0 100px;
}
.main-container .text-introduction {
    /* margin: 0 10%; */
    line-height: 1.5em;
    font-size: 1.2em;
    text-align: justify;
}
/* .main-container .video-content {
    width: 100%;
    height: 100%;
}
.main-container .video-content .videoElement{
    object-fit: fill;
} */
/* -------------------Workflow----------------------- */
.main-container .workflow img{
    width: 100%;
}
/* -------------------Gallery----------------------- */
.prompt-gallery {
    margin:20px 0;
}
.prompt-gallery .prompt{
    margin: 0 25px;
    padding: 15px 20px;
    width: 200px;
    border: 1px solid white;
    border-radius: 5px;
    text-align: center;
}
.prompt-gallery .img-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}
.prompt-gallery img{
    width: 400px;
    padding: 10px 25px;
    object-fit: cover;
}
/* -------------------Dataset--------------------  */
.dataset-container {
    margin: 0 10%;
}
.dataset-container img{
    width: 100%;
    height: auto;
}
.dataset-container .prompt{
    padding: 15px 20px;
    width: 200px;
    border: 1px solid white;
    border-radius: 5px;
    text-align: center;
}
.main-container .download-url{
    margin: 30px 10%;
}
.main-container .download-url .url{
    color: rgb(93, 253, 131);
}
/* -------------------Footer--------------------  */
.footer{
    background-color: #191919;
}
.footer p{
    color: white;
    text-align: center;
    font-size: 10px;
    margin: 0;
    padding: 10px 0;
}