:root {
  --miku-blue: #39BAAD;
  --miku-pink: #e12885;
}

body {
  background-color: #EEE;
  color: black;
  font-family: Sans-serif;
  font-size: medium;
  padding: 1rem;

  background-image: radial-gradient(#000 1px, #EEE 1px);
  background-size: 20px 20px;
}

h1 {
  font-size: 2rem;
  background-color: var(--miku-blue);
  color: var(--miku-pink);
  padding: 0.5rem;
  text-shadow: 2px 2px 2px #FFABF6;
}

h2 {
  font-size: 1.2rem;  
}

h3 {
  font-size: 1rem;
}

img {
  max-height: 66vh;
  max-width: 100%;
}

.miku-box-wrap {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.miku-box {
  max-height: 100vh;
  max-height: 100dvh;
  width: fit-content;
  max-width: max(600px, 25vw);
  min-width: 200px;
  border: 2px solid var(--miku-pink);
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: #FFF;
  overflow-y: auto;
}

.miku-title {
  background: linear-gradient(to right, rgba(255,255,250,1) 0%, rgba(255,255,251,50) 50%, rgba(255,255,251,0) 100%);
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  border-top: 2px dotted var(--miku-pink);
  border-right: 2px dotted var(--miku-pink);
}

.miku-title > h2 {
  margin-top: 0.5rem;
  margin-bottom: 0rem;
}

.miku-title > p { 
  margin-top: 0.4em;
  margin-bottom: 0.5em;
}

@media (max-width: 600px) {
  .miku-box-wrap {
    grid-template-columns: 1fr;
  }
  .miku-box {
    width: 90%;
  }
}