* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}


/*  */
/*  */
/*  */


.txColor_Main {
	color: rgb(224, 207, 0);
}

.text {
	z-index: 900;
}

.textS {
	  font-size: 16px;
	line-height: 22px;
}

.textMid {
	font-size: 20px;
	font-weight: 500;
	line-height: 20px;
}

.textShdw {
	text-shadow: 0px 2px 14px rgba(0, 0, 0, 0.3);
}

.textBg {
	background: linear-gradient(to bottom, transparent, black);
	/* background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 50%, transparent 100%); */
}

.textBg2 {
	background: linear-gradient(to bottom, black, transparent);
	/* background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 50%, transparent 100%); */
}

.text .title {
	font-size: 60px;
	font-weight: 500;
	letter-spacing: -0.09em;
	line-height: 60px;
}

.text .titleM {
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -0.09em;
}

.text .super {
	font-size: 10vw;
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.09em;
	line-height: 10vw;
}

.text .bigger {
	font-size: 6vw;
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.09em;
	line-height: 6vw;
}

.text .big {
	font-size: 4vw;
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.09em;
	line-height: 4vw;
	margin-top: 1vw;
}

.text .mid {
	font-size: 40px;
	font-weight: 700;
	text-align: center;
	letter-spacing: -0.09em;
	line-height: 40px;
	margin-top: 1vw;
}

.text .small {
	font-size: 20px;
	font-weight: 400;
	text-align: center;
	line-height: 20px;
	margin-top: 1vw;
}

.text .normal {
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	line-height: 20px;
	margin-top: 1vw;
}

/* Media query for devices in portrait orientation, e.g., iPhones */
@media only screen and (max-width: 768px) and (orientation: portrait) {
    .text .super {
	    font-size: 12vw;
	    line-height: 12vw;
    }
    
    .text .big {
	    font-size: 4vw;
	    line-height: 4vw;
    }
    
    .text .mid {
	    font-size: 40px;
	    line-height: 40px;
    }
}


/*  */
/*  */
/*  */


.floatingButton {
	display: flex;
	justify-content: center; /* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	position: fixed;
	width: 100px;
	height: 100px;
	right: 5%;
	bottom: 5%;
	border-radius: 50px;
	border: 1px solid rgb(224, 207, 0);
	background-color: rgba(0, 0, 0, 0.597);
	text-align: center;
	color: white;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	z-index: 998;
	transition: 0.4s;
}

.floatingButton:hover {
	background-color: rgb(224, 207, 0);
	color: black;
}


/*  */
/*  */
/*  */


.maskAll {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: black;
	z-index: 999;
	text-align: center;
}

.maskAll .text {
	height: 40px;
	margin-top: calc(50vh - 140px);
	margin-bottom: 0;
	color: rgb(224, 207, 0);
}

.maskAll input[type=text] {
	position: relative;
	width: 200px;
	height: 30px;
	padding: 5px;
	background-color: #e0ce00;
	margin-top: 0;
	font-size: 16px;
	font-weight: bold;
	border: 0;
	text-align: center;
}

.maskAll .theButton {
	width: 100px;
	height: 30px;
	line-height: 30px;
	margin: 0 auto;
	margin-top: 20px;
	cursor: pointer;
	color: white;
	background-color: black;
	transition: 0.4s;
}

.maskAll .theButton:hover {
	background-color: #7b6dcf;
}


/*  */
/*  */
/*  */


.utilities {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 10px;
	color: #555;
}

.utilities a {
	color: #555;
}

.footer {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 10px;
	color: #555;
}