html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  min-height: 100vh;
  font-size: 1rem;
  line-height: 1.25;
  /*background-color: #18222d;*/
  background-color: #121212 !important;
}

#gallery > .flip-box {
  display: none;
}

.gallery-header {
  position: fixed;
  z-index: 10002;
  width: 100%;
  padding: 1%;

  min-height: 37px;

  display: flex;
  justify-content: space-evenly;

  background-color: var(--bg-color);
  border-bottom: 1px solid #434343;
  color: white;
  font-family: var(--font-fam);
}

.gallery-header a {
  text-decoration: none;
  color: white;

  border: 1px solid #fff;
  border-radius: 4px;

  transition: color 200ms, background-color 200ms;
}

.gallery-header a:hover {
  cursor: pointer;
  color: var(--bg-color);
  background-color: #fff;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 600,
  'GRAD' 0,
  'opsz' 48
}

#join-btn > span.material-symbols-outlined:nth-child(2) {
  font-variation-settings:
  'FILL' 1,
  'wght' 600,
  'GRAD' 0,
  'opsz' 48
}

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

  .material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 500,
    'GRAD' -25,
    'opsz' 48
  }

  #join-btn > span.material-symbols-outlined:nth-child(2) {
    font-variation-settings:
    'FILL' 1,
    'wght' 500,
    'GRAD' -25,
    'opsz' 48
  }

}

#join-btn > span.material-symbols-outlined {
  transition: opacity 200ms;
}

#join-btn > span.material-symbols-outlined:hover {
  cursor: pointer;
}

.gallery-header > .material-symbols-outlined {
  opacity: 30%;

  transition: opacity 200ms;
}

.gallery-header > .material-symbols-outlined:hover {
  cursor: pointer;
  opacity: 100%;
}

.filter-dropdown,
.category-dropdown {
  z-index: 10001 !important;
  background-color: #434343;

  transition: transform 200ms;
}

input[name=filter], #fd,
input[name=category], #cd {
  display: none;
}

input[name=filter]:checked + label,
input[name=category]:checked + label {
  opacity: 1;
}

.filter-desc,
.category-desc {
  pointer-events: none;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.7);
  border: none;
  transform: translateY(199%);

  min-height: 32px;

  opacity: 0;

  transition: opacity 200ms;
}

#featuresFrame {
  display: none;

  position: fixed;
  z-index: 99999;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);

  background-color: rgba(0, 0, 0, 0.9);
}

@media only screen and (min-width: 1500px) {
  .home-grid {
    /* max-width: revert !important; */
  }

  .home-grid-block {
    /* width: 25% !important; */
  }
}

.category-heading {
  width: 100%;
  margin-bottom: -35px;
}

.category-heading h1 {
  transition: all 200ms;
}

.category-heading h1:hover {
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.5));
}

.grid {
  width: 100%;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  flex-wrap: wrap;

  padding-top: max(5%, 37px);
  padding-bottom: max(5%, 37px);

  transition: padding 200ms;
}

.grid-block {
  width: 50%;
  min-height: 11.25rem;
  padding: 1.4vw; /*1rem;*/
}

@keyframes image-grid-ease {
  from {
    -webkit-transform: rotateX(45deg) rotateZ(45deg) scale(.5);
    transform: rotateX(45deg) rotateZ(45deg) scale(.5);
    -webkit-perspective: 1000px;
    perspective: 1000px;
  }

  to {
    -webkit-transform: rotateX(0deg) rotateZ(0deg) scale(1);
    transform: rotateX(0deg) rotateZ(0deg) scale(1);
    -webkit-perspective: 0px;
    perspective: 0px;
  }
}

.image-grid-anim {
  /*-webkit-transform: rotateX(45deg) rotateZ(45deg);
  transform: rotateX(45deg) rotateZ(45deg);
  -webkit-perspective: 1000px;
  perspective: 1000px;*/

  animation: image-grid-ease 4s ease-out;
}

.image-grid .tile-link-hover .tile-img {
  top: -1.4vw; /*-1rem;*/
  left: -1.4vw; /*-1rem;*/
}

.image-grid .tile-img {
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition-property: opacity, top, left, box-shadow, filter;
  transition-property: opacity, top, left, box-shadow, filter;

  border-radius: 7px;
}

.excluded {
  filter: blur(5px);
}

.tile-link {
  display: block;

  position: relative;
}

.tile-link:hover {
  cursor: pointer;
}

.tile-link > div {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
  border-radius: 7px;
  background-color: #434343;
  opacity: 0;

  padding: 4.5%;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  transition: opacity 200ms;
}

.tile-link > div > * {
  margin: auto;
  text-align: center;
}

.tile-link > div > img {
  height: 40%;
  border-radius: 3%;
}

.tile-link > div > h2 {
  font-size: min(4vw, 38px);
}

.tile-link > div > p {
  color: white;
  font-weight: 600;
  font-size: min(2vw, 20px);
}

.tile-link-hover .tile-img {
  opacity: 1;
}

.tile-link-hover .tile-img-link {
  display: block;
}

.tile-link-hover .tile-img-link:hover .tile-img {
  opacity: 0.5;
}

.tile-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.125s;
  transition-duration: 0.125s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
.tile-link-hover .tile-img1 {
  box-shadow: .5vw .5vw rgba(244, 170, 200, 0.4),
    1.0vw 1.0vw rgba(244, 170, 200, 0.3), 1.5vw 1.5vw rgba(244, 170, 200, 0.2),
    2.0vw 2.0vw rgba(244, 170, 200, 0.1), 2.5vw 2.5vw rgba(244, 170, 200, 0.05);
}

.tile-link-hover .tile-img2 {
  box-shadow: .5vw .5vw rgba(45, 186, 233, 0.4), 1.0vw 1.0vw rgba(45, 186, 233, 0.3),
    1.5vw 1.5vw rgba(45, 186, 233, 0.2), 2.0vw 2.0vw rgba(45, 186, 233, 0.1),
    2.5vw 2.5vw rgba(45, 186, 233, 0.05);
}

.tile-link-hover .tile-img3 {
  box-shadow: .5vw .5vw rgba(214, 221, 244, 0.4),
    1.0vw 1.0vw rgba(214, 221, 244, 0.3), 1.5vw 1.5vw rgba(214, 221, 244, 0.2),
    2.0vw 2.0vw rgba(214, 221, 244, 0.1), 2.5vw 2.5vw rgba(214, 221, 244, 0.05);
}

.tile-link-hover .tile-img4 {
  box-shadow: .5vw .5vw rgba(82, 119, 192, 0.4), 1.0vw 1.0vw rgba(82, 119, 192, 0.3),
    1.5vw 1.5vw rgba(82, 119, 192, 0.2), 2.0vw 2.0vw rgba(82, 119, 192, 0.1),
    2.5vw 2.5vw rgba(82, 119, 192, 0.05);
}

.tile-link-hover .tile-img5 {
  box-shadow: .5vw .5vw rgba(138, 218, 245, 0.4),
    1.0vw 1.0vw rgba(138, 218, 245, 0.3), 1.5vw 1.5vw rgba(138, 218, 245, 0.2),
    2.0vw 2.0vw rgba(138, 218, 245, 0.1), 2.5vw 2.5vw rgba(138, 218, 245, 0.05);
}

.tile-link-hover .tile-img6 {
  box-shadow: .5vw .5vw rgba(203, 215, 193, 0.4),
    1.0vw 1.0vw rgba(203, 215, 193, 0.3), 1.5vw 1.5vw rgba(203, 215, 193, 0.2),
    2.0vw 2.0vw rgba(203, 215, 193, 0.1), 2.5vw 2.5vw rgba(203, 215, 193, 0.05);
}

.tile-link-hover .tile-img7 {
  box-shadow: .5vw .5vw rgba(91, 209, 250, 0.4), 1.0vw 1.0vw rgba(91, 209, 250, 0.3),
    1.5vw 1.5vw rgba(91, 209, 250, 0.2), 2.0vw 2.0vw rgba(91, 209, 250, 0.1),
    2.5vw 2.5vw rgba(91, 209, 250, 0.05);
}

.tile-link-hover .tile-img8 {
  box-shadow: .5vw .5vw rgba(145, 156, 196, 0.4),
    1.0vw 1.0vw rgba(145, 156, 196, 0.3), 1.5vw 1.5vw rgba(145, 156, 196, 0.2),
    2.0vw 2.0vw rgba(145, 156, 196, 0.1), 2.5vw 2.5vw rgba(145, 156, 196, 0.05);
}

.tile-link-hover .tile-img9 {
  box-shadow: .5vw .5vw rgba(188, 97, 129, 0.4), 1.0vw 1.0vw rgba(188, 97, 129, 0.3),
    1.5vw 1.5vw rgba(188, 97, 129, 0.2), 2.0vw 2.0vw rgba(188, 97, 129, 0.1),
    2.5vw 2.5vw rgba(188, 97, 129, 0.05);
}

.tile-link-hover .tile-img10 {
  box-shadow: .5vw .5vw rgba(4, 140, 231, 0.4), 1.0vw 1.0vw rgba(4, 140, 231, 0.3),
    1.5vw 1.5vw rgba(4, 140, 231, 0.2), 2.0vw 2.0vw rgba(4, 140, 231, 0.1),
    2.5vw 2.5vw rgba(4, 140, 231, 0.05);
}