/*BASICS*/
* {
  scrollbar-color: #c7cac9;
  scrollbar-width: thin;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: none;
}

#flex {
  display: flex;
}

#column {
  flex-direction: column;
  max-width: 400px;
}

#container {
  max-width: 1000px;
  margin: 0px auto;
}

#container {
  max-width: 1000px;
  margin: 0px auto;
  display: grid;
  grid-template-columns: 200px 800px;
  grid-gap: 5px;
}

/*BODY*/
body {
  background: url(https://bruisedgh0st.neocities.org/giftshop/in%20the%20mall.png);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  width: 900px;
  position: static;
  top: 25px;
  right: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: ms pgothic;
  font-size: 14px;
  overflow-x: hidden;
  filter: drop-shadow(3px 3px 26px black);
}

/*HEADER*/
header {
  background-image: url(https://bruisedgh0st.neocities.org/giftshop/dither_it_scraps.png);
  background-size: cover;
  background-position: center;
  height: 180px;
  width: 740px;
  margin-top: 40px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  border: 2px solid black;
}

.shopsign img{
  height: 95px;
}

.shopsign .sign {
  position: relative;
  top: -48px;
  right: 80px;
}

.shopsign .first{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: z-index .5s ease,transform .6s ease;
}

.shopsign .sign:hover .first{
  z-index: 0;
}

#banner {
  background: yellow;
  color: black;
  text-align: center;
  overflow: hidden;
  height: 25px;
  padding: 2px;
  border-bottom: 2px solid black;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black,
    0 0 2px black;
  font-size: 18px;
}

/*NAVIGATION*/
.navigation {
  background-image: url(https://bruisedgh0st.neocities.org/giftshop/greyscale%20shelf.png);
  background-size: 100% 100%;
  background-color: #DEDEDE;
  overflow: hidden;
  margin-top: -1px;
  height: 580px;
  width: 210px;
  border: 2px solid black;
}

.shopsign2 img{
  height: 45px;
}

.shopsign2 .sign2 {
  position: relative;
  top: -100px;
  right: 15px;
}

.shopsign2 .first{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: z-index .5s ease,transform .6s ease;
}

.shopsign2 .sign2:hover .first{
  z-index: 0;
}

/*INDEX*/
.index {
  background-image: url(https://bruisedgh0st.neocities.org/home/cardboard%20bg.png);
  background-color: #DEDEDE;
  overflow: hidden;
  margin-left: 7px;
  margin-top: -1px;
  height: 580px;
  max-width: 548px;
  border: 2px solid black;
}

.storefront {
  background-image: url(https://bruisedgh0st.neocities.org/giftshop/shop%20front.png);
  height: 550px;
}

/*TABS*/
#memo {
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black,
    0 0 2px black, 1px 2px 3px black, 0 0 2px black;
  font-size: 23px;
}

.substance {
  border: 1px solid black;
  height: 437px;
  width: 430px;
  margin-top: -370px;
  margin-left: 5px;
  overflow-y: scroll;
  overflow-x: hidden;
}

ul {
  list-style-image: url('https://bruisedgh0st.neocities.org/giftshop/lil%20man%2010.webp');
}

#memodesc {
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black,
    0 0 2px black, 1px 2px 3px black, 0 0 2px black;
  margin-top: -45px;
  margin-left: -10px;
}

#links {
  font-size: 18px;
  background: rgba(240, 255, 25, .5)
}

#linkcap {
  background: rgba(0, 0, 0, .3);
  font-size: 13px;
  padding-right: 1px;
}

/*BOOKMARKS*/
#bookmarks {
  height: 550px;
}

.shopsign3 img{
  height: 55px;
}

.shopsign3 .sign3 {
  position: relative;
  top: -140px;
  right: 30px;
}

.shopsign3 .first{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: z-index .5s ease,transform .6s ease;
}

.shopsign3 .sign3:hover .first{
  z-index: 0;
}

/*RESOURCES*/
#resources {
  height: 550px;
}

.shopsign4 img{
  height: 55px;
}

.shopsign4 .sign4 {
  position: relative;
  top: -140px;
  right: 25px;
}

.shopsign4 .first{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: z-index .5s ease,transform .6s ease;
}

.shopsign4 .sign4:hover .first{
  z-index: 0;
}

/*GRAPHICS*/
#graphics {
  height: 550px;
}

.shopsign5 img{
  height: 65px;
}

.shopsign5 .sign5 {
  position: relative;
  top: -145px;
  right: 30px;
}

.shopsign5 .first{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: z-index .5s ease,transform .6s ease;
}

.shopsign5 .sign5:hover .first{
  z-index: 0;
}

#imgdesc {
  margin-top: -30px;
  padding: 5px;
  filter: drop-shadow(5px 5px 25px black);
}

/*PAGEDOLL*/
.pagedoll {
  position: fixed; 
  bottom: -10px; 
  right: 850px; 
  width: 300px; 
  height: 300px; 
 z-index: 999;
}

.dollspeech {
  position: fixed; 
  bottom: 284px; 
  right: 905px; 
  width: 145px;
}

.speech {
  border-radius: 15px; 
  border: 1px solid black; 
  position: relative;
  height: 100px;
  background-color: white;
}

.dolltext {
  padding: 2px;
  margin-left: 5px;
  margin-top: 15px;
  font-size: 13px; 
  color: black;
}