@import "font.css";
@import 'theme.css';

body {
    background-color: var(--background);
    font-family: "Poppins";
    letter-spacing: 0px;
}

img {
    -webkit-user-drag: none;
    user-select: none;
}

.splash {
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translate(-50%);
    width: 140px;
    height: 140px;
    transition: opacity .3s, top 1.5s;
    opacity: 0;
}

.splash.opacity {
    opacity: 1;
}

.splash.translate {
    top: 129px;
}

.splash-message {
    position: absolute;
    top: 289px;
    left: 0px;
    width: 400px;
    font: normal normal bold 19px/29px Poppins;
    text-align: center;
    letter-spacing: 0px;
    transition: opacity 1.5s;
    color: var(--color);
    opacity: 0;
}

.splash-message.opacity {
    opacity: 1;
}

.splash-author {
    position: absolute;
    top: 326px;
    left: 0px;
    width: 400px;
    text-align: center;
    transition: opacity 1.5s;
    font: normal normal normal 9px/13px Poppins;
    color: var(--color);
    opacity: 0;
}

.splash-author .author {
    font: normal normal bold 9px/13px Poppins;
}

.splash-author.opacity {
    opacity: 1;
}

.message {
    position: absolute;
    top: 347px;
    left: 0px;
    width: 400px;
    text-align: center;
    transition: opacity 1.5s;
    font: normal normal bold 18px/27px Poppins;
    color: var(--color);
    opacity: 0;
}

.download-update {
    position: absolute;
    left: 25%;
    margin-top: 20px;
    width: 200px;
    font: normal normal bold 22px / 45px Poppins;
    color: var(--color);
    border: 2px solid var(--color);
    border-radius: 15px;
    transition: background-color .2s, color .2s;
}

.download-update:hover {
    background-color: var(--color);
    color: var(--background);
    cursor: pointer;
}

.message.opacity {
    opacity: 1;
}

.progress {
    position: absolute;
    top: 410px;
    left: 106px;
    width: 189px;
    height: 10px;
    appearance: none;
    transition: opacity .2s;
    opacity: 0;
}

.show {
    opacity: 1;
}

.progress::-webkit-progress-bar {
    background-color: var(--background);
    border: solid 1px var(--element-color);
    border-radius: 10px;
}

.progress::-webkit-progress-value {
    background-color: var(--element-color);
    border-radius: 10px;
}