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

body {
  background-image: url("https://prismaticbolt.neocities.org/holiday%20theme/e6a3121da61d5b87e897ae59ba91b3a7.jpg");
  background-size: 1200px 1800px;
  text-align: center;
  font-family: "Comic Sans MS";
  color: #69ff81;
}
.flex {
  display: flex;
  justify-content: center;

  padding: 6px;
  gap: 2px;
}

.mainbox {
  margin: auto;
  width: 1020px;
  height: auto;
}
.header {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 25px; 
background-image: url("https://prismaticbolt.neocities.org/holiday%20theme/lights14.gif");
background-repeat: repeat-x; 
background-position: top left;
}
.note {
  background: #003d15;
  text-align: center;
  width: 512px;
  height: 458px;
  border: 4px;
  border-style: outset;
  border-color: #e7e7e7 #e7e7e7 #a0a0a0 #ffffff;
}
.note a:hover {
  color: #ff697a;
}
/* unvisited link */
a:link {
  color: #69ff81;
}
/* visited link */
a:visited {
  color: #69ff81;
}
.sideleft {
  background: #0b3d00;
  width: 122px;
  height: 279px;
  padding: 12px;
  border: 4px;
  border-style: outset;
  border-color: #e7e7e7 #e7e7e7 #a0a0a0 #ffffff;
  margin-right: 11px;
}

.sideleft a {
  padding: 7px 17px 4px 17px;
  text-decoration: none;
  text-align: left;
  font-size: 16px;
  color: #69ff81;
  display: block;
}

.sideleft a:hover {
  color: #ff839a;
}

.sideright {
  background: #0b3d00;
  width: 122px;
  height: 253px;
  padding: 12px;
  border: 4px;
  border-style: outset;
  border-color: #e7e7e7 #e7e7e7 #a0a0a0 #ffffff;
  margin-left: 11px;
}

.sideright a {
  padding: 7px 17px 7px 16px;
  text-decoration: none;
  text-align: left;
  font-size: 16px;
  color: #69ff81;
  display: block;
}
.sideright a:hover {
  color: #69ff81;
}

.artsideleft {
  background: #0b3d00;
  width: 122px;
  height: 279px;
  padding: 12px;
  border: 4px;
  border-style: outset;
  border-color: #e7e7e7 #e7e7e7 #a0a0a0 #ffffff;
  margin-right: 11px;
}

.artsideleft a {
  padding: 14px 17px 6px 14px;
  text-decoration: none;
  text-align: left;
  font-size: 19px;
  color: #69ff81;
  display: block;
}

.artsideleft a:hover {
  color: #ff697a;
}

.note a:hover {
  color: #ff697a;
}
/* visited link */
a:visited {
  color: #69ff81;
}

.flex-container {
  padding: 4px;
  display: flex;
  justify-content: center;
  margin-left: -61px;
}
.updates {
  background: #0b3d00;
  text-align: center;
  width: 475px;
  height: 458px;
  border: 4px;
  border-style: outset;
  border-color: #e7e7e7 #e7e7e7 #a0a0a0 #ffffff;
}

.webrings {
  background: #0b3d00;
  text-align: center;
  width: 189px;
  height: 302px;
  border: 4px;
  margin-left: 8px;
  border-style: outset;
  border-color: #e7e7e7 #e7e7e7 #a0a0a0 #ffffff;
}

.coolsites {
  background: #0b3d00;
  text-align: center;
  width: 154px;
  height: 261px;
  border: 4px;
  margin-right: 9px;
  border-style: outset;
  border-color: #e7e7e7 #e7e7e7 #a0a0a0 #ffffff;
}
.sitebutton {
  background: #0b3d00;
  width: 107px;
  height: 238px;
  padding: 12px;
  border: 4px;
  border-style: outset;
  border-color: #e7e7e7 #e7e7e7 #a0a0a0 #ffffff;
  margin-left: 8px;
}

textarea {
  font-size: 0.7rem;
  letter-spacing: 1px;
}

textarea {
  padding: 1px 6px;
  width: 95px;
  line-height: 1.2;
  border: 2px solid #69ff81;
}

.coolsites a:hover {
  color: #69ff81;
}
/* visited link */
a:visited {
  color: #69ff81;
}

/* MEDIA QUERY */
@media screen and (min-width: 768px) {
  #flex {
    flex-wrap: wrap;

    display: none;
  }
}