:root {
	--font-title: #ffffff;
	--font-body: rgba(254, 252, 255, 1);
	--font-transparent: rgba(254, 252, 255, 0.3);
	--font-link: #a21fd0;
	--font-link-hover: #ead79d;
	--font-link-active: #ffffff;
	--background: #0a0a0a;
	--background-off: rgba(26, 26, 26, 0.75);
	--nav-font: #ead79d;

	--corner-radius: 0.4rem;
}

@font-face {
	font-family: "Montserrat Black";
	src: url("/assets/Montserrat-Black.ttf") format("truetype");
	font-style: normal;
}

@font-face {
	font-family: "Montserrat Regular";
	src: url("/assets/Montserrat-Regular.ttf") format("truetype");
	font-style: normal;
}

html {
	overflow-x: hidden;
}

body {
	display: flex;
    flex-direction: column;
	margin: 0;
	max-width: 100%;
	overflow: hidden;
	font-family: "Montserrat Regular", sans-serif;
	background-color: var(--background);
	min-height: 100vh;	
}

button {
	font-family: "Montserrat Regular", sans-serif;
	font-size: 1rem;
}

.backgroundimage {	
	position: fixed;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100lvh;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
	z-index: -2;
	transition: all 0.15s ease;
}

.backgroundimage--home {background-image: url("/assets/background-home.png");}
.backgroundimage--teams {background-image: url("/assets/background-teams.png");}

.card {
	background-color: var(--background-off);
	border-radius: var(--corner-radius);
	padding: 2.5rem 1rem;
	border: 1px solid rgba(76, 0, 255, 0.3);
	backdrop-filter: blur(0.5rem);
}

.neon-line {
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		#4c00ff,
		transparent
	);
	margin: 1rem auto;
	width: 17rem;
	max-width: 80%;
	box-shadow: 0 0 10px #4c00ff;
}

.glow-effect {
	animation: glow 3s infinite;
}

.highlight-effect {
	position: relative;
	animation: highlightborder 2.5s ease-in-out infinite;
}

.highlight-effect::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	z-index: -1; 
	border-radius: inherit;

	background: radial-gradient(
	circle at center, 
	rgba(76, 0, 255, 0.6), 
	rgba(10, 5, 20, 0) 60%
	);

	background-size: 350% 350%;  
	animation: gradientFlash 45s ease-in-out infinite;
}

.highlight-effect_alt::before {
	animation: gradientFlash 65s ease-in-out infinite;
}

.title-text {
	color: var(--font-title);
	font-family: "Montserrat Black", sans-serif;
	font-size: clamp(1rem, 2.5rem, 8cqw);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	text-shadow: 0 0 0.5rem rgba(76, 0, 255, 0.5), 0 0 1rem rgba(76, 0, 255, 0.3);
}

.subtitle-text {
	margin-bottom: 1rem;
	color: var(--font-title);
	font-family: "Montserrat Black", sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	text-shadow: 0 0 0.5rem rgba(76, 0, 255, 0.5), 0 0 1rem rgba(76, 0, 255, 0.3);
}

/* text links */

a {
	transition: all 0.15s ease;
}

a:link {
	color: var(--font-link);
	text-decoration: none;
}
a:visited {
	color: var(--font-link);
	text-decoration: none;
}
a:hover {
	color: var(--font-link-hover);
	text-decoration: none;
}
a:active {
	color: var(--font-link-active);
	text-decoration: none;
}

/* forms */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.form-field {
  color: #ffffff;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.form-group input {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(76, 0, 255, 0.3);
  border-radius: 0.2rem;
  padding: 0.8rem 1rem;
  color: #ffffff;
  transition: all 0.3s ease;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.form-group input:hover {
  border-color: rgba(76, 0, 255, 0.5);
  box-shadow: 0 0 5px rgba(76, 0, 255, 0.2);
}

.form-group input:focus {
  outline: none;
  border-color: #4c00ff;
  box-shadow: 0 0 10px rgba(76, 0, 255, 0.3);
}

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0px 1000px rgba(26, 26, 26, 0.95) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.form-group input.error {
  border-color: rgba(255, 50, 50, 0.5);
}

.form-group input.error:focus {
  box-shadow: 0 0 10px rgba(255, 50, 50, 0.3);
}

.form-group input::placeholder {
	font-family: "Montserrat Regular", sans-serif;	
}

/* buttons */

.button {
  transition: all 0.3s ease;
  background: linear-gradient(45deg, rgba(120, 0, 255, 0.2), rgba(124, 0, 255, 1));  
  background-size: 150% 150%;
  background-position: 0% 0%;
  border: none;
  border-radius: var(--corner-radius);
  padding: 1rem 2rem;
  color: var(--font-body);
  cursor: pointer;  
  margin: 1rem;
  box-shadow: 0 0 0.5rem rgba(76, 0, 255, 0.3);  
  overflow: hidden;
}

.button:hover:not(:disabled) {
  transform: translateY(-0.15rem);
  box-shadow: 0 0 1rem rgba(76, 0, 255, 0.7);
  background-position: 100% 100%;
}

.button:active:not(:disabled) {
  transform: translateY(0);
  background: linear-gradient(45deg, #3900cc, #6600cc);
}

.button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  background: linear-gradient(45deg, #333, #444);
  box-shadow: none;
}

.button--delete {
	background: linear-gradient(45deg, rgba(255, 0, 115, 0.2), rgba(255, 0, 55, 1));
	box-shadow: 0 0 0.5rem rgba(255, 0, 75, 0.5); 
	padding: 0.5rem 1rem;
	background-size: 150% 150%;
  	background-position: 0% 0%;
}

.button.button--delete:hover:not(:disabled) {
  transform: translateY(-0.15rem);
  box-shadow: 0 0 0.5rem rgba(255, 0, 75, 1); 
  background-position: 100% 100%;
}

/* button a overrides */
a.button {
	color: var(--font-link-hover);
}

a.button:hover {
	color: var(--font-link-active);
}

@keyframes glow {
	0% {
		box-shadow: 0 0 2rem rgba(76, 0, 255, 0.15);
	}
	50% {
		box-shadow: 0 0 4rem rgba(76, 0, 255, 0.35);
	}
	100% {
		box-shadow: 0 0 2rem rgba(76, 0, 255, 0.15);
	}
}

@keyframes highlightborder {
	0% {
        border-color: rgba(76, 0, 255, 0.8);
        box-shadow: 0 0 15px rgba(76, 0, 255, 0.35);
    }
    50% {
        border-color: rgba(76, 0, 255, 1);
        box-shadow: 0 0 35px rgba(76, 0, 255, 0.85);
    }
    100% {
        border-color: rgba(76, 0, 255, 0.8);
        box-shadow: 0 0 15px rgba(76, 0, 255, 0.35);
    }
}

@keyframes gradientFlash {
  0% {
    background-position: -50% 0%;
    background-size: 350% 350%;
    opacity: 0.3;
  }
  50% {
    background-position: 150% 50%;
    opacity: 0.4;
  }
  70% {
    background-position: 50% 100%;    
    opacity: 0.3;
  }
  75% {
    background-size: 800% 700%;
    opacity: 1;
  }
  80% {
    background-size: 350% 350%;
    opacity: 0.3;
  }
  100% {
    background-position: -50% 0%;
    background-size: 350% 350%;
    opacity: 0.3;
  }
}

@keyframes gradientRoll {
  0% {
    background-position: -50% 0%;
    background-size: 350% 350%;
    opacity: 0.3;
  }
  25% {
  	background-position: 150% -50%;
    opacity: 0.4;
  }
  50% {
    background-position: 150% 50%;
    opacity: 0.4;
  }
  70% {
    background-position: 50% 100%;    
    opacity: 0.3;
  }
  75% {
    background-size: 800% 700%;
    opacity: 1;
  }
  80% {
    background-size: 350% 350%;
    opacity: 0.3;
  }
  100% {
    background-position: -50% 0%;
    background-size: 350% 350%;
    opacity: 0.3;
  }
}