%% title = "opinions"
icon = "folder"

% id = "01HBTSXTTAAAHGKD4TZZW14KFK"
- ``` =html
<style>
    @font-face {
        font-family: "Determination Sans";
        src: url('/static/font/DTM-Sans.otf?v=b3-4fe96c14');
    }

    .undertale-save-box {
        --icon-heart: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAQ0lEQVQY042P0QoAMARF7/X/3zzTsoW0nBRd5wHAUCs9DYQTM/rwMEssWCmrUodgwEjiPfIjSPqmEYj4chVZdmjEJGzAMxYAKMRofgAAAABJRU5ErkJggg==');
    
        border: 6px solid white;
        background: black;
        color: white;

        font-family: "Determination Sans";
        font-size: 20pt;
        line-height: 1;

        width: 424px;
        height: 174px;
        padding: 20px 24px 17px 24px;

        display: flex;
        flex-direction: column;

        &>ul.row {
            padding-left: 0;
            margin-left: 0;

            display: flex;
            flex-direction: row;

            &.player-info { padding-bottom: 14px; }
            &.buttons { margin-top: auto; }

            &>li {
                display: block;

                &.player-name { width: 146px; }
                &.love { width: 138px; }
                &.button-save, &.button-return { width: 180px; }
            }

            &.buttons {
                &>li {
                    padding-left: 30px;
                    cursor: pointer;

                    &:hover {
                        image-rendering: pixelated;
                        background-image: var(--icon-heart);
                        background-repeat: no-repeat;
                        background-size: 18px;
                        background-position: 2px 4px;
                    }

                    &>a {
                        text-decoration: none;
                        color: white;
                    }
                }
            }
        }

        &.file-saved {
            color: #ff0;
        }
    }
</style>

<div class="undertale-save-box">
    <ul class="row player-info">
        <li class="player-name">SIGSEGV</li>
        <li class="love">LV 1</li>
        <li class="play-time">0:00</li>
    </ul>
    <ul class="row">
        <li class="save-point">Hotland – Bad Opinion Zone</li>
    </ul>
    <ul class="row buttons">
        <li class="button-save">Save</li>
        <li class="button-return"><a href="/">Return</a></li>
    </ul>
</div>
```