:root {
  --magenta: #e91e63;
  --dark-bg: #121212;
  --dark-card: #1e1e1e;
  --dark-input: #2d2d2d;
}

html, body {
  height: 100%;
}

.accent-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--magenta), transparent);
  margin: 0;
}

.btn-magenta{
  background-color: var(--magenta);
  border: none;
}

.btn-magenta:hover{
  border: var(--magenta) solid 2px;
  background: none;
  box-shadow: var(--magenta) 0px 0px 10px;
}

a{
  color: white;
  text-decoration: none;
}

.btn-magenta-outline{
  border: var(--magenta) solid 2px;
}

.btn-magenta-outline:hover{
  background-color: var(--magenta);
  border: none;
  box-shadow: var(--magenta) 0px 0px 10px;
}

.card-dark{
  background-color: var(--dark-card);
  transition: ease all 0.1s;
}

.card-dark:hover{
  box-shadow: 0px 5px 10px black;
  transform: translateY(-5px);
}

.form-dropdown{
  background-color: var(--dark-input);
  border-radius: 12px;
  border: 3px dashed var(--magenta); 
  transition: ease all 0.1s;
}

.form-dropdown:hover{
  transform: translateY(-5px);
  box-shadow: 0px 5px 10px black
}

.card{
  transition: 0.1s ease all;
}

.card:hover{
  transform: translateY(-5px);
  box-shadow: 0px 2px 5px black;
}

.glass-magenta {
/* From https://css.glass */
background: rgba(233, 30, 99, 0.4666666666666667);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.3px);
-webkit-backdrop-filter: blur(5.3px);
border: 1px solid rgba(233, 30, 99, 1);
transition: 0.1s ease all;
}

.glass-gray{
  /* From https://css.glass */
background: rgba(45, 45, 45, 0.4666666666666667);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.3px);
-webkit-backdrop-filter: blur(5.3px);
border: 1px solid rgba(45, 45, 45, 1);
transition: 0.1s ease all;
}

.glass-gray:hover, .glass-magenta:hover{
  transform: translateY(-5px);
  box-shadow: 0px 2px 5px black;
}