.limiter {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
}

.container {
  width: 100%;  
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;

  position: relative;
  z-index: 1;    
}

#panel-login {
  width: 500px;
  overflow: hidden;
}

#panel-register {
  width: 500px;
  overflow: hidden;
}

#panel-validate {
  width: 500px;
  overflow: hidden;
}
/*
#uname, #pwd, #code, #accemail, #accuname, #accpass, #accpass2 {
  color: #ffffff;
  background-color: #333333;
}

#rname, #raddress1, #raddress2, #rcountry, #rphone, #remail, #runame, #rpass {
  color: #ffffff;
  background-color: #333333;
}

.form-floating > label::after {
    background-color: transparent !important;
}
*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at top, #0b1220 0%, #05070c 70%);
	position: relative;
	overflow-x: hidden;
}

body::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at top, #0b1220 0%, #05070c 70%);
	animation: shimmer 6s ease-in-out infinite;
}

.dark-mode {
	background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #000000 100%);
}

.title-dark-mode {
	font-weight: 900;
	background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-shadow: 0 4px 8px rgba(0,0,0,0.3);
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));	
}

@keyframes shimmer {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

@keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
}

.icon {
	width: 88px;
	height: 88px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: bounce 1.6s ease-in-out infinite;
}

/* Image itself */
.icon img {
  width: 110px;       /* overscale to crop text */
  height: auto;
  transform: translateY(-6px); /* pushes text out of view */
}

.icon:nth-child(1) { animation-delay: 0s; }
.icon:nth-child(2) { animation-delay: 0.12s; }
.icon:nth-child(3) { animation-delay: 0.24s; }
.icon:nth-child(4) { animation-delay: 0.36s; }
.icon:nth-child(5) { animation-delay: 0.48s; }

@keyframes bounce {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-8px) rotate(-5deg); }
	75% { transform: translateY(-4px) rotate(5deg); }
}

.input-group {
	margin-bottom: 16px;
}

.input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.input-icon {
	position: absolute;
	left: 18px;
	font-size: 20px;
	pointer-events: none;
	z-index: 1;
}

input {
	width: 100%;
	padding: 16px 20px 16px 52px;
	background: rgba(255, 255, 255, 0.95);
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-radius: 16px;
	color: #333333;
	font-size: 15px;
	font-weight: 600;
	transition: all 0.3s ease;
	outline: none;
}

input::placeholder {
	color: rgba(123, 31, 162, 0.5);
	font-weight: 500;
}

input:focus {
	background: #ffffff;
	border-color: #ffd700;
	box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
	transform: translateY(-2px);
}

#error-message1 {
	text-align: center;
	color: #ffd700;
	font-weight: 800;
}

#error-message2 {
	text-align: center;
	color: #ffd700;
	font-weight: 800;
}

#error-message3 {
	text-align: center;
	color: #ffd700;
	font-weight: 800;
}