:root{
	--form-ligt: #ffffffcf;
	--form-dark: #000000cf;
}

body{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
    background: linear-gradient(90deg, #E40428 48%, #143A84 52%);
	font-family: Arial, Helvetica, sans-serif;
}

.content-wrapper{
	overflow: hidden;
    height: 100vh;
    min-height: 100vh;
    width: 100vw;
    max-width: 1200px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    justify-self: center;
	
}

.login-image-wrapper{
	width: 100%;
	position: relative;
}

canvas{display: none;}

#train{
	width: min(1500px, 120%);
	position: absolute;
	left: 0%;
	animation: move-train 5s linear infinite;
}

@keyframes move-train {
	from{left: -150%}
	to{left: 110%}
}

form{
	padding: 20px;
	background-color: light-dark(var(--form-ligt), var(--form-dark));
	border-radius: 10px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: 0.02rem;
	anchor-name: --flag-anchor;
}

form>button{
	font-size: 1rem;
	padding: 0.5rem;
}
form>input{
	font-size: 0.9rem;
	padding: 0.45rem;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

#login-button {
  border: 4px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(var(--angle), #E40428 35%, #143A84 65%) border-box;
  animation: button-spin linear 3s infinite;
}

@keyframes button-spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

#error-message{
	position: absolute;
    position-anchor: --flag-anchor;
    background: #000000;
    color: #ffffff;
    position-area: bottom;
    padding: 5px;
    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%);
}

.hidden{display: none}