@font-face {
  font-family: 'bubble';
  src: url(fonts/Candycolouredclown-x2vq.otf);
}
@font-face {
  font-family: 'webkinz';
  src: url(fonts/Cocon-Regular-Font.otf);
}
@font-face {
  font-family: 'crayon';
  src: url(fonts/DkCrayonCrumble-ddll.ttf);
}

body{
   background-image: url('https://64.media.tumblr.com/c09d69a63205f28302ceac0da62bb346/tumblr_inline_n2598iWtSJ1qhwjx8.gif');
   text-align: center;
   font-family: webkinz;
}

a {
  color: hotpink;
}

a:hover {
  color: pink;
}

header {
  width: 640px;
  border: 10px solid pink;
  background-color: snow;
  color: pink;
  font-size: 60px;
  font-family: bubble;
  margin: 5px;
  padding: 5px;
  float: right;
}

/* below is the header for the sidebar */
h2 {
  border-bottom: 5px dashed pink;
  color: pink;
  width: 200px;
  top: -10px; /* this ONLY affects the headers position */
  left: -15px; /* ditto to above */
  position: relative;
  font-size: 25px;
  font-family: bubble;
  margin: 5px;
  padding: 5px;
  text-align: center;
}

#side{
  width: 200px;
  position: fixed;
  left: 240px; /* increased numbers move left */
  background: transparent;
  text-align: left;
  font-family: webkinz;
  padding: 5px;
}

.navigation {
  width: 200px;
  border: 10px solid pink;
  background-color: snow;
  position: relative;
  margin-bottom: 10px;
}

.outgoing {
  width: 200px; 
  border: 10px solid pink;
  background-color: snow;
  position: relative;
  margin-bottom: 10px;
}

.other {
  width: 200px;
  border: 10px solid pink;
  background-color: snow;
  position: relative;
  /* no margin bottom due to image */
}

.sideimg {
  width: 200px;
  left: 25px; /* increased numbers move right */
  position: relative;
}


/* below is everything except sidebar basically. havent added anything so its really just if you wanna optimize ur stylesheet in the future */
#main {
	width: 820px;
}

.about {
  width: 640px;
  border: 10px solid pink;
  background-color: snow;
  font-size: 20px;
  margin: 5px;
  padding: 5px;
  float: right;
}

.stamps {
  width: 420px;
  height: 130px;
  border: 10px solid pink;
  background-color: snow;
  font-size: 20px;
  margin: 5px;
  padding: 5px;
  float: right;
  overflow: scroll;
  scrollbar-color: pink snow;
}
.blog{
  width: 180px;
  height: 130px;
  border: 10px solid pink;
  background-color: snow;
  font-size: 20px;
  margin: 5px;
  padding: 5px;
  float: right;
}

.featured{
  width: 420px;
  height: 130px;
  border: 10px solid pink;
  background-color: snow;
  font-size: 20px;
  margin: 5px;
  padding: 5px;
  float: right;
}
.sitebutton{
  width: 180px;
  height: 130px;
  border: 10px solid pink;
  background-color: snow;
  font-size: 20px;
  margin: 5px;
  padding: 5px;
  float: right;
}

.guestbook{
  width: 420px;
  height: 280px; /* minus 10 from todo height in order to line up */
  border: 10px solid pink;
  background-color: snow;
  font-size: 20px;
  margin: 5px;
  padding: 5px;
  float: right;
  overflow: scroll;
  scrollbar-color: pink snow;
}
.todo{
  width: 190px;
  height: 290px;
  color: lightcoral;
  background-size: 220px;
  background-image: url('https://i.imgur.com/9GtBZ52.png');
  font-size: 35px;
  font-family: crayon;
  margin: 5px 5px 5px 5px;
  padding: 10px;
  float: right;
}
.aboutme{
  width: 190px;
  height: 290px;
  color: lightcoral;
  background-size: 220px;
  font-size: 35px;
  font-family: crayon;
  margin: 5px 5px 5px 5px;
  padding: 10px;
  float: right;
}

footer {
  width: 665px;
  text-align: center;
  background-color: pink;
  color: white;
  float: right;
  margin-top: 3px;
  padding: 5px;
}

/* holds everything <3 */
#container{
width: 820px;
margin: auto;
margin-bottom: 10px;
}