/* 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
   "fuck" */

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: url("websitebg.webp");
  background-color: #001428;
  background-size: 100%;
  color: aquamarine;
  font-family: "cousineregular", monospace;
}

aside {
  display: inline-block;
  width: 150px;
  float: left; /* credit where it's due to htmldog (page layout 7,) i nicked the technique since i didn't want to use absolute positioning and couldn't figure it out */
  position: relative;
  top: 10px;
}

nav,
#blinkies,
#buttons,
#stamps {
  width: 150px;
  text-align: center;
  display: inline-block;
  padding: 10px;
  margin-top: 10px;
  margin-left: 10px;
}

nav {
  border: solid 2px #7f9;
}

/* the fact that this has to be a separate condition infuriates me greatly */
nav li {
  list-style-type: none;
}

#blinkies {
  border: solid 2px aquamarine;
}

#buttons {
  border: solid 2px cyan;
}
#stamps {
  border: solid 2px #f9f;
}

a:link {
  color: #7ff;
}

a:visited {
  color: #7be;
}

a:hover {
  color: #f9f;
}

a:active {
  color: white;
}

main {
  display: inline-block;
  position: relative;
  margin: 10px;
  margin-left: 45px;
  width: 60%; /* untested on mobile, will need to figure out how to detect it and adjust width accordingly */
  clear: right;
}

main h1 {
  margin-bottom: 10px;
  color: aquamarine;
}

article {
  border: solid 2px aquamarine;
  padding: 10px;
}

.center {
  text-align: center;
}

figure {
  display: inline-block;
}

#meredith {
  position: relative;
  bottom: 10px;
  float: right;
}

figcaption {
  text-align: center;
  font-size: 0.9em;
  color: white;
}

p {
  padding: 5px 0px;
}

main ul,
main ol {
  padding-left: 15px;
}