body {
    background-color: hsla(213, 76%, 92%, 0.815);
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 10px;
    padding-top: 10px;

    overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
    }

    body::-webkit-scrollbar {
        width: 8px;
        }

        body::-webkit-scrollbar-track {
        background-color: #e4e4e4;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        }

        body::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #e4e4e4;
        border: 1px solid #aaa;
    }

    @font-face {
    font-family: "pixel";
    src: url("https://cheepfish.neocities.org/_fonts/pix.ttf") format("truetype");
    }

   h1 {
    font-family: "pixel";
    font-size: 25px;
    padding: 10px;
    padding-left: 20px;
    background: linear-gradient(to bottom, #ffefba 0%, #f1f1f1 24%, #ffefba 79%, #ffbd71 100%);
    box-shadow: 1px 5px 15px 1px rgba(186, 161, 255, 0.671);
    border-radius: 30px;
    margin-bottom: 15px;
    }

    .grid-poster {
        display: grid;
        grid-template-columns: repeat(4, auto);
        grid-template-rows: repeat(2, auto);
        align-items: center;
        justify-content: center;
        gap: 20px;
      
    }

    .poster {
        width: 95px;
        height: 140px;
        border: 2px solid rgb(137, 94, 255);
        border-radius: 6px;
        overflow: hidden;
        text-align: center;
        
    }

    .poster:hover .tooltip {
        display: block;
    }

    #char {
        width: 100%;
        height: 100%;
        object-fit: cover;
        image-rendering: pixelated;
    }

    #char:hover {
        opacity: 0.8;
        image-rendering: auto;
    }

    .poster2 {
        width: 95px;
        height: 95px;
        border: 2px solid rgb(137, 94, 255);
        border-radius: 6px;
        overflow: hidden;
    }

    .poster2:hover .tooltip {
        display: block;
    }

    #char2 {
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        image-rendering: pixelated;
    }

    #char2:hover {
        opacity: 0.8;
        image-rendering: auto;
    }

    .tooltip {
        font-family: DejaVu Sans Mono, monospace;
        display: none;
        background: rgba(245, 252, 255, 0.918);
        border-radius: 0.5em;
        padding: 4px;
        position: fixed;
        z-index: 1000;
    }