body {
    background-color: #0c0c0c;
    display: grid;
    align-items: center;
    align-self: center;
    align-content: center;
    height: 95vh;
    place-items: center;
    outline: none;
    font-family: 'Courier New', Courier, monospace;
    color: #f1f1f1;
}

.info-panel {
    background-color: rgba(73, 73, 73, 0.3);
    position: relative;
    padding: 1em;
    width: 20em;
    border-radius: 1em;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    place-items: center;
}

.title {
    place-self: center;
}

.type {
    place-self: center;
    font-size: x-large;
    margin-bottom: -0.1em;
}

.elements {
    display: grid;
    gap: 0.5em;
}

.image {
    width: 1em;
    margin-bottom: -0.15em;
}

.pfp {
    width: 5em;
    background: linear-gradient(#df730d, #df730d) padding-box,
              linear-gradient(to bottom, #df730d, #cf3109) border-box;
    border-radius: 50em;
    border: 0.2em solid transparent;
    margin-bottom: -0.5em;
}

.element {
    list-style-type: none;
    place-self: center;
    margin-right: 2.6em;
    border-radius: 1em;
    background: rgba(134, 134, 134, 0.2);
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
    border: 1px solid rgba(134, 134, 134, 0.2);
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    border-radius: 1.5em;
    width: 10em;
    text-align: center;
    border-width: 0;
    color: #f1f1f1;
    font-family: 'Courier New', Courier, monospace;
    font-size: large;
    transition: transform 3s ease-in-out;
}

.element-button {
    width: 12em;
}

.element:hover {
    transform: rotate(3000deg);
}

.element:focus {
    transform: scale(3,3);
}

.element-button:hover {
    background-color: rgba(90, 90, 90, 0.3);
}

.element-button:focus {
    transform: scale(3,3);
    background-color: rgba(61, 61, 61, 0.3);
}

.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to bottom, #df7d0d 0%, #cf3109 100%);
}

.snow {
  position: absolute;
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  animation: snowfall linear infinite;
  animation-duration: 10s;
  opacity: 0.8;
}

@keyframes snowfall {
  0% {
    transform: translateY(0);
    opacity: 0.8;
  }
  100% {
    transform: translateY(110vh) translateX(20vh);
    opacity: 0;
  }
}

.snow:nth-child(2n) {
  animation-duration: 12s;
  left: 10%;
}

.separator {
    outline: none;
    border-radius: 20em;
    border-width: 0;
    height: 0.2em;
    background-color: rgba(172, 171, 171, 0.3);
    width: 80%;
}