/* modern-normalizer */
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  font-family:
    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family:
    ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
    monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  border-color: currentcolor;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* custom css */
:root {
  --c1: #302387;
  --c2: #fffdaf;
  --c3: #ff3796;
  --c4: #00faac;
}

body {
  background-color: var(--c1);
  color: var(--c2);
  margin: 4rem;
}

header p span {
  color: var(--c4);
}

header p a {
  font-weight: bolder;
  font-style: italic;
}

p label {
  font-family: monospace;
}

.a {
  color: var(--c3);
}

.b {
  color: var(--c4);
}

a {
  color: var(--c3);
  padding: 6px;
  display: inline-block;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
}

@media (max-width: 768px) {
  .cards-container {
    grid-template-columns: 1fr;
    place-items: center;
  }
}

.card {
  width: 190px;
  height: 254px;
  border-radius: 30px;
  background: var(--c1);
  box-shadow:
    15px 15px 30px #1f1555,
    -15px -15px 30px #4131b9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

.card .id {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c4);
  letter-spacing: 0.1em;
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  flex-shrink: 0;
}

.placeholder-card {
  border: 3px dashed var(--c4);
  background: var(--c1);
}

.placeholder-content {
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.placeholder-text {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  margin: 0;
}

.placeholder-subtext {
  font-size: 0.75rem;
  text-align: center;
  color: var(--c2);
  margin: 0;
}

button {
  position: relative;
  padding: 12px 35px;
  background: var(--c3);
  font-size: 17px;
  font-weight: 500;
  color: var(--c4);
  border: 3px solid var(--c3);
  border-radius: 8px;
  box-shadow: 0 0 0 #fec1958c;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

.star-1 {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0 var(--c4));
  z-index: -5;
  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 var(--c4));
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 var(--c4));
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0 var(--c4));
  z-index: -5;
  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
  position: absolute;
  top: 25%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 var(--c4));
  z-index: -5;
  transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 var(--c4));
  z-index: -5;
  transition: all 0.8s ease;
}

button:hover,
button:active,
a:active button {
  background: transparent;
  color: var(--c3);
  box-shadow: 0 0 25px #fec1958c;
}

button:hover .star-1,
button:active .star-1,
a:active button .star-1 {
  position: absolute;
  top: -80%;
  left: -30%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 10px var(--c4));
  z-index: 2;
}

button:hover .star-2,
button:active .star-2,
a:active button .star-2 {
  position: absolute;
  top: -25%;
  left: 10%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px var(--c4));
  z-index: 2;
}

button:hover .star-3,
button:active .star-3,
a:active button .star-3 {
  position: absolute;
  top: 55%;
  left: 25%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px var(--c4));
  z-index: 2;
}

button:hover .star-4,
button:active .star-4,
a:active button .star-4 {
  position: absolute;
  top: 30%;
  left: 80%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 10px var(--c4));
  z-index: 2;
}

button:hover .star-5,
button:active .star-5,
a:active button .star-5 {
  position: absolute;
  top: 25%;
  left: 115%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 10px var(--c4));
  z-index: 2;
}

button:hover .star-6,
button:active .star-6,
a:active button .star-6 {
  position: absolute;
  top: 5%;
  left: 60%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 10px var(--c4));
  z-index: 2;
}

.fil0 {
  fill: var(--c4);
}