/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


{
    box-sizing: border-box;
  }

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

body {
  font-family: 'Comic Neue', sans-serif;
  font-size: 14px;
  background: #ffffff;
  background-image: url("https://tiny-hands-house.neocities.org/ebstrawberry.png");
  background-repeat: repeat
  color: #000000;
  margin: 0;
  width: 100%;
  display: grid; /* This and the line below are going to center the whole thing for you horizontally. */
  place-items: center;
}

a {
  color: #fca4a5;
  text-decoration: none;
}

.content-wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1em 0;
  box-sizing: border-box;
}

header {
  background: transparent;
  padding: 1em;
  text-align: center;
}

nav {
  text-align: center;
    width: 100%;
  max-width: 500px; 
  display: inline;
  margin-right: 1px;
  }

nav a { /* This section is looking at just the links in nav. Everything in nav applies here as well, so you don't need to list it again */
 /* max-width is in nav */
  color: 000000;
  text-decoration: none;
  margin: 1em
  display: inline-block;
}

footer {
  background: transparent;
  padding: 1em;
  text-align: center;
}

.layout {
  display: flex;
  gap: 1em;
  box-sizing: border-box;
  justify-content: center;  /* <-- center the columns horizontally */
  max-width: 100%;          /* ensure it fits inside .content-wrap */
}

aside, main {
  padding: 16px;
  border: 4px solid #fca4a5;
  min-height: 300px;
  box-sizing: border-box;
  border-radius: 10px
}

.main  { flex: 0 0 70%; background: #ffffff; }
.right { flex: 0 0 30%; background: #ffffff; }

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
 .main, .right {
    flex: 1 100%;
  }
}