@font-face {
    font-family: 'vcr';
    /* Escolha um nome para a fonte */
    src: url('../media/VCR2.ttf') format('truetype');
    font-weight: normal;
    /* Pode ser 'bold' se for uma fonte em negrito */
    font-style: normal;
    /* Pode ser 'italic' se for uma fonte itálica */
}

::-webkit-scrollbar {
    background-color: rgb(59, 59, 59);
    border-radius: 0.5vh;
    width: 1.7vw;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(143, 143, 143);
    border-radius: 0.3vh;
}

body {
    user-select: none;
    font-family: 'vcr';
    margin: 0;
    overflow: hidden;
    background-color: black;
}

header {
    background-color: rgb(0, 0, 0);
    border-bottom: 0.3vh rgba(255, 0, 0, 0) dashed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* input range */
.slidecontainer {
    width: 100%;
    /* Width of the outside container */
}

/* The slider itself */
.slide {
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    /* Full-width */
    height: 0.5vh;
    /* Specified height */
    background: #202020;
    border-radius: 1vh;
    /* Grey background */
    outline: none;
    /* Remove outline */
    /* opacity: 0.7; */
    /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s;
    /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slide:hover {
    opacity: 1;
    /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slide::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: rgb(226, 226, 226);
    border-radius: 100%;
    width: 15px;
    height: 15px;
}

.slide::-webkit-slider-thumb:hover {
    background-color: white;
}

.cont {
    background-color: black;
    height: 85vh;
    width: 100%;
    display: flex;
    justify-content: center;
}

.descCont {
    width: 90%;
    margin: auto;
    padding-bottom: 3vh;
}

.descContFlex,
.descContFlex3 {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: rgba(0, 0, 0, 0.199);
    padding: 2% 0;
    margin: 1.5% 0;
}

.descContFlex2 {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.199);
    padding: 2% 0;
    margin: 1.5% 0;
}

.descContFlex3 img {
    height: 40vh;
    border: 0.3vh solid white;
}

.descContItem {
    text-align: center;
}

.descContItem3 {
    width: 50%;
    text-align: center;
}

.descContItem img {
    border: 0.3vh solid red;
}

.descContItem .itemDesc {
    font-size: 2.5vh;
    color: red;
    margin: 3% 0 0 0;
}

.descContItem2 img {
    border: 0.3vh solid yellow;
}

.descContItem2 .itemDesc {
    font-size: 2.5vh;
    color: yellow;
    margin: 3% 0 0 0;
}

.descContItem img,
.descContItem2 img {
    height: 20vh;
}

.descContItem3 img {
    width: 30vh;
}

.descContItem3 span {
    color: white;
    display: block;
    height: auto;
    font-size: 3vh;
    text-align: left;
    align-items: end;
    justify-content: left;
}

.descContItem4 img {
    height: 30vh;
}

.loading {
    text-align: center;
    color: white;
    font-size: 2vh;
    margin: 1% auto auto auto;
    display: none;
}

.menuCont {
    display: block;
    margin-top: 5%;
}

.menuCont2 {
    display: none;
    margin-top: 5%;
}

.menuCont3 {
    display: none;
    width: 60%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.384);
}

.menuCont4 {
    display: none;
    width: 75%;
    text-align: center;
    overflow-y: scroll;
    background-color: rgba(0, 0, 0, 0.644);
}

.sec {
    filter: blur(0);
    margin: 0;
    padding: 0;
    width: 100%;
    top: 0;
    position: relative;
    color: white;
}

.sec h1 {
    font-size: 5.5vh;
    margin-top: 2%;
    margin-bottom: 2%;
    padding: 0;
    font-weight: lighter;
}

.sec4 h2{
    margin-bottom: 1%;
    font-size: 5vh;
    font-weight: lighter;
    color: red;
}

.sec4 table{
    border: 0.3vh white solid;
    margin: 1% auto 0 auto;
    width: 80%;
}

.sec4 table thead tr th{
    border: 0.3vh white solid;
}


.sec4 table tbody tr td{
    border-bottom: 0.3vh white solid;
}

.secP {
    font-size: 3.5vh;
    margin: 0;
}

.secP2 {
    text-align: justify;
    font-size: 3.5vh;
    margin: 0 0 5% 0;
}

.banner {
    bottom: 0;
    left: 0;
    z-index: 0;
    margin: 0;
    width: 100%;
    height: 40vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.b1 {
    background-image: url(../media/banner/overview.jpg);
    border-bottom: 1vh rgb(97, 0, 0) solid;
}

.b2 {
    background-image: url(../media/banner/gameStory.jpg);
    border-bottom: 1vh rgb(173, 0, 0) solid;
}

.b3 {
    background-image: url(../media/banner/protagonist.png);
    border-bottom: 1vh rgb(0, 0, 0) solid;
    background-position-y: 20%;
}

.b4 {
    background-image: url(../media/banner/enemies.jpg);
    border-bottom: 1vh rgb(0, 0, 0) solid;
}

.b5 {
    background-image: url(../media/banner/ultrakillbosses.jpg);
    border-bottom: 1vh rgb(255, 255, 255) solid;
}

.optionsTitle {
    color: white;
    font-weight: lighter;
    font-size: 7vh;
}

.optionsCont {
    background-color: rgba(0, 128, 0, 0);
    height: 75%;
    overflow-y: scroll;
    width: 80%;
    margin: auto;
}

.option {
    color: white;
    font-size: 2.5vh;
    margin: 0 auto 2% auto;
    width: 90%;
    height: 8%;
    background-color: rgb(0, 0, 0);
    border-radius: 0.6vh;
    padding: 1.5% 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: lighter;
    text-transform: uppercase;
}

.optionDesc {
    background-color: rgba(0, 0, 255, 0);
    margin-right: 20%;
    margin-left: 5%;
    text-align: start;
}

.option1 {
    background-color: rgba(0, 0, 255, 0);
    border: 0.7vh white solid;
    border-radius: 0.8vh;
    padding: 1.5% 6%;
    margin-right: 20%;
}

.option1:hover {
    border: 0.7vh solid rgb(182, 182, 182);
    transition: 200ms;
}

.option1:active {
    border: 0.7vh solid rgb(255, 0, 0);
}

.option2 {
    background-color: rgba(0, 0, 255, 0);
    border-radius: 0.8vh;
    padding: 1.5% 6%;
    margin-right: 10%;
    width: 30%;
}

.option2:hover {
    transition: 200ms;
}

.secCont {
    background-color: rgba(255, 0, 0, 0);
    display: block;
    color: white;
    text-align: center;
}

.leftCont {
    position: absolute;
    left: 0;
    width: 30vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.671);
    top: 0;
}

.leftCont h1,
.desc h1 {
    font-weight: lighter;
    color: white;
    text-align: center;
    font-size: 4vh;
    padding: 0 2%;
    margin-top: 4%;
}

.rightCont {
    position: absolute;
    right: 0;
    width: 30vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.671);
    top: 0;
}

.section {
    width: 90%;
    margin: 0 auto 10% auto;
    display: block;
}

.section hr,
.desc hr {
    height: 0;
    border-width: 0.1vh;
    margin: 1% 0;
}

.section p {
    color: white;
    margin-left: 5%;
    margin-bottom: 0;
    font-size: 3vh;
}

.section span {
    display: block;
    width: 92.2%;
    border: 0.5vh solid white;
    border-radius: 0.3vh;
    color: white;
    font-size: 3vh;
    margin-bottom: 2%;
    padding: 2% 3%;
    transition: 250ms;
    position: relative;
}

.section .unchecked::after {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    display: flex;
    justify-content: center;
    margin-top: 0;
    height: 2.5vh;
    width: 2.5vh;
    border: 0.5vh solid white;
    border-radius: 0.3vh;
}

.checked::after{
        position: absolute;
        right: 3%;
        top: 50%;
        transform: translateY(-50%);
        content: 'X';
        color: red;
        font-size: 2.5vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        height: 2.5vh;
        width: 2.5vh;
        border: 0.5vh solid white;
        border-radius: 0.3vh;
}

.section span:hover {
    border: 0.5vh solid rgb(182, 182, 182);
}

.section span:active {
    border: 0.5vh solid rgb(255, 0, 0);
    transition: 250ms;
}

.back {
    user-select: none;
    cursor: default;
    font-size: 3vh;
    text-align: center;
    color: rgb(255, 255, 255);
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
}

.back:hover {
    color: rgb(170, 170, 170);
}

.back2 {
    user-select: none;
    cursor: default;
    font-size: 2vh;
    text-align: center;
    background-color: rgb(0, 0, 0);
    color: white;
    border: 0.7vh white solid;
    border-radius: 0.8vh;
    padding: 1% 3%;
    position: fixed;
    top: 3%;
    left: 5%;
}

.back2:hover,
.back3:hover {
    transition: 200ms;
    border: 0.7vh solid rgb(122, 122, 122);
}

.back2:active,
.back3:active {
    transition: 200ms;
    border: 0.7vh solid rgb(255, 0, 0);
}

.back3 {
    display: none;
    user-select: none;
    cursor: default;
    font-size: 2vh;
    text-align: center;
    background-color: rgb(0, 0, 0);
    color: white;
    border: 0.7vh white solid;
    border-radius: 0.8vh;
    padding: 1% 3%;
    position: fixed;
    top: 3%;
    left: 5%;
    z-index: 0;
}

.secCont span {
    cursor: default;
    border-radius: 0.5vh;
    font-size: 5.2vh;
    margin: 0.7% auto;
    padding: 3% 0;
    text-align: center;
    display: block;
    width: 68%;
    background-color: rgba(0, 0, 0, 0.466);
}

.secCont span:hover {
    transition: 200ms;
    background-color: rgba(255, 255, 255, 0.425);
}

.secCont span:active {
    background-color: red;
}

.logo {
    height: 17%;
    padding: 0;
}

.subtitle {
    cursor: default;
    margin-top: 0;
    color: white;
    font-size: 4.3vh;
    text-align: center;
}

#about {
    user-select: none;
    color: rgb(255, 255, 255);
    width: fit-content;
    height: fit-content;
    padding: 1% 2%;
    font-size: 5vh;
    border: red solid 0.3vh;
    margin: auto;
    font-family: 'vcr';
}

.al {
    background-color: rgba(0, 0, 255, 0);
    height: fit-content;
    width: 50%;
    text-align: center;
    margin-top: 10%;
}

#about:hover {
    background-color: rgba(255, 0, 0, 0.336);
}


#coin {
    text-align: center;
    height: 10vh;
    position: absolute;
    animation: coinAnimation 2s ease-out infinite;
    z-index: 0;
    display: none;
}

#coinTrail {
    position: absolute;
    bottom: -150%;
    left: 3.3vh;
    opacity: 50%;
    height: 20vh;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 1) 100%);
    width: 1.1vw;
}

#sprite {
    position: absolute;
    height: 100%;
    z-index: 2;
    filter: blur(0.3vh);
    animation: spriteAnimation 2s ease-out infinite;
}

#shine {
    position: absolute;
    top: 0;
    left: -1vh;
    z-index: -1;
    height: 100%;
    rotate: 45deg;
    animation: shineAnimation 1.5s linear infinite;
}

#v1 {
    position: absolute;
    left: 0;
    transform: scaleX(-1);
    height: 55vh;
    animation: v1Animation 1s linear infinite;
    display: none;
}


#bullet {
    height: 50px;
    position: absolute;
    animation: bulletAnimation 2s linear infinite;
    display: none;
}

.mainMenu {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.514);
    display: none;
    justify-content: center;
}

.backgroundVideo {
    display: none;
    position: absolute;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: 250ms;
}

#background-video {
    width: 100vw;
    height: 100vh;
    position: absolute;
    object-fit: cover;
    /* O vídeo cobrirá todo o elemento body */
}

.leftCont,
.secCont span,
.rightCont,
.back,
.menuCont3,
.menuCont4,
.bossDialog,
.bossName,
.bossDesc,
.mfBody {
    animation: menuItens 0.15s ease forwards
}

.desc {
    color: white;
    width: 90%;
    margin: auto;
}

.desc p {
    margin: 1%;
    font-size: 3vh;
    line-height: 3.2vh;
    word-spacing: 0;
}

.desc {
    display: none;
}

.menuBosses {
    width: 100%;
    height: 100%;
    display: none;
}

/* Bosses */

/* Malicious Face */
.mfBoss {
    width: 100%;
    height: 100%;
    display: none;
}

.mfBoss::after {
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-size: 150%;
    background-position: center;
    background-image: url(../media/bosses/background/mfBg2.webp);
    filter: blur(0.5vh) brightness(0.2);
}

.mfBanner {
    background-image: url(../media/bosses/background/mfBg.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-bottom: 0.3vh black solid;
    display: flex;
    justify-content: center;
    text-align: center;
}

.mfBanner .bossDialog {
    position: absolute;
    bottom: 10%;
    left: 20%;
}

.mfBody {
    position: absolute;
    text-align: center;
    margin-top: 7%;
}

.mfBody img {
    height: 40vh;
    filter: drop-shadow(0 0 0.5vh red);
}

/* SwordsMachine */
.smBoss {
    width: 100%;
    height: 100%;
    display: none;
}

.smBoss::after {
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-size: 150%;
    background-position: center;
    background-image: url(../media/bosses/background/mfBg2.webp);
    filter: blur(0.5vh) brightness(0.2);
}

.smBanner {
    background-image: url(../media/bosses/background/mfBg.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-bottom: 0.3vh black solid;
    display: flex;
    justify-content: center;
    text-align: center;
}

.smBanner .bossDialog {
    position: absolute;
    bottom: 10%;
    left: 20%;
}

.smBody {
    position: absolute;
    text-align: center;
    margin-top: 7%;
}

.smBody img {
    height: 40vh;
    filter: drop-shadow(0 0 0.5vh red);
}

/* Cerberus */
.cbBoss {
    width: 100%;
    height: 100%;
    display: none;
}

.cbBoss::after {
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-size: 150%;
    background-position: center;
    background-image: url(../media/bosses/background/mfBg2.webp);
    filter: blur(0.5vh) brightness(0.2);
}

.cbBanner {
    background-image: url(../media/bosses/background/mfBg.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-bottom: 0.3vh black solid;
    display: flex;
    justify-content: center;
    text-align: center;
}

.cbBanner .bossDialog {
    position: absolute;
    bottom: 10%;
    left: 20%;
}

.cbBody {
    position: absolute;
    text-align: center;
    margin-top: 7%;
}

.cbBody img {
    height: 40vh;
    filter: drop-shadow(0 0 0.5vh red);
}

/* Hideous Mass */
.hmBoss {
    width: 100%;
    height: 100%;
    display: none;
}

.hmBoss::after {
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-size: 150%;
    background-position: center;
    background-image: url(../media/bosses/background/mfBg2.webp);
    filter: blur(0.5vh) brightness(0.2);
}

.hmBanner {
    background-image: url(../media/bosses/background/mfBg.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-bottom: 0.3vh black solid;
    display: flex;
    justify-content: center;
    text-align: center;
}

.hmBanner .bossDialog {
    position: absolute;
    bottom: 10%;
    left: 20%;
}

.hmBody {
    position: absolute;
    text-align: center;
    margin-top: 7%;
}

.hmBody img {
    height: 40vh;
    filter: drop-shadow(0 0 0.5vh red);
}

/* Sysyphean */
.syBoss {
    width: 100%;
    height: 100%;
    display: none;
}

.syBoss::after {
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-size: 150%;
    background-position: center;
    background-image: url(../media/bosses/background/mfBg2.webp);
    filter: blur(0.5vh) brightness(0.2);
}

.syBanner {
    background-image: url(../media/bosses/background/mfBg.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-bottom: 0.3vh black solid;
    display: flex;
    justify-content: center;
    text-align: center;
}

.syBanner .bossDialog {
    position: absolute;
    bottom: 10%;
    left: 20%;
}

.syBody {
    position: absolute;
    text-align: center;
    margin-top: 7%;
}

.syBody img {
    height: 40vh;
    filter: drop-shadow(0 0 0.5vh red);
}

/* Ferryman */
.fmBoss {
    width: 100%;
    height: 100%;
    display: none;
}

.fmBoss::after {
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-size: 150%;
    background-position: center;
    background-image: url(../media/bosses/background/mfBg2.webp);
    filter: blur(0.5vh) brightness(0.2);
}

.fmBanner {
    background-image: url(../media/bosses/background/mfBg.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-bottom: 0.3vh black solid;
    display: flex;
    justify-content: center;
    text-align: center;
}

.fmBanner .bossDialog {
    position: absolute;
    bottom: 10%;
    left: 20%;
}

.fmBody {
    position: absolute;
    text-align: center;
    margin-top: 7%;
}

.fmBody img {
    height: 40vh;
    filter: drop-shadow(0 0 0.5vh red);
}

.v2Boss {
    width: 100%;
    height: 100%;
    display: none;
}

.v2Boss::after {
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-size: 150%;
    background-position: center;
    background-image: url(../media/bosses/background/v2Bg.png);
    filter: blur(0.5vh);
}

.bossCont {
    z-index: 1;
    width: 70%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.541);
    margin: auto;
    overflow-y: scroll;
}

.bossDesc {
    margin-top: 5%;
    padding: 0 3%;
}

.bossDesc p {
    font-size: 3.5vh;
    color: white;
}

.bossDesc h1 {
    font-size: 5vh;
    color: red;
    text-align: center;
}

.bossTransition {
    width: 100%;
    height: 100%;
    background-color: black;
    display: none;
}

.bossBanner {
    width: 100%;
    height: 55vh;
}

.v2Banner {
    background-image: url(../media/bosses/background/v2Bg.png);
    background-position-x: 45%;
    background-position-y: 48%;
    /* Ajuste conforme necessário */
    background-size: 380%;
    background-repeat: no-repeat;
    position: relative;
    border-bottom: 0.3vh black solid;
}

.v2Banner .bossDialog {
    position: absolute;
    bottom: 10%;
    left: 20%;
}

.bossBody {
    background-color: rgba(0, 128, 0, 0);
}

/* Caso corpo seja fiel */
/*.v2Body{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -21%;
}

.v2Body img{
    height: 70vh;
}
*/

/* Caso corpo seja caricato */
.v2Body {
    position: absolute;
    right: 1%;
    bottom: -21%;
}

.v2Body img {
    height: 60vh;
}

.bossName {
    font-size: 5vh;
    color: red;
    text-align: center;
}

.bossDialog {
    padding: 0.5% 2%;
    color: black;
    width: 30%;
    font-size: 4vh;
    background-color: #E68C31;
    border: 0.3vh red solid;
}

.terminal {
    background-color: black;
    border: 1vh double white;
    text-align: justify;
    padding: 2%;
    color: blue;
}

.terminal p{
    margin-top: 1%;
}

.terminal span{
    display: flex;
    text-align: center;
    justify-content: center;
    background-color: blue;
    color: black;
    font-size: 5vh;
    animation: blink 1.5s infinite steps(2);
}

.terminal .secP {
    font-size: 3.5vh;
    margin: 2% 0 2% 0;
}

.credits {
    text-transform: uppercase;
    font-size: 2vh;
    position: absolute;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    color: white;
}

.altLogin {
    width: 5vw;
    height: 5vw;
    color: black;
    border: rgb(0, 0, 0) 0.3vh solid;
    position: absolute;
    top: 1%;
    right: 1%;
}

.altLogin:hover {
    border: green 0.3vh solid;
}

.bootup {
    display: none;
    background-color: black;
    width: 100vw;
    height: 100vh;
}

.code {
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10% 20%;
    background-color: rgba(255, 0, 0, 0);
}

.p1 {
    font-size: 3.5vh;
    color: white;
    display: flex;
    white-space: nowrap;
    height: auto;
    width: 50%;
    background-color: rgba(255, 0, 0, 0);
    letter-spacing: 50%;
}

.p2 {
    font-size: 3.5vh;
    color: rgb(0, 200, 0);
    display: flex;
    white-space: nowrap;
}

.p3 {
    font-size: 3.5vh;
    color: rgb(200, 0, 0);
    display: flex;
    white-space: nowrap;
    margin-left: 10vw;
}

.loadDot {
    background-color: green;
    text-align: left;
    font-size: 3.5vh;
    color: white;
    display: flex;
    white-space: nowrap;
    height: 3.5vh;
    width: 0%;
    /* animation: loading 1s steps(3); */
}

.typing {
    animation: typing 1.8s steps(30, end);
    overflow: hidden;
    display: none;
}

.bootModal{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vh;
    height: 55vh;
    transform: translatey(-50%) translateX(-50%);
    background-color: rgba(0, 0, 0, 0.578);
    border: white 0.5vh solid;
    border-radius: 1vh;
    color: white;
    align-items: center;
}

.bootModal h1{
    text-align: center;
    font-weight: lighter;
    text-transform: uppercase;
}

.bootModal .modalLine{
    background-color: black;
    display: flex;
    justify-content: space-around;
    text-transform: uppercase;
}

.bootModal .modalLine:last-child{
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    width: 100%;
    bottom: 5%;
}

.volumeStatus{
    font-size: 3vh;
    width: 10%;
}

#modalNextStep{
    font-family: 'vcr';
    font-size: 2.5vh;
    text-transform: uppercase;
    color: white;
    background-color: rgba(0, 0, 255, 0);
    border: 0.5vh white solid;
    border-radius: 0.8vh;
    padding: 2% 8%;
}

#modalNextStep:hover{
    border: 0.5vh solid rgb(182, 182, 182);
    transition: 200ms;
}

#modalNextStep:active{
    border: 0.5vh solid rgb(255, 0, 0);
}

@keyframes coinAnimation {
    0% {
        bottom: -10%;
        right: 20%;
    }

    30% {}

    35% {

        opacity: 100%;
    }

    36% {
        bottom: 30%;
        opacity: 0%;
    }

    60% {
        bottom: 30%;
    }

    100% {
        bottom: -15%;
        right: 20%;
        opacity: 0%;
    }
}

@keyframes spriteAnimation {
    0% {
        rotate: -100deg;
    }

    60% {
        rotate: 1000deg;
    }

    100% {
        rotate: 1000deg;
        scale: 0.1;
    }
}

@keyframes bulletAnimation {
    0% {
        right: 50%;
        bottom: -10%;
        rotate: -55deg;
    }

    33% {
        bottom: -10%;
        right: 50%;
        rotate: -55deg;
        opacity: 100%;
    }

    35% {
        rotate: -55deg;
    }

    36% {
        bottom: 35%;
        right: 20%;
        rotate: -150deg;
        opacity: 100%;
    }

    39% {
        right: 45%;
        bottom: 50%;
        opacity: 0;
    }

    60% {
        bottom: 55%;

    }

    100% {
        right: 45%;
        bottom: 55%;
        rotate: -130deg;
        opacity: 0;
    }
}

@keyframes shineAnimation {
    from {
        opacity: 0%;
    }

    to {
        opacity: 100%;
        scale: 1.2;
    }
}

@keyframes v1Animation {
    from {
        left: -50%;
        bottom: 50%;
    }

    to {
        left: 80%;
        bottom: -100%;
        rotate: -80deg;
    }
}

@keyframes menuItens {
    from {
        transform: rotateX(-0.3turn);
    }

    to {
        transform: rotateX(0);
    }
}

@keyframes typing {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes loading {
    from {
        width: 0%;
    }

    to {
        width: auto;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: white;
    }
}

@keyframes blink {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 100%;
    }
}