html, body { height: 100%; }         /* legacy safety */
body {
  min-height: 100vh;                 /* fallback */
  min-height: 100dvh;                /* modern mobile-safe */
  background-color: #272430;
  background-image:
    linear-gradient(176deg, rgba(19,20,31,.5) 0%, rgba(50,45,56,.25) 100%),
    url(/assets/im/noise.png);
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
}


header {
	text-align: center;
}
	#logo-text img {
		max-width: 400px;
	}
	
	
	
#logo-text {
	margin-top: 25px;
	border-radius: 5px;
	overflow: hidden;
	background-color: #131218;
	animation: gradient 2s ease 1 forwards;
	width: 400px;
	height: 71px;
	margin-left: auto;
	margin-right: auto;
}

@keyframes gradient {
	0% {
		background-color: #131218;
	}
	50% {
		background-color: #E99530;
	}
	100% {
		background-color: #E99530;
	}
}



	
	
	
	
#main {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.foo {
	margin: 25px;
	padding: 25px;
	min-height: 240px;
	
	background: linear-gradient(168deg,rgba(70, 149, 208, 1) 0%, rgba(206, 124, 218, 1) 50%, rgba(238, 141, 92, 1) 100%);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5.8px);
	-webkit-backdrop-filter: blur(5.8px);
	border: 1px solid rgba(71, 145, 206, 0.31);
}

.card {
	margin: 25px;
	padding: 25px;
	min-height: 240px;
	
	background: linear-gradient(168deg,rgba(70, 149, 208, .1) 0%, rgba(206, 124, 218, .1) 50%, rgba(238, 141, 92, .1) 100%);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5.8px);
	-webkit-backdrop-filter: blur(5.8px);
	border: 1px solid rgba(71, 145, 206, 0.31);
}