/* Diagnostic Styling */
/* * {
  outline: 2px dotted gray;
}  */

/* temp background color */
body {
  background: #d1f1ec;
}

/* vertical and horizontal centering */
body {
display: grid;
place-content: center;
height: 100vh;
}

/* containers */
main {
display: flex;
}

/* optionally changed */
main section {
height: 100px;
width: 100px;
}

/* scale SVG to fit container */
svg {
  width: 50px; /* or any specific size */
  height: auto;
  /* Center and fit */
  preserveAspectRatio: xMidYMid meet;
}


.swords {
fill: lightgray;
}

#shield {
fill: gray;
}

.left {
fill: peachpuff;
}

.bottom-text, .top-text {
stroke: violet;
}

#potion {
fill: purple;
}

#castle {
fill: lightgray;
}

#magic-wand {
fill: violet;
}

#sparkle {
fill: gold;
}

#crown {
fill: gold;
}

#sprout {
fill: green;
}