@font-face {
    font-family: valorant;
    src: url(Valorant\ Font.ttf);
 }


* {
    padding: 0;
    margin: 0;
}

h2 {
    color: #FFF;
    text-align: center;
    margin: 50px auto;
    font-size: 50px;
    font-family: valorant;
    letter-spacing: 30px;
    width: 100%;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


:root {
    --background-color: #0f1923;
}

body {
background-color: var(--background-color); 
background-image: url(img/raze-valorant-4k-mf.jpg);
background-size: 100%;
background-repeat: no-repeat;
}

.btn {
/* Clean style */
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
background: none;
padding: 0;
color: var(--button-text-color);
cursor: pointer;
/* Clean style */
--button-text-color: var(--background-color);
--button-text-color-hover: var(--button-background-color);
--border-color: #7D8082;
--button-background-color: #ece8e1;
--highlight-color: #ff4655;
--button-inner-border-color: transparent;
--button-bits-color: var(--background-color);
--button-bits-color-hover: var(--button-background-color);
position: relative;
padding: 8px;
margin-bottom: 20px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
-webkit-transition: all .15s ease;
transition: all .15s ease;
}

.btn::before,
.btn::after {
content: '';
display: block;
position: absolute;
right: 0;
left: 0;
height: calc(50% - 5px);
border: 1px solid var(--border-color);
-webkit-transition: all .15s ease;
transition: all .15s ease;
}

.btn::before {
top: 0;
border-bottom-width: 0;
}

.btn::after {
bottom: 0;
border-top-width: 0;
}

.btn:active,
.btn:focus {
outline: none;
}

.btn:active::before,
.btn:active::after {
right: 3px;
left: 3px;
}

.btn:active::before {
top: 3px;
}

.btn:active::after {
bottom: 3px;
}

.btn__inner {
position: relative;
display: block;
padding: 20px 30px;
background-color: var(--button-background-color);
overflow: hidden;
-webkit-box-shadow: inset 0px 0px 0px 1px var(--button-inner-border-color);
        box-shadow: inset 0px 0px 0px 1px var(--button-inner-border-color);
}

.btn__inner::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 2px;
background-color: var(--button-bits-color);
}

.btn__inner::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 4px;
height: 4px;
background-color: var(--button-bits-color);
-webkit-transition: all .2s ease;
transition: all .2s ease;
}

.btn__slide {
display: block;
position: absolute;
top: 0;
bottom: -1px;
left: -8px;
width: 0;
background-color: var(--highlight-color);
-webkit-transform: skew(-15deg);
        transform: skew(-15deg);
-webkit-transition: all .2s ease;
transition: all .2s ease;
}

.btn__content {
position: relative;
}

.btn:hover {
color: var(--button-text-color-hover);
}

.btn:hover .btn__slide {
width: calc(100% + 15px);
}

.btn:hover .btn__inner::after {
background-color: var(--button-bits-color-hover);
}

.btn--light {
--button-background-color: var(--background-color);
--button-text-color: var(--highlight-color);
--button-inner-border-color: var(--highlight-color);
--button-text-color-hover: #ece8e1;
--button-bits-color-hover: #ece8e1;
}
  /*# sourceMappingURL=style.css.map */
/* 
.bg_video{
	position: fixed; 
	right: 0; 
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
	width: auto; 
	height: auto; 
	z-index: -1000;
	background: url(valorant_fundo.jpg) no-repeat;
	background-size: cover; 
} */

.fundo {
    position: fixed; 
	top: 0;
    left: 25%;
	max-width: 100%; 
	max-height: 100%;
	/* width: auto; 
	height: auto;  */
	z-index: -1000;
	background-size: 100%; 
    opacity: 0.6;
}