.periodic-table {
  padding: 2rem;
  display: grid;
  grid-template-areas:
    'hed hed hed hed hed hed hed hed hed hed hed hed hed hed hed hed hed hed'
    'a01 a02 frm frm frm frm frm frm frm frm frm frm a13 a14 a15 a16 a17 a18'
    'b01 b02 frm frm frm frm frm frm frm frm frm frm b13 b14 b15 b16 b17 b18'
    'c01 c02 frm frm frm frm frm frm frm frm frm frm c13 c14 c15 c16 c17 c18'
    'd01 d02 d03 d04 d05 d06 d07 d08 d09 d10 d11 d12 d13 d14 d15 d16 d17 d18'
    'e01 e02 e03 e04 e05 e06 e07 e08 e09 e10 e11 e12 e13 e14 e15 e16 e17 e18'
    'f01 f02 f03 f04 f05 f06 f07 f08 f09 f10 f11 f12 f13 f14 f15 f16 f17 f18'
    'g01 g02 g03 g04 g05 g06 g07 g08 g09 g10 g11 g12 g13 g14 g15 g16 g17 g18'
    'h01 h02 h03 h04 h05 h06 h07 h08 h09 h10 h11 h12 h13 h14 h15 h16 h17 h18'
    'i01 i02 i03 i04 i05 i06 i07 i08 i09 i10 i11 i12 i13 i14 i15 i16 i17 i18';

  gap: 10px;
  grid-template-columns: repeat(var(--periodic-table-columns), 1fr);
  margin: 0 auto;
  max-width: fit-content;
}
.periodic-table header {
  grid-area: hed;
}

.periodic-table .element {
  list-style: none;
  border: 4px solid var(--bg);
  border-radius: 8px;
  place-content: center;
  display: grid;
  height: 5rem;
  width: 5rem;
  cursor: pointer;
  text-align: center;
  font-size: 0.85em;
}
.periodic-table .element:hover {
  background-color: var(--bg);
  transform: scale(1.5);
  z-index: 1;
  transition: all 0.2s;
}

/* Hacking variables */
.periodic-table .build {
  --bg: var(--color-build);
}
.periodic-table .build:hover {
  color: var(--black);
}
.periodic-table .cloud {
  --bg: var(--color-cloud);
}
.periodic-table .cloud:hover {
  color: var(--black);
}
.periodic-table .databases {
  --bg: var(--color-databases);
}
.periodic-table .framework {
  --bg: var(--color-framework);
}
.periodic-table .framework:hover {
  color: var(--black);
}
.periodic-table .interests {
  --bg: var(--color-interests);
}
.periodic-table .library {
  --bg: var(--color-library);
}
.periodic-table .other {
  --bg: var(--color-other);
}
.periodic-table .programming-language {
  --bg: var(--color-programming-language);
}
.periodic-table .saas-paas {
  --bg: var(--color-saas-paas);
}
.periodic-table .server {
  --bg: var(--color-server);
}
.periodic-table .want-to-learn {
  --bg: var(--color-want-to-learn);
}

/* Default elements to 0.5 opacity */
.periodic-table .element {
  opacity: 0.5;
}

/* When no element is selected, make them all opaque */
.periodic-table:not(.build):not(.cloud):not(.databases):not(.framework):not(.interests):not(.library):not(.other):not(.programming-language):not(.saas-paas):not(.server):not(.want-to-learn):not(.level-0):not(.level-1):not(.level-2):not(.level-3):not(.level-4):not(.level-5):not(.level-6)
  .element {
  opacity: 1;
}

/*
  If an element is selected, they are not all unselected, meaning the default
  case will be triggered, then the selected elements will be opaque
*/

.periodic-table.build > .build {
  opacity: 1;
}
.periodic-table.cloud > .cloud {
  opacity: 1;
}
.periodic-table.databases > .databases {
  opacity: 1;
}
.periodic-table.framework > .framework {
  opacity: 1;
}
.periodic-table.interests > .interests {
  opacity: 1;
}
.periodic-table.library > .library {
  opacity: 1;
}
.periodic-table.other > .other {
  opacity: 1;
}
.periodic-table.programming-language > .programming-language {
  opacity: 1;
}
.periodic-table.saas-paas > .saas-paas {
  opacity: 1;
}
.periodic-table.server > .server {
  opacity: 1;
}
.periodic-table.want-to-learn > .want-to-learn {
  opacity: 1;
}
.periodic-table.level-0 > .level-0 {
  opacity: 1;
}
.periodic-table.level-1 > .level-1 {
  opacity: 1;
}
.periodic-table.level-2 > .level-2 {
  opacity: 1;
}
.periodic-table.level-3 > .level-3 {
  opacity: 1;
}
.periodic-table.level-4 > .level-4 {
  opacity: 1;
}
.periodic-table.level-5 > .level-5 {
  opacity: 1;
}
.periodic-table.level-6 > .level-6 {
  opacity: 1;
}

/* Form */

.periodic-table form {
  grid-area: frm;
  display: grid;
  grid-template-areas: 'categories x levels';
  grid-template-columns: auto minmax(2rem, 1fr) 3fr;
  align-items: baseline;
}

.categories {
  grid-area: categories;
  display: grid;
}
.levels {
  grid-area: levels;
  row-gap: 8px;
  display: grid;
}

.categories label:hover span,
.levels label:hover span {
  text-decoration: wavy underline;
}
.categories label,
.levels label {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
.categories input[type='checkbox'],
.levels label input[type='checkbox'] {
  opacity: 0;
}
.categories div,
.levels div {
  position: relative;
  min-width: 1.5rem;
  height: 1rem;
  background: var(--bg);
}
.levels div {
  border: 1px solid var(--white);
  height: 1.5rem;
}
.categories input:checked + div:after,
.levels input:checked + div:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  filter: contrast(4) invert(1) brightness(2);
}
.levels input:checked + div:after {
  top: 2px;
}

/* Youtube Video Component */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Dialog */
.dialog {
  max-width: 900px;
  width: 100%;
  min-width: 360px;
  overflow-y: scroll;
  max-height: 90vh;
  opacity: 0;
}

.dialog[open] {
  animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.dialog::backdrop {
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  backdrop-filter: blur(1px);
}

@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: repeating-linear-gradient(
      30deg,
      rgba(24, 194, 236, 0.2),
      rgba(24, 194, 236, 0.2) 1px,
      rgba(24, 194, 236, 0.3) 1px,
      rgba(24, 194, 236, 0.3) 20px
    );
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}

@media screen and (max-width: 1600px) {
  .periodic-table {
    grid-template-areas: none;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  }
  .periodic-table > * {
    grid-area: unset !important;
  }
  .periodic-table > form,
  .periodic-table > header {
    grid-column: 1 / -1 !important;
  }
  .periodic-table > form {
    grid-template-areas: 'categories levels';
    grid-template-columns: auto 3fr;
  }
}

@media screen and (max-width: 768px) {

  .periodic-table > form {
    grid-template-areas: 'categories' 'levels';
    grid-template-columns: unset;
  }