:root {
  /* Background Colors: */
  --background: url"images/fabric-floralstripes-pink.png";
  --content-background-color: #ffffff;
  --sidebar-background-color: #ffffff;

  /* Text Colors: */
  --text-color: #7331a6;
  --sidebar-text-color: #7331a6;
  --link-color: #3ccbd6;
  --link-color-hover: #7780ec;

  /* Text: */
  --font: Helvetica, sans-serif;
  --heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
  --font-size: 16px;

  /* Other Settings: */
  --margin: 14px;
  --padding: 20px;
  --border: 4px solid #f7ee2a;
  --round-borders: 12px;
  --sidebar-width: 200px;
}
.body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  font-size: 16px;
  margin: 14px;
  padding: 20px;
  color: #7331a6;
  font-family: Helvetica, sans-serif;
  line-height: 1.2;
  background: #ff1493;
  background-image: url("fabric-floralstripes-pink.png");
  
}
.selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

.layout {
  width: 1200px;
  display: grid;
  grid-gap: 14px;
  grid-template: "header header" auto "leftSidebar main" auto "footer footer" auto / 200px auto;
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
.header {
  grid-area: header;
  font-size: 1.2em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: bold;
}

.header-image img {
  width: 100%;
  height: auto;
}

.main {
  grid-area: main;
  overflow-y: auto;
  padding: 20px;
  background: 
 border: 4px solid #f7ee2a;}
  IDENT border-radius: 12px;
}