body{
font-family: 'littlebigalphabet.ttf';
color: #A67458;
font-size: 14px;
justify-content: center;
align-items: center;
background: url("https://i.imgur.com/tEh0ByH.png");
background-repeat: repeat;
background-size: 100px;
cursor: url('5DL2N6F.gif');
}

@font-face {
font-family: 'littlebigalphabet.ttf';
src: url('littlebigalphabet.ttf') format('OpenType');
font-weight: normal;
font-style: normal;
} 

/* container madre*/
.container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  align-items: stretch;
  grid-template-areas:
    "header header header header header"
    "header header header header header"
    "left mid mid mid right"
    "left mid mid mid right"
    "left downmid downmid downmid right"
    "footer footer footer footer footer";
  border: 10px solid transparent;
  border-image: url(blacklace.png) 17 round;
}

.header { 
	grid-area: header;
	border: 2px solid #fff;
	border-radius: 100px 100px 100px 100px;
	background-image: url('https://file.garden/Z3SR9FRyjwenTSIO/header.png');
}

.left {
	grid-area: left;
  }

.mid {
	grid-area: mid;
	}

.downmid {
	grid-area: downmid;
	border: 2px solid #A67458;
	border-radius: 4px 4px 4px 4px;
	}

.right {
	grid-area: right;
	border: 2px solid #A67458;
	border-radius: 4px 4px 4px 4px;
	}

.footer {
	grid-area: footer;
	text-align: center;
	}

/* decoraciones*/
/*caja*/
.boxborder{
background:url(https://files.catbox.moe/896785.jpg);
border: 2px solid #fff;
border-radius:10px;
box-shadow:2px 2px 4px #9f9f9f;
box-sizing:border-box;
margin:1em 0;
padding:15px;
}
.box-text{
background:#fff;
border-radius:10px;
padding:10px
}

/*chiikawa*/
#chiikawa {
position:absolute;
left:-150px;
top:140px;
z-index:1;
}

/*navegacion*/
.nav{
background:#fff;
border: 2px solid #fff;
border-radius:10px;
box-shadow:2px 2px 4px #9f9f9f;
box-sizing:border-box;
margin:1em 0;
padding:15px;
}

.name {
  font-family: romancea.tff;
}

a:link {
text-decoration: none;
color: #FF8ABD;
}

a:visited {
text-decoration: none;
color:white;
}

.ul{
  color: #FF8ABD;
  list-style:url("https://foollovers.com/mat/i-ribbon/x18-icon-ribbon.gif");
padding-left:20px; /* this is to move the list left or right. */
}
/* list class. you can remove this as this is just for link example! */
.li {
text-decoration:underline;
}
 /* list class but on hover */
.li:hover {
text-decoration:underline;
font-style:italic;
font-weight:bold;
cursor: pointer;
}