@font-face {
  font-family: "DS";
  src: url(Nintendo-DS-BIOS.ttf);
}

html {
  font-family: "DS";
  background-image: url(bg.jpeg);
}
#title {
  grid-area: title;
  margin: auto;
}

#area {
  margin: auto;
  border-image: url(ruffle.png) 11 11 11 11 fill / 11px 11px 11px 11px;
	padding: 11px 11px 11px 11px;
	border-image-width: 33px;
	border-image-repeat: round;
  width: 1300px;
	height: 1350px;
	outline-offset: 70px;
}
#areab {
  display: grid;
	 border: #CFAFD1 5px solid;
  margin: auto;
	margin-top: 23px;
  background-size: contain;
  background-color: lavenderblush;
  grid-template-areas:
    "title title title"
    "nav contain updates"
    "nav contain todo"
    "bad back2 status";
	width: 1244px;
	height: 1294px;
}
.box {
  padding: 15px;
  margin: auto;
  border-image: url(IMG_8735.png) 11 11 11 11 fill / 11px 11px 11px 11px;
	padding: 11px 11px 11px 11px;
	border-image-width: 33px;
	border-image-repeat: round;
}
#nav {
  height: 642px;
  width: 250px;
  grid-area: nav;
}
#badge {
  height: 400px;
  width: 250px;
  grid-area: bad;
}
a {
  display: block;
  color: darkcyan;
}
#contain {
  display:flex;
  height: 250px;
   grid-template-areas: "back back windcloud";
}
#back {
width: 650px;
  grid-area: back;
grid-template-areas:
    "intxt intxt"
    "song comm";

}
#windcloud {
  height: 450px;
  width: 250px;
  grid-area: back;
}
#updates {
  height: 400px;
  width: 200px;
  grid-area: updates;
}
#todo {
  height: 225px;
  width: 200px;
  grid-area: todo;
}
#status {
  height: 400px;
  width: 200px;
  grid-area: status;
}
#back2 {
  height: 400px;
  width: 650px;
  grid-area: back2;
display: flex;
grid-template-areas: "profile pftxt";
}
#shinee {
  width: 400px;
  max-width: 100%;
  border: black 3px dashed;
}

h1 {
  color: darkcyan;
}
h2 {
  color: darkcyan;
}

p {
  color: black;
  font-size: 18px;
}
#dibidibidis {
  font-weight: bold;
  color: darkcyan;
}
#cloudy {
  color: #9dd0eb;
}
#chimmy {
  color: #efdf8f;
}