/* 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." */
html {
  scrollbar-color: darkred palegoldenrod;
  scroll-behavior: smooth;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  margin: auto;
  padding: auto;
  font-family:
    ms gothic,
    arial,
    sans-serif;
  text-align: center;
  color: #8b0000;
}

textarea {
  resize: none;
  margin: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.navbox textarea {
  max-width: 200px;
}

hr {
  border: 0;
  border-top: dashed 1px darkred;
}

svg {
  color: darkred;
}

.bigbox {
  background-color: #fffaf0;
  width: 1200px;
  vertical-align: top;
  margin: 0 auto;
  min-height: 100vh;
  border-left: dashed 2px darkred;
  border-right: dashed 2px darkred;
}

/*banner & footer maybe*/
.bannerstuff {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*page body*/
.errythang {
  margin: auto auto auto;
  display: flex;
  justify-content: center;
  min-height: 750px;
}

/*sidebars*/
.sidestuff {
  max-width: 250px;
  flex-direction: column;
  display: flex;
  height: 100%;
}

.sidestuff ul,
.sidestuff li {
  list-style: none;
  margin: 0;
  padding: 0 0 5px 0;
  text-align: left;
  line-height: 0.7;
  color: darkred;
}

/*nav*/
.navbox {
  background-color: white;
  max-width: 250px;
  width: 230px;
  border: dashed 2px yellowgreen;
  text-align: center;
  justify-content: center;
  padding: auto;
  margin: auto;
  overflow-wrap: anywhere;
}

.navboxcontent {
  text-align: center;
  justify-content: center;
  margin: 10px;
  max-width: 230px;
}

.blinkies {
  max-width: 200px;
  width: 150px;
  border: none 2px yellowgreen;
  text-align: center;
  justify-content: center;
  padding: auto;
  margin: auto;
  overflow-wrap: anywhere;
  position: relative;
}

.navbox li {
  text-align: start;
  margin-left: 10px;
  margin-top: 10px;
}

.navbox li:before {
  text-align: left;
  padding-right: 5px;
  content: "♪";
}

.navbox a:link {
  color: #006400;
  text-decoration: none;
}

.navbox a:visited {
  color: darkgreen;
}

.navbox a:hover {
  color: yellowgreen;
}

.navbox a:active {
  color: greenyellow;
}

/*main stuff*/
.mainstuff {
  background-image: url(images/backgrounds/heartbggreen.gif);
  min-width: 650px;
  max-width: 650px;
  min-height: 750px;
  margin: 0 10px;
  border: dashed 2px yellowgreen;
  color: darkred;
  position: relative;
}

.maincontent {
  width: 650px;
  margin: 0;
  justify-content: center;
}

.actualmaincontent {
  width: 650px;
  margin: 0;
  padding: 20px 0 20px 0;
  justify-content: center;
  display: grid;
  grid-row-gap: 5px;
}

.mainbox {
  background-color: white;
  border: dashed 2px darkred;
  text-align: justify;
  padding: 0 20px 0 20px;
  max-width: 500px;
  margin: auto;
  color: darkgreen;
}

.mainbox2 {
  background-color: floralwhite;
  border: dashed 2px darkgreen;
  text-align: center;
  justify-content: center;
  padding: 0 20px 0 20px;
  max-width: 500px;
  margin: auto;
}

.mainbox h1 {
  text-align: center;
}

.mainbox a:link {
  color: darkred;
  text-decoration: none;
}

.mainbox a:visited {
  color: darkred;
}

.mainbox a:hover {
  color: yellowgreen;
}

a:link {
  color: darkgreen;
  text-decoration: none;
}

a:visited {
  color: darkgreen;
}

a:hover {
  color: yellowgreen;
}

a:active {
  color: greenyellow;
}