.head-banner {
    width: 100%;
    height: 500px;
    position: relative;
    z-index: 5;
    background-position: 50% 60%;
    background-size: 100%;
    background-repeat: no-repeat;
}

.head-banner-notebook {
    background-image: url("https://static.igem.wiki/teams/5778/notebook/nodebook-banner.webp");
}

.head-banner-demo {
    background-image: url("https://img1.baidu.com/it/u=3900372761,4109019899&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500");
}

.head-banner-model{
    background-image: url("https://img1.baidu.com/it/u=3900372761,4109019899&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500");
    background-position: 50% 60%;
    background-size: 100%;
    background-repeat: no-repeat;
}

.head-banner-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #211f21, #00000040);
}

.head-banner-title-content {
    position: absolute;
    width: 100%;
    height: 80%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.head-banner-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    font-weight: bolder;
    color: #ffffffB0;
    font-family: 'Kanit', sans-serif;
    word-spacing: 10px;
    opacity: 0;
    transition: all 0.7s ease-in-out;
    transform: scale(0.1);
}

.head-banner-title-visible {
    opacity: 1;
    transform: scale(1);
}

.head-banner-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: bolder;
    color: #ffffffB0;
    font-family: 'NunitoBolder', sans-serif;
    word-spacing: 10px;
    font-style: italic;
    opacity: 0;
    transition: all 1s ease-in-out;
}

.head-banner-subtitle-visible {
    opacity: 1;
}