@font-face {
    font-family: 'QuadratGroteskNewW03';
    src: url('../fonts/1/QuadratGroteskNewW03-Bold.woff2') format('woff2'),
         url('../fonts/1/QuadratGroteskNewW03-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'QuadratGrotesk';
    src: url('../fonts/2/QuadratGroteskC.woff2') format('woff2'),
         url('../fonts/2/QuadratGroteskC.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unbounded';
    src: url('../fonts/3/Unbounded-ExtraLight.woff2') format('woff2'),
         url('../fonts/3/Unbounded-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

html{
	scroll-behavior:smooth;
}

body{
	margin: 0;
	font-family: Arial;
	background-color: black;
	background: linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 100%), url('../images/bg.png');
	min-height: 100vh;
	display: flex;
}

video{
	object-fit: cover;
  	width: 100vw;
  	height: 100vh;
  	position: fixed;
  	top: 0;
  	left: 0;
  	opacity: 0.25;
}

button{
	outline: none;
}

button:hover{
	cursor: pointer;
}

#transformBtn{
	padding: 8px 14px; 
	margin: 10px; 
	float: left; 
	width: 50%; 
	background: rgba(0, 128, 26, 0.5); 
	color: white; 
	border-radius: 5px; 
	border-left: 3px solid rgba(0, 255, 52, 1); 
	outline: none; 
	border-top: none; 
	border-right: none; 
	border-bottom: none;
}

#transformBtn2{
	padding: 8px 14px; 
	margin: 10px; 
	float: left; 
	width: 50%; 
	background: rgba(0, 128, 26, 0.5); 
	color: white; 
	border-radius: 5px; 
	border-left: 3px solid rgba(0, 255, 52, 1); 
	outline: none; 
	border-top: none; 
	border-right: none; 
	border-bottom: none;
}

.chooseBtn{
	padding: 8px 14px; 
	margin: 5px; 
	background: rgba(255,255,255,0.3); 
	color: white; 
	border-radius: 5px; 
	border-left: 3px solid rgba(255,255,255, 1); 
	outline: none; 
	border-top: none; 
	border-right: none; 
	border-bottom: none;
}

#payBtn{
	padding: 8px 14px; 
	margin: 10px; 
	float: right; 
	width: 30%; 
	background: rgba(161, 0, 0, 0.5); 
	color: white; 
	border-radius: 5px; 
	border-left: 3px solid rgba(255,0,0, 1); 
	outline: none; 
	border-top: none; 
	border-right: none; 
	border-bottom: none;
}

#payBtn2{
	padding: 8px 14px; 
	margin: 10px; 
	float: right; 
	width: 30%; 
	background: rgba(161, 0, 0, 0.5); 
	color: white; 
	border-radius: 5px; 
	border-left: 3px solid rgba(255,0,0, 1); 
	outline: none; 
	border-top: none; 
	border-right: none; 
	border-bottom: none;
}

input{
	margin: 10px;
	padding: 12px;
	font-size: 16px;
	background: rgba(255,255,255,0.7);
	border-radius: 5px;
	outline: none;
	border-left: 2px solid red;
	border-right: 2px solid red;
	border-top: none;
	border-bottom: none;
	transition: 0.2s;
}

input:focus{
	background: rgba(255,255,255,1);
	transition: 0.2s;
}

/*Scrollbar*/

::-webkit-scrollbar {
	width: 7px;
}

::-webkit-scrollbar-track {
	background: rgba(0,0,0,1);
}
::-webkit-scrollbar-thumb {
	background: rgba(254, 231, 21,1);
}