@font-face {
        font-family: Typestar;
        src: url('https://myromancedchemicals.neocities.org/fonts/typestar.ttf') format("truetype");
        }
      body {
        background-image: url('https://64.media.tumblr.com/13159ed80fb3d321fe99e6bace181d39/e59327805b349954-ba/s2048x3072/be9ca0542fb3881aec3e9d9c665c4a024b1107c0.pnj');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        font-family: "Typestar" , Arial;
      }
      table, tr, td {
        border: 0px solid black;
        }
      #page-contents > table {
        position: absolute; 
        left: 0; 
        right: 0; 
        margin-top: 0vh;
        }
      h1 {
        text-align: center;
        margin-top: 50px;
        font-size: 40px;
        color: rgba(250, 240, 200, 0.7);
        } 
      p {
        padding: 0;
        margin: 0;
        line-height: 14px;
        font-size: 12px;
        color: rgba(20, 15, 9, 0.9);
        }
      #page-contents {
        background-color: rgba(0, 100, 255, 0);
        width: 50vw;
        height: 64vh;
        border: 0px;
        position: fixed; 
        left: 0; 
        right: 0; 
        margin-inline: auto; 
        margin-top: 1vh;
        padding: 5px;
        }
      .page {
        width: 50vw;
        height: 64vh;
        background-image: radial-gradient(rgba(20, 60, 9, 0.5) 1.25px, transparent 0);
        background-size: 20px 20px;
        padding: 0vh;
        }
      #gutter {
        width: 10vw;
        }
      .bg {
        max-height: 60vh;
        overflow-y: scroll;
        scrollbar-width: none;
        }
      .tea {
        max-width: 10vw;
        }
      .star {
        opacity: 0.7
        }
      .star:hover {
        opacity: 1.0;
        }
      body:has(#tea:hover) #teaStar {
        opacity: 1;
        }
      body:has(#main:hover) #mainStar {
        opacity: 1;
        }