@font-face {
  font-family: 'OSRS';
  src: url(assets/RuneScape-Quill.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RuneScape Surok';
  src: url('assets/RuneScape-Surok.ttf') format('truetype');
}



body {
    
  /* Plain Text */
  background-image: url(assets/pixelbrick.png);
  color: #654321;
  font-family: 'OSRS', Times;
  font-size: 140%;
  /* Cursor */
  cursor: url(assets/GauntletCursor1.png), auto;
}

h1 {
  font-size: 175%;
  letter-spacing: 5px;
  word-spacing: 3px;
}

h2 {
  font-size: 200%
}

.scroll-box {
  max-height: 400px;        /* adjust to taste */
  width: 100%;               /* or any width you prefer */
  margin: 0em auto;
  padding: 0em;
  padding-left: 45px;
  overflow-y: scroll;         /* vertical scrollbar */
  background: transparent;
  box-sizing: border-box;
}

.scroll-box::-webkit-scrollbar {
  width: 45px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: 
    url(assets/newquill.png) no-repeat center center;
  background-size: contain;
  border: none;

}

.content {
    background: url('assets/scrollmain.gif') repeat-y top center;
    padding: 35px 75px;
    position: relative;
    /* mess around with these to make it so scroll doesn't move */
    width: 740px;
    margin: 0 auto
    
}

.content:before,.content:after {
    background: url('assets/scrolltop.gif') no-repeat center top;
    content: '';
    height: 50px;
    left: 0;
    position: absolute;
    top: -11px;
    width: 100%
}

.content:after {
    background: url('assets/scrollbottom.gif') no-repeat center bottom;
    bottom: -11px;
    top: auto
}

/* Shared styles for all tabs */
.content .tab {
  position: absolute;     
  width: 96px;            /* adjust to your asset’s natural size */
  height: 96px;           /* adjust as needed */
  background-repeat: no-repeat;
  background-size: contain;
}

/* First tab – tweaked to sit in the top-right */
.content .tab-1 {
  top: 50px;              /* tweak until it sits flush under the scroll header */
  right: 10px;            /* distance from the right edge */
  background-image: url('assets/redribbon2.png');
}

/* Second tab – you can stack or offset multiple tabs */
.content .tab-2 {
  top: 110px;
  right: 10px;            /* offset it further left of the first tab */
  background-image: url('');
}


  /* Default link color */
  a {
    color: goldenrod;
  }
  
  /* Visited link color */
  a:visited {
    color: lightgrey;
  }

  /* Hovered link color */
  a:hover {
    color: yellowgreen;
  }

  /* Active link color */
  a:active {
    color: lightpink;  
}

 /* Change the cursor only when hovering links */
 a:hover {
  cursor: url(assets/GauntletCursor2.png)  , auto;

}

/* Center all paragraphs and headings */
body {
  text-align: center;
}



.torch-side {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  pointer-events: none; /* don’t interfere with clicks */
  z-index: 1000;
}

.left-torches {
  left: 0;
}
.right-torches {
  right: 0;
}

.torch {
  width: 100px;
  height: 200px;
  margin: 10px auto;
  background: url(nothing/) no-repeat center / contain;
  position: relative;
}

.torch::after {
  content: '';
  position: absolute;
  top: -43px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 220px;
  background: url(assets/torchanimated2.gif) no-repeat center / contain;
}


.gate-img {
  display: block;
  width: 300px;  /* match PNG dimensions */
  height: 400px;
  margin: 100px auto;
  background: url('assets/castlegate.png') center/cover no-repeat;
  text-align: center;
  line-height: 400px;
  font-family: 'OSRS', Times;
  color: lightgrey;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  text-decoration: none;
}

.vine-border {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 80px;                /* adjust to your vine’s width */
  background: url(assets/JungleVine.png) repeat-y center;
  pointer-events: none;
  z-index: 999;
}

/* Left side */
.vine-border.left {
  left: 0;
}

/* Right side: mirror the image */
.vine-border.right {
  right: 0;
  transform: scaleX(-1);
}