* {
  margin: 0;
  padding: 0;
}

html, body {
  background: black;
  color: white;
  font-family: "Perpetua", serif;
  height: 100%;
  display: flex;
  flex-direction: column;
}

*, *::after, *::before {
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-app-region: no-drag;
}

@font-face {
    font-family: "Perpetua";
    src: url("assets/Perpetua.ttf");
}

h1, h2, h3 {
  font-weight: normal;
}

h1 {
  font-size: 2.9em;
  width: 100%;
}

h2 {
  font-size: 2.5em;
}

h3 {
  font-size: 1.9em;
}

p {
  font-size: 1.9em;
  line-height: 1.1;
  margin-right: 0.3em;
}

hr {
  border: none;
  width: 100%;
  height: 4px;
  background-color: #fff;
  margin: 1em auto 3em;
}

.charm {
  height: 6em;
}

#title {
  margin-top: 2em;
  text-align: center;
}

#calc {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  margin: 5.8em 10.5em 0;
}

@media (max-width: 1400px) {
  #calc {
    flex-direction: column;
    margin: 5.8em 3em 0;
  }
}

#left {
  min-width: 60%;
  display: flex;
  flex-direction: column;
}

#right {
  min-width: 40%;
  margin-left: 1.5em;
  margin-right: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top {
  margin-left: 1.3em;
}

#overcharmed {
  margin-left: 0.9em;
}

#equipped {
  margin-top: 1em;
  margin-left: 1.8em;
  margin-bottom: 2em;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
}

#void_heart {
  width: 6.1em;
  height: 6.1em;
}

#notches {
  display: flex;
  flex-direction: row;
}

#notches img {
  height: 3em;
}

#notches img:not(.purple_notch) {
  opacity: 33%;
}

.purple_notch {
  opacity: 0%;
}

#charms {
  margin-bottom: 4em;
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
  justify-items: center;
  align-items: center;
}

#charms > * {
  grid-column: span 2;
  text-align: center;
}

#charms > :nth-child(20n + 11) {
  grid-column: 2 / 4;
}

#charms img {
  height: 5.2em;
}

.equipped {
  opacity: 33%;
  border-radius: 50%;
  box-shadow: 0 0 50px 12px lightblue, inset 0 0 50px lightblue;
}

#name {
  margin-bottom: 0.5em;
  text-align: center;
}

#cost {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#symbol {
  height: 7em;
  margin: 4em 0 4em;
}

#desc {
  font-size: 2.1em;
  margin-left: 1em;
  min-height: 10em;
}