body {
  background: white;
  background-image: url(img/sprkldtbg.gif);
  font-family: verdana;
  font-size: 15px;
}
#container {
  width: 970px;
  height: 550px;
  overflow: hidden;
  border-radius: 15px;
  padding: 15px;
  margin: auto;
  margin-top: 25px;
  background: #e39b44;
}
#flex {
  display: flex;
  height: 546px;
  overflow: hidden;
  border-radius: 10px;
  border: 2px dashed #ffd885;
}
#nav {
  order: 1;
  height: 546px;
  width: 270px;
  overflow: hidden;
  border-right: 2px dashed #ffd885;
  background: #e39b44;
}
#nav h1 {
  font-size: 50px;
  font-family: "Magica";
  color: #fff;
  font-weight: normal;
  line-height: 10px;
  text-align: center;
}
#nav .button {
  width: 155px;
  height: 25px;
  padding: 10px;
  padding-top: 13px;
  padding-left: 27px;
  text-align: center;
  text-decoration: none;
  font-family: "Kindy";
  display: block;
  margin: 7px;
  margin-left: 17px;
  font-size: 13px;
  background-repeat: no-repeat;
}
#content {
  order: 2;
  height: 546px;
  width: 700px;
  overflow: hidden;
  background-image: url(img/beipldbg.gif);
}
a {
  color: black;
  text-decoration: none;
}
a:hover {
  color: grey;
}
@font-face {
  font-family: "Magica";
  src: url("/my-room/img/theheart.ttf")  format('truetype');
}
@font-face {
  font-family: "Kindy";
  src: url("/my-room/img/KGMissKindyChunky.ttf")  format('truetype');
}