/* 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, body {
  cursor: url("images/dragon dagger (p).png"), default;
}

body {
  /* background-color: white; 
  color: black;
  font-family: Verdana; */
  background-image: url("images/background.jpg");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

.my-container, .top, .middle, .bottom {
  box-sizing: border-box;
}

.my-container {
  margin: 2rem auto;
  width: 50rem;
  height: 50rem;
  background-color: bisque var(--border);
  border: 1px solid var(--border);
  border-radius: 30px 30px 30px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: violet -3px 4px 9px -3px;
  position: relative;
  overflow: visible;
}

.top {
  width: 100%;
  height: 5%;
  background-color: beige;
  border-bottom: none;
  text-align: center;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.middle {
  width: 100%;
  height: 85%;
  display: flex;
  padding: 5px;
  gap: 5px;
  background-color: beige;
}

.center {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 5px;
  gap: 5px;
  background-color: bisque;
}

.left, .right {
  width: 25%;
  height: 100%;
  background-color: bisque;
  border: 2px solid seashell;
  border-radius: 10px 10px 3px 3px;
  padding: 3px;
}

.bottom {
  width: 100%;
  height: 10%;
  background-color: beige;
  /*border-top: 1px solid var(--border);
  box-shadow: inset slategrey 0 0 6px;*/
  text-align: center;
  font-size: 15px;
  color: slategray;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.vertical-stack {
  display: flex;
  flex-direction: column; /* stack children vertically */
  gap: 20px; /* vertical spacing between lines */
}

.clippy {
  position: absolute;
  z-index: 10;
  bottom:-30px;
  right: -30px;
  width: 200px;
  height: auto;
  image-rendering: optimizeSpeed;
  filter: drop-shadow(0 0 5px black);
}

.visitcount {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width:  40rem;
}

.nav {
  width: 100%;
  border: 1.5px solid violet;
  border-radius: 13px 13px 3px 3px;
  overflow: auto;
  /*background: radial-gradient();*/
  box-sizing: border-box;
}

.nav a {
  font-size: 20px;
  color:chocolate;
}
.nav ul {
  padding-left: 0;
  margin: 0;
}

.nav li {
  list-style: None;
}
.nav li a {
  display: block;
  width: 95%;
  background: linear-gradient(to bottom, #fdf2d5 0%,#fde08f 50%,#ffd359 51%,#fdebbb 100%);
  border: 1px solid sandybrown;
  height: 2.5rem;
  line-height: 2.5rem;
  margin: 10px auto;
  padding: 3px;
  border-radius: 5px;
  box-shadow: 0 0 2px #FFF, 0 0 1px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 1px #FFF, 0 3px 4px #553600;
  box-sizing: border-box;
  white-space: nowrap;
}


.speech-bubble {
  position: absolute;
  bottom: 20%;
  right: -10%;
  background-color: #fde08f;
  color: black;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid aquamarine;
  font-family: sans-serif;
  font-size: 25px;
  display: none;
  white-space: nowrap;
  z-index: 10;
}

.speech-bubble::after {
  content: '';
  position: absolute; 
  left: 5px;
  bottom: -24px;
  width: 0;
  height: 0;
  border-left: -60px solid transparent;
  border-right: 30px solid transparent;
  border-top: 25px solid#fde08f;
}

#guestbook {
  height: 20%;
  display: flex;
  left:35%;
  align-items: center;
  position: absolute;
  bottom: 10%;
}

#updates {
  padding-top: 10px;
  font-size: larger;
  font-family: Arial, Helvetica, sans-serif;
}