header{
    background-color: white;
    height: 60px;
    border-radius: 6px;
}

body{
    min-height: 100vh;
    margin: 0px;
    background-image: linear-gradient(
        90deg,
        rgb(119 0 255 / 39%),
        rgb(0 212 255 / 39%)
    ); 
}

main{
    height: auto;
}

footer{
    background-color: #FFFFFFBB;
    margin: 8px;
    border-radius: 8px;
    padding: 16px;
    transition-property: margin-right;
    transition-duration: 0.3s;
}

/*BiliCraft Wiki Topic List*/
.bcwtl{
    /* display: grid; */
    width: 80%;
    position: inherit;
    margin: auto;
}

/*BiliCraft Wiki Topic*/
.bcwt{
    height: 200px;
    position: relative !important;
    background-color: aliceblue;
    border-radius: 16px;
    margin: 32px 0px;
    padding: 4px;
    transition-property: all;
    transition-duration: 0.5s;
}

.bcwt:hover{
    height: 280px;
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0s;
    box-shadow: 0px 0px 32px white;
}

.bcwt > .gradientLayer{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    opacity: 0.5;
    background-image: linear-gradient(
        90deg,
        #FFFFFFE0,
        #FFFFFF20
    );
    transition:inherit;
    transition-property: all;
}

.bcwt:hover > .gradientLayer{
    opacity: 1;
    transition:inherit;
    transition-property: all;
}

.bcwt > h2{
    margin-left: 32px;
    font-size: 48px;
    color: white;
    position:relative;
    transition:inherit;
    transition-property: all;

}

.bcwt:hover > h2{
    font-size: 32px;
    color: black;
    transition:inherit;
    transition-property: all;
}

.bcwt > div[class="description"]{
    opacity: 0;
    margin-left: 64px;
    position:relative;
    transition:inherit;
    transition-property: all;
}

.bcwt:hover >div[class="description"]{
    opacity: 1;
    margin-left: 64px;
    transition:inherit;
    transition-property: all;
}

#tutorial{
    position:static;
    background-image: url(tutorial.png);
    background-repeat: no-repeat;
    background-position: 0px;
    background-size: cover;
}

#introduction{
    position:static;
    background-image: url(introduction.png);
    background-repeat: no-repeat;
    background-position: 0px;
    background-size: cover;
}

#machine{
    position:static;
    background-image: url(machine.png);
    background-repeat: no-repeat;
    background-position: 0px;
    background-size: cover;
}

#faction{
    position:static;
    background-image: url(faction.png);
    background-repeat: no-repeat;
    background-position: 0px;
    background-size: cover;
}