/* ----------------- */
/*  Universal Rules  */
/* ----------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* * {border:1px solid red} */


/* ------------ */
/*  Animations  */
/* ------------ */

/* Table rows zoom and highlight on hover */
tr.tblBody:hover,
.hoverable:hover,
input[type="search"]:focus {
  position: sticky;
  z-index: 999;

  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  transition: transform .2s;

  filter: drop-shadow(0px 0px 5px #00000075);
  filter: brightness(110%);
}

/* Table rows unzoom when not hovered */
tr.tblBody,
.hoverable {
  -webkit-transform: scale(1.00);
  transform: scale(1.00);
  transition: transform .2s;
}

/* Placeholder animation for Home page */
.wavy {
  animation-name: wavy;
  animation-duration: 2.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  position: relative;
  top: 0;
  left: 0;

  color: aliceblue;
  filter: drop-shadow(0px 0px 5px white);
  text-align: center;
  font-weight: bold;
  padding: 20px;
}
@keyframes wavy {
  0% {
    top: 0px;
  }
  50% {
    top: -15px;
  }
  100% {
    top: 0px;
  }
}


/* --------------- */
/*  Pointer Rules  */
/* --------------- */

button {
  cursor: pointer;
}


/* ------------ */
/*  Main Rules  */
/* ------------ */

body {
  display: flex;
  
  flex-direction: column;
  min-height: 100vh;

  font-family: 'Courier New', Courier, monospace;
  background-color: rgb(51, 0, 0);
}

#card {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 100px;
  
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;

  background-color: rgb(59, 5, 5);
  border-style: solid;
  border-color: rgba(112, 0, 0, 0.815);
}

#content {
  display: flex;
  flex-direction: column;
}

#navigation {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  gap: 10px;

  border-top: solid;
  border-bottom: solid;
  backdrop-filter: blur(2px);
  border-color: rgba(37, 0, 0, 0.815);
  background-color: rgba(0, 0, 0, 0.63);
}

#page {
  display: flex;
  flex-direction: column;
  padding: 20px 0px 20px 0px;
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.24);
}

#charts {
  display: flex;
  flex-wrap: wrap;
}

.chartHolder {
  padding: 20px;
  height: 500px;
  width: 500px;
}

canvas {
  filter: drop-shadow(0px 0px 5px white);
}

#header, #footer {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.8);
}

#quick-links {
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0px 0px 5px black);
}

#footer {
  justify-content: center;
  padding: 20px;
  color: aliceblue
}


/* -------------- */
/*  Button Rules  */
/* -------------- */

button {
  width: 120px;
  padding: 8px;
  border: 2px solid;

  font-size: 16px;
  font-weight: 900;
  border-radius: 8px;
  border-color: rgb(66, 7, 7);
  background: rgb(82, 5, 5);
  color: lightgrey;
  filter: drop-shadow(0px 0px 5px black);
}

button:hover {
  filter: brightness(115%) drop-shadow(0px 0px 5px black);
}
button:active {
  filter: brightness(85%) drop-shadow(0px 0px 5px black);
}

polygon {
  fill: white;
  opacity: 0;
}
polygon:hover {
  opacity: 0.15;
}
polygon:active {
  fill: black;
  opacity: 0.15;
}


/* ------------- */
/*  Table Rules  */
/* ------------- */

#htmlDonationTable {
  max-width: 1500px;
}

table, td {
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;

  width: 95%;
  height: 40px;
  padding: 4px;
  color: lightgrey;
  filter: drop-shadow(0px 0px 5px black);
}

thead {
  position: sticky;
  top: 0;
  z-index: 999;
  height: 30px;
  font-size: large;
  background-color: rgb(59, 58, 68);
  filter: drop-shadow(0px 0px 5px #000000c7);
}

th {
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-right: 1px solid;
  border-left: 1px solid;
  border-color: black;
  background-color: rgb(34, 17, 21);
}

td {
  border: 1px solid;
  border-color: rgb(0, 0, 0);
  background-color: rgb(61, 2, 5);
}


/* ------------ */
/*  Misc Rules  */
/* ------------ */

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

time {
  font-style: italic;
}

button {
  cursor: pointer;
}