@import "style.css";

table,
caption {
  border: 2px solid var(--table-color) !important;
  border-collapse: collapse !important;
  padding: 6px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

tbody,
thead {
  border-collapse: none !important;
}

dt,
dd {
  text-align: left;
  border: none !important;
}

caption {
  background-color: #1c1c20;
  color: #ffffff;
  width: 100% !important;
}

tr,
td {
  display: table-row !important;
  box-sizing: content-box !important;
}

td {
  display: table-cell !important;
  max-width: 50%;
}

@keyframes quote_hover_in {
  from {
    background-color: var(--background-color);
  }

  to {
    background-color: var(--accent-color);
  }
}

@keyframes quote_hover_out {
  from {
    background-color: var(--accent-color);
  }

  to {
    background-color: var(--background-color);
  }
}

.quote_entry,
td {
  border: 2px solid var(--table-color);
  border-collapse: collapse;
  padding: 1em;
  text-align: center;
  animation-name: quote_hover_out;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.quote_entry:hover,
td:hover {
  animation-name: quote_hover_in;
  animation-duration: 0.5s
}


#group_photo {
  width: 100%;
}

@media (min-width: 850px) {
  .content_left {
    float: left;
    width: 48%;
  }

  .content_right {
    float: right;
    width: 48%;
  }
}

h1:not(#title),
h2 {
  text-align: center;
}

h3 {
  margin: 0;
}

section {
  padding: 2%;
}

figure {
  text-align: center;
  border: 4px solid var(--accent-color);
}

.student_id {
  font-weight: bold;
  font-family: imperitum;
  color: #26a450;
}