@font-face {
font-family: poti;
src: url(poti.ttf);}

@font-face {
font-family: Henny Penny;
src: url(HennyPenny-Regular.ttf); }

@font-face {
font-family: Emilys Candy;
src: url(EmilysCandy-Regular.ttf);}

@font-face {
  font-family: Griffy;
  src: url(Griffy-Regular.ttf);
}

@font-face {
  font-family: Macondo;
  src: url(Macondo-Regular.ttf);
}

body {
    background-image:url('https://i.pinimg.com/736x/2a/c1/a6/2ac1a6ec1828dde627ed034a2a4c5771.jpg')
}

.container {
  border-width:10px;
  border-style:solid;
  border-image: url("bg.png") 9 fill round;
  margin: auto;
  width: 884px;
  height: 665px;
  position: relative;
  padding: 5px;
  z-index: 4;
}


.container-one {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(31, 27, 30);
  background-image: url('https://i1.glitter-graphics.org/pub/723/723181c3dd2wuflp.jpg');
  background-repeat: repeat;
  width: 880px;
  position: relative;
  left: 1px;
  height: 170px;
  box-shadow: 0 0 8px 8px rgb(18, 14, 18) inset;
  z-index: 5;
}

#name {
    font-family: poti;
    font-size: 5em;
    -webkit-text-stroke: 1px rgb(255, 164, 253);
    margin-top: 5px;
    margin-left: 10px;
}

.navigation {
   border-width: 7px;
   border-style: solid;
   border-color: black;
   background-color: black;
   width:200px;
   height: 245px;
   box-shadow: 0 0 8px 8px rgb(18, 14, 18) inset;
   margin-top: 10px;
   margin-bottom: 10px;

}

#navitext {
    font-family: Henny Penny;
    font-size: 1em;
    -webkit-text-stroke: 1px rgb(182, 116, 180);
    margin-top: 5px;
    margin-left: 10px;
}

.welcome {
   border-width: 7px;
   border-style: solid;
   border-color: black;
   background-color: black;
   width:450px;
   height: 245px;
   box-shadow: 0 0 8px 8px rgb(18, 14, 18) inset;
   position: relative;
   margin-top: -243px;
   margin-left: 219px;
   margin-bottom: 50px;

}

#wintext {
    font-family: Henny Penny;
    font-size: 30px;
    -webkit-text-stroke: 1px rgb(112, 95, 112);
    margin-left: 10px;
    margin-top: -19px;
}

#underneath {
    font-family: Emilys Candy;
    font-size: 18px;
    -webkit-text-stroke: 1px rgb(138, 132, 138);
    margin-left: 10px;
    margin-top: -10px;

}

.graphics {
   border-width: 7px;
   border-style: solid;
   border-color: black;
   background-color: black;
   width: 170px;
   height: 80px;
   box-shadow: 0 0 8px 8px rgb(18, 14, 18) inset;
   margin-top: -462px;
   margin-left: 700px;
   margin-bottom: 10px;

}

.mybutton {
   border-width: 7px;
   border-style: solid;
   border-color: black;
   background-color: black;
   width: 170px;
   height: 215px;
   box-shadow: 0 0 8px 8px rgb(18, 14, 18) inset;
   margin-top: 10px;
   margin-left: 700px;
   margin-bottom: 1000px;
   font-family: Henny Penny;
   -webkit-text-stroke: 1px rgb(182, 116, 180);

}

#mpbutton {
  margin-top: 1em;
  padding: -4em;

}

.todobox {
   border-width: 7px;
   border-style: solid;
   border-color: black;
   background-color: black;
   width:200px;
   height: 180px;
   box-shadow: 0 0 8px 8px rgb(18, 14, 18) inset;
   margin-top: 0px;
   overflow: auto;

}

#todotitle {
    font-family: Henny Penny;
    font-size: 1em;
    -webkit-text-stroke: 1px rgb(182, 116, 180);
    margin-top: 5px;
    margin-left: 10px;
}

#todolist {
    font-family: Emilys Candy;
    font-size: 1em;
    -webkit-text-stroke: 1px rgb(182, 116, 180);
    margin-top: 0px;
    margin-left: 0px;
}

/* ABOUT ME PAGE */

.abmecontainer {
  border-width:10px;
  border-style:solid;
  border-image: url("bg.png") 9 fill round;
  margin: auto;
  width: 884px;
  height: 665px;
  position: relative;
  padding: 5px;
  z-index: 4;
}

.abmecontainer-one {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(31, 27, 30);
  background-image: url('https://i1.glitter-graphics.org/pub/723/723181c3dd2wuflp.jpg');
  background-repeat: repeat;
  width: 880px;
  position: relative;
  left: 1px;
  height: 170px;
  box-shadow: 0 0 8px 8px rgb(18, 14, 18) inset;
  z-index: 5;
}

#aboutmename {
    font-family: poti;
    font-size: 5em;
    -webkit-text-stroke: 1px rgb(255, 164, 253);
    margin-top: 5px;
    margin-left: 10px;
}

.infoinfoinfo {
   border-width: 7px;
   border-style: solid;
   border-color: black;
   background-color: black;
   width: 630px;
   height: 320px;
   box-shadow: 0 0 8px 8px rgb(18, 14, 18) inset;
   margin-top: 10px;
   margin-bottom: 10px;

}

#abtmetext {
    font-family: Macondo;
    font-size: 1em;
    -webkit-text-stroke: 1px rgb(185, 139, 183);
    margin-top: 5px;
    margin-left: 15px;
}

.statusbox {
  border-width: 7px;
   border-style: solid;
   border-color: rgb(0, 0, 0);
   background-color: rgb(117, 76, 113);
   width:200px;
   height: 50px;
   box-shadow: 0 0 8px 8px rgb(117, 80, 117) inset;
   position: relative;
   margin-top: -315px;
   margin-left: 650px;
   margin-bottom: 10px;
}

#statuscafe {
    padding-top: -1px;
    margin-top: 5px;
    padding-left: 2px;
    height: 0px;

}

.moodbox {
  border-width: 7px;
   border-style: solid;
   border-color: black;
   background-color: black;
   width:100px;
   height: 49px;
   box-shadow: 0 0 8px 8px rgb(18, 14, 18) inset;
   position: relative;
   margin-top: 10px;
   margin-left: 650px;
   margin-right: 500px;
   margin-bottom: 100px;
}

#imood {
    padding: 15px;
    background-color: rgb(99, 69, 98);

}

#buttafy {
   margin-top: -63px;
   margin-left: 120px;
   margin-right: 500px;
   margin-bottom: 100px;
}