/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

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

@font-face {
  font-family: "basiic";
  src: url("basiic.ttf")
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: #f0cbff;
  outline: 1px solid #0020ad;
}

::selection{
  background: #b0e29857;
}

:root {
  --bgcolor:#2f293f;
  --textcolor: #f9f9f9;
}

body {
  margin: 0px;
  /*background-color: #4a4063;*/
  background-image: url(https://i.pinimg.com/originals/92/d5/62/92d562d85111675b26a6319967b88564.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: "basiic";
  font-size: .8em;
  color: var(--textcolor);
}

main {
  max-width: 1200px;
  margin: auto;
}

#wholeSite {
  position: relative;
  background-color: var(--bgcolor);
  width: 800px;
  border-radius: 5px;
  margin-bottom: 4em;
  margin-top: 4em;
  overflow: auto;
}

header {
  position: relative;
  margin: auto;
  background-color:#2f293f;
  border-bottom: 1px dotted #f0cbff1f;
  height: auto;
  border: 0px solid transparent;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

footer {
  padding: 20px;
  text-align: center;
  font-family: "yoster";
  color: #f0cbff;
  border-top: 1px dotted #f0cbff1f;
}

nav {
  position: relative;
  float: left;
  width: 200px;
  z-index: 1;
  margin: 10px;
}

nav h2 {
  border-bottom: 1px dotted #CCC;
}

nav h2::after {
  content: " " url(http://whimsical.heartette.net/_files/material/bullets/bulb8.gif);
}

.navSubLinks{
  background-color: #2f293f;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px;
  /*
  background-position: top;
  background-image: url(http://whimsical.heartette.net/_files/material/bg/80x80bh_cloud1b.gif);
  background-repeat: repeat-x;*/
}

.nslContainer {
  width: 150px;
  margin: 15px;
}

nav a, nav a:visited {
  color:#f9f9f9;
}

nav a:hover, nav a:hover:visited {
  color:#f0cbff;
}

nav a:hover:after {
  content:"";
}

nav ul {
  padding: 0px;
  list-style-position: inside;
}

h1 {
  
  font-family: "yoster";
  font-size: 1.5em;
  border-bottom: 1px dotted #CCC;
}

h2 {
  font-weight: normal;
  font-size: 1.2em;
  font-family: "yoster";
  text-transform: lowercase;
  border-bottom: 1px dotted #CCC;
}

ul li {
  list-style-image: url(https://foollovers.com/mat/i-ribbon02/h11-icon-ribbon.gif);
}

a, a:visited {
  color: #b0e298;
  text-decoration: none;
}
a:hover, a:visited:hover {
  color: #eeabc4;
  text-decoration: underline;
}
a:hover:after {
  content: "[GO!]"
}

marquee {
  font-size: 1em;
  padding: 5px;
  margin-top: 0px;
  display: inline-block;
}

b, strong {
  font-family: "yoster";
}

.centered {
  text-align: center;
}

.rightaligned {
  text-align: right;
  float: right;
  margin: 5px;
}

#container {
  position: relative;
  margin: auto;
  overflow-y: scroll;
  background-color: #2f293f;
  padding: 10px;
  max-width: 600px;
  max-height: 290px;
}
#profilePic {
  position: absolute;
  z-index: 2;
  left: 20px;
  top: 130px;
}

#headerIMG{
  padding: 0px;
  margin: 0px;
  width: 100%;
  top: 10px;
  height: 400px;
  background-image: url(https://sig.grumpybumpers.com/host/pyunpyunbon.gif);
  background-size: cover;
  background-position: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#headerTitle{
  font-size: 3.5em;
  padding: 0px;
  padding-left: .5em;
  margin: 0px;
  position:relative;
  text-shadow: 0px 0px 11px rgba(235, 108, 201, 1);
  background-color: var(--bgcolor);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 0px solid #CCC;
}