@font-face {
  font-family: "myFirstFont";
  src: url("/fonts/basiic.ttf") format("truetype");
}
html {
  cursor: url(images/buddy.png), auto;
}
body {
  text-align: center;  /* This is a hack for older browsers to center the page */
  background-image:url(images/sparklecloud.gif);
	background-repeat:repeat;/*the image repeats horizontally*/
}

#container {
  margin: 0 auto;      /* This centers the page in modern browsers */
  text-align: left;    /* This is a hack for older browsers to center the page */
  width: 1189px;        /* This sets our total page width */
  font-family: "myFirstFont";
}

#header {
  width: 1189px;        /* This sets the header to stretch the full page width */
  text-align:center; /*centers horizontally*/
	line-height: inherit; /*same as height and for centering vertically*/
	padding: 20px 0px 20px 0px;
}

#content {
  float: left;         /* This causes the content to move to the left */
  width: 860px;        /* We need to set the width whenever we float an element */
  height: 610px;
  margin: 0px 5px 0px 7px;
  padding: 10px 8px 10px 8px;
  overflow:auto;
  border-radius:0.8em;
  border-style: outset;
  border-color: #FF85A2;
  background: rgba(255, 255, 255, 0.5);
}

#sidebar-left {
  float: left;         /* This causes the sidebar to move to the left
                          It's going to appear to the left of the content because 
                          we declared it first in our HTML page */
  width: 130px;        /* We need to set the width whenever we float an element */
  height: 610px;
  padding: 10px 8px 10px 8px;
  border-radius:0.8em;
  border-style: outset;
  border-color: #FF85A2;
  background-color: pink;
  font-size: 15px;
  color: #818181;
}

#sidebar-right {
  float: right;        /* This causes the sidebar to move to the right */
  width: 130px;        /* We need to set the width whenever we float an element */
  height: 610px;
  padding: 10px 8px 10px 8px;
  border-radius:0.8em;
  border-style: outset;
  border-color: #FF85A2;
  background-color: black;
  font-size: 15px;
  color: #818181;
}

/* When you mouse over the navigation links, change their color */
        #sidebar-left a:hover {
          color: #f1f1f1;
        }
        
        #sidebar-right a:hover {
          color: #f1f1f1;
        }

#footer {
  clear: both;         /* This makes sure that the footer clears both the sidebar and content floats */
  width: 1139px;        /* This sets the footer to stretch the full page width */
  padding: 10px;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: pink; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FF85A2; 
}