/* 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." */

body {
  background-image: url(https://pyuutchi.neocities.org/img/tiledbgs/64/bgtamapurple64.png); background-repeat: repeat;
  color: black;
  font-family: 'Gaegu-Regular';
}
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content"
    "image image";
  grid-template-columns: 205px 1024px;
  gap: 20px;
  padding: 20px;
}
.container > div {

  padding: 10px;
}
.container > .header {
  grid-area: header;
  text-align: center;
  padding-left: 320px;
  width: 1024px;
}
.container > .menu {
  grid-area: menu;
  background-color: rgba(218, 180, 236, 0.6);
  width: 205px;
  height: 225px;
  box-sizing: border-box;
  margin-left: 150px;
  text-align: center;
  vertical-align: middle;
  border: 12px solid transparent;
  border-image: url(https://pyuutchi.neocities.org/img/borderp.png) 12 round;
}
.container > .content {
  grid-area: content;
  background-color: rgba(218, 180, 236, 0.6);
  width: 834px;
  box-sizing: border-box;
  border-style: dotted;
  border-width: 2px;
  border-color: #746187;
  margin-left: 200px;
  text-align: center;
  color: white;
  font-size: 20px;
  
}
.container > .image {
  grid-area: image;
  position: absolute;
  top:200PX;
  left:1150px
 
}
.container > .image2 {
  grid-area: image;
  position: absolute;
  top:540PX;
  left:1200px
 
}
 
.container2 {
  display: grid;
  grid-template-areas:
    "header1 header1 header1"
    "menu1 content1 menu2"
    "footer1 footer1 footer1";
  grid-template-columns: 205px 834px 205px;
  gap: 20px;
  padding: 20px;
}
.container2 > div {

  padding: 10px;
}
.container2 > .header1 {
  grid-area: header1;
  text-align: center;
  padding-left: 320px;
  width: 1024px;
}
.container2 > .menu1 {
  grid-area: menu1;
  background-color: rgba(218, 180, 236, 0.6);
  width: 205px;
  height: 225px;
  box-sizing: border-box;
  border-style: dotted;
  border-width: 2px;
  border-color: #746187;
  margin-left: 150px;
  text-align: center;
  vertical-align: middle;
  border: 12px solid transparent;
  border-image: url(https://pyuutchi.neocities.org/img/borderp.png) 12 round;
  
}
.container2 > .content1 {
 grid-area: content1;
   background-color: rgba(218, 180, 236, 0.6);
  width: 834px;
  box-sizing: border-box;
  border-style: dotted;
  border-width: 2px;
  border-color: #746187;
  margin-left: 200px;
  text-align: center;
  color: white;
  font-size: 20px;
  
}
.container2 > .menu2 {
  grid-area: menu2;
  background-color: rgba(218, 180, 236, 0.6);
  width: 205px;
  height: fit-content;
  box-sizing: border-box;
  border-style: dotted;
  border-width: 2px;
  border-color: #746187;
  margin-left: 250px;
  text-align: center;
  vertical-align: middle;
  border: 12px solid transparent;
  border-image: url(https://pyuutchi.neocities.org/img/borderp.png) 12 round;

}