body {
    background-color:#060606;
}

#logo {
    width:550px;
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

.title-section {
    background:url("../img/vulcan-artifact/6.webp");
    background-size: cover;
    background-position: 50% 50%;
    height:100vh;
}

.game-section {
    background:url("../img/vulcan-artifact/2.webp");
    background-size: cover;
    background-position: 50% 50%;
    padding: 60px 50px;
}

.game-section .item {
    margin: 0 15px 60px;
    display: flex;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    background: #343434 no-repeat center center / cover;
    border-radius: 16px;
    position: relative;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    cursor: pointer;
    height: 350px;
    overflow:hidden;
}

.game-section .item:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.game-section .item:hover {
    box-shadow: 0 0 24px gold;
}

.game-section .item-desc {
    transform:translateY(calc(100% - 50px));
    padding: 0 24px 12px;
    color: #fff;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    margin: 0;
}

.game-section .item:hover .item-desc {
    transform:translateY(0%);
}

.game-section .item-desc p {
    opacity: 0;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

.game-section .item:hover p {
    opacity: 1;
}

.load-div {
	position: absolute;
    display: flex;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
    z-index: 100;
    background: none;
}

.load-div>.loadanim-div {
    display: block;
    background:url("../img/vulcan-artifact/icon.webp");
    background-position: 50% 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    animation: loadFade 8s infinite linear;
    border-top-color: transparent;
}

.load-div h1 {
    position: absolute;
    display: block;
    top: 35vh;
}

.loadanim-div {
    display:none;
    animation: none;
}

@keyframes loadFade {
    0% {
        filter:grayscale(0);
        transform: rotate(0deg);
    }

    50% {
        filter:grayscale(1);
        transform: rotate(180deg);
    }

    100% {
        filter:grayscale(0);
        transform: rotate(360deg);
    }
}