:root {
    --text-color-1: #fff;
    --main-bg-color: #151515;
    --bg-color-1: rgba(43, 42, 67, 0.5);
    --bg-color-2: rgba(43, 42, 67, 0.37);
    --box-shadow-1: 0px 0px 20px rgba(8, 8, 19, 0.1);
    --box-shadow-2: 0px 0px 10px rgba(8, 8, 19, 0.2);
    --bg-name-card: linear-gradient(91.14deg, #633076 0%, #3B3D99 100%);
    --footer-bg-1: #292832;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #201e27;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--bg-name-card);
    border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #6f42c1;
}

.body-page {
    background: var(--main-bg-color);
    color: var(--text-color-1);
    font-family: 'Montserrat', sans-serif;
    height: 100%;
}

.bg-page {
    position: fixed;
    width: 100%;
    height: calc(100vh + 60px);
    top: -60px;
    background: url('../img/main/bg-image-2.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -1;
}

.header {
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 60px;
    background: var(--bg-color-1);
    box-shadow: var(--box-shadow-1);
    backdrop-filter: blur(10px);
    z-index: 9999;
}

.header .logo-wrap {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.btn-main {
    background: var(--bg-name-card);
    padding: 20px 80px;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 10px;
    transition: .3s;
}

.btn-main:focus,
.btn-main:active,
.btn-main:hover {
	color: #fff;
	box-shadow: 0 0 20px #0000008a;
	transform: scale(1.02);
	transition: .3s;
}

.main .btn-main {
	margin-top: 20px;
}

.footer {
    padding: 20px 0;
    background: var(--footer-bg-1);
}

.footer .footer-copyright {
    font-size: 14px;
    text-align: center;
}

.info-site {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 20px;
    right: 20px;
}

.info-site .version {
    margin-right: 14px;
    color: #ffffff2e;
}

.info-site .creator a {
    color: #ffffff2e;
    text-decoration: none;
}

.info-site .creator a:hover {
    color: #fff;
}