body {
  background: url('https://i.pinimg.com/1200x/e5/f6/25/e5f625e5f859951051c1333a177b8106.jpg');
  color: #1e3231;
  font-family: 'StampRSPKOne-Regular';
  margin: 30px 14% 20% 14%;
  text-align: center;
  padding-left: calc(100vw - 100%);
}

@font-face {
  font-family: StampRSPKOne-Regular;
  src: url('https://beorisu.neocities.org/StampRSPKOne-Regular.otf');
}

a:hover {
  cursor: url('https://beorisu.neocities.org/Untitled_design__1_-removebg-preview.png'), pointer;
}

* {
  box-sizing: border-box;
}

#container {
  background: white;
  max-width: 900px;
  margin: 0 auto;
  /* this centers the entire page */
}

#container a {
  color: #ED64F5;
  font-weight: bold;
  /* if you want to remove the underline
     you can add a line below here that says:
     text-decoration:none; */
}

#flex {
  display: flex;
}

@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }

  main {
    order: 1;
  }
  
  #navbar ul {
    flex-wrap: wrap;
  }
  
  .artbox {
    display: flex;
    flex-wrap: wrap;
  }
  
  .artbox img {
    max-width: 100%;
  }
  
}

/* navigation section!! */
#navbar {
  height: 40px;
  background-color: #2e2116;
  /* navbar color */
  width: 100%;
  position: relative;
  bottom: 10px;
  border-radius: 20px 20px 0px 0px;
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#navbar li {
  padding-top: 10px;
}

/* navigation links */
#navbar li a {
  font-family: 'StampRSPKOne-Regular', sans-serif;
  color: #ede0c8;
  /* navbar text color */
  font-weight: 100;
  position: relative;
  bottom: 2px;
  text-decoration: none;
  font-size: 15px;
  text-shadow: 2px 2px 4px #000000;
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
  font-family: 'StampRSPKOne-Medium', sans-serif;
  color: #c39e97;
  position: relative;
  bottom: 8px;
  text-decoration-style: double;
  font-weight: 800;
  font-size: 25px;
}

.container {
  box-shadow: 2px 2px 7px 1px rgba(23,10,6,0.76);
  display: block;
  text-align: justify;
  max-width: 90ch;
  background: white;
  width: 512px;
  /* width: moz-fit-content;*/
  margin-left: 50%;
  transform: translate(-50%, 0);
  margin-bottom: 50px;
  border-radius: 0px 0px 20px 20px;
}

.artbox {
  display: block;
  text-align: justify;
  max-width: 90ch;
  background: white;
  padding: 10px;
  width: 512px;
  /* width: moz-fit-content;*/
  margin-left: 50%;
  transform: translate(-50%, 0);
  margin-bottom: 50px;
  object-fit: contain
}


hr {
  border: none;
  height: 32px;
  background-image: url('https://64.media.tumblr.com/737d783a8e44ec3e8041644dd16b6517/4160be3cc2b84620-cf/s540x810/a8dab8298352118a6ecae372fb0d4a7030711d14.gifv');
  background-size: auto 100%;
  background-repeat: repeat; /* the background will repeat horizontally */
  background-position: center; /* bg will be centered */
}

footer {
  font-family: 'StampRSPKOne-Medium', sans-serif;
  color: #2e2116;
  background: white;
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
  position: relative;
  bottom: 10px;

}