@import url('https://meyerweb.com/eric/tools/css/reset/reset.css');

:root {
  --cell-background: #adbded;
  --cell-border: #101d2c;
  --cell-text: #030b18;
  --cell-accent: #536eb2;
  --color-border-lighter: #2d424d;
  --color-text-lighter: #2d424d;
  --color-text-primary: #14252e;
  --color-text-darker: #05110c;
}

.btn {
  background-color: var(--cell-background);
  color: var(--color-text-darker);
  border: 2px solid var(--cell-border);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4rem;
  position: relative;
  transition: box-shadow 0.35s, top 0.3s, transform 0.45s;
  top: 0;
  left: 0;
  display: inline-block;
  box-shadow: 0 1px 0 0 var(--cell-border), 0 2px 0 0 var(--cell-border),
    0 3px 0 0 var(--cell-border);
  transform: rotateX(0) rotateY(0) rotateZ(0);
  font-size: 0.75rem;
  font-weight: bold;
}

.btn-small {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  font-weight: bold;
}

.btn-large {
  margin-top: 50px;
  font-size: 1.75rem;
  padding: 0.25rem 0.5rem;
  font-weight: bold;
}

.btn:hover {
  box-shadow: 0 0 0 0 var(--cell-border), 0 0 0 0 var(--cell-border), 0 0 0 0 var(--cell-border);
  top: 3px;
  transform: rotateX(5deg) rotateY(10deg) rotateZ(0.5deg);
  cursor: pointer;
}

.gradient-text {
  background-color: #8c1270;
  background-image: linear-gradient(45deg, #8c1270, #d61e36);
  background-size: 100%;
  background-repeat: repeat;

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  line-height: normal;
}

.homepage header {
  margin-top: 1em;
}

.homepage h1 {
  font-weight: normal;
  text-align: center;
  margin-bottom: 0;
  margin-bottom: -0.25em;
  font-size: 5rem;
  margin-top: 10%;
  margin-bottom: 2%;
}

.homepage h2 {
  font-weight: normal;
  font-size: 2.5em;
}

body.homepage {
  color: rgb(253, 248, 250);
  text-align: center;
}

body {
  font-family: 'Archivo Black', sans-serif;
  min-height: 100vh;
  max-height: 100vh;
  background-image: url('/imgs/background.jpg');
  background-size: cover;
}

.formCard {
  min-height: 90vh;
  display: flex;
}

.form-container {
  color: white;
  background: #02384e31;
  backdrop-filter: blur(0.5rem);
  margin: auto;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2), 0px 10px 20px rgba(0, 0, 0, 0.3),
    0px 30px 60px 1px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 20px 50px 40px 50px;
}

.form-container {
  text-align: center;
}

.form-container h1 {
  font-size: 2.2em;
  margin-bottom: 10px;
}

.form-container h2 {
  font-size: 1.5em;
  text-align: center;
}

input {
  border: none;
  background: none;
  box-shadow: 0px 2px 0px 0px white;
  width: 100%;
  color: white;
  font-size: 1.25em;
  outline: none;
}

form input {
  margin-bottom: 20px;
  margin-top: 20px;
}

input::placeholder {
  color: #d3d3d3;
}

label {
  visibility: hidden;
}

.linksTable {
  margin: auto;
  text-align: center;
  border-spacing: 150px 0px;
  padding: 4rem;
}

table,
th,
td {
  border: 5px solid rgb(26, 27, 50);
}

.tableHeaders {
  font-weight: bold;
  font-size: 2rem;
}

th:nth-child(even),
td:nth-child(even) {
  background-color: rgb(93, 105, 142);
}

th:nth-child(odd),
td:nth-child(odd) {
  background-color: rgb(142, 166, 237);
}

th,
td {
  padding: 0.5rem 1.25rem 0.5rem 1.25rem;
}