@font-face {
    font-family: Krait;
    src: url(/fonts/krait.solid-regular.otf);
}

@font-face {
    font-family: Krait-Hollow;
    src: url(/fonts/krait.hollow-regular.otf);
}

@font-face {
    font-family: Vipnagorgialla;
    src: url(/fonts/vipnagorgialla.regular.otf);
}

@font-face {
    font-family: Toxigenesis;
    src: url(/fonts/toxigenesis.rg-bold.otf);
}

@font-face {
    font-family: Loveya;
    src: url(/fonts/loveya.script-regular.otf);
}

@font-face {
    font-family: Loveya;
    src: url(/fonts/loveya.script-italic-regular.otf);
    font-style: italic;
}

@font-face {
    font-family: Gista Danes;
    src: url(/fonts/gista-danes.regular.otf);
}

body {
    background-color: lightpink;
    padding: 1rem;
}

.wrapper {
    width: 100%;
    max-width: 400px;
}

.vinebox {
    width: 100%;
    height: 295px;
    min-width: 216px;
    max-height: max-content;
    display: flex;
    flex-direction: column;
}

.vineborder {
}

.vineborder.horizontal {
    height: 32px;
    min-height: 32px;
    flex: 1;
    width: 100%;
    background-image: url('/vines-side.gif');
    background-repeat: repeat-x;
    background-size: 32px;
}

.middle-row {
    flex: 0.8;
    display: flex;
    flex-direction: row;
}

.vineborder.vertical {
    width: 32px;
    min-width: 32px;
    height: 100%;
    flex: 0.1;
    background-image: url('/vines.gif');
    background-repeat: repeat-y;
    background-size: 32px;
}

.contents {
    flex: 1;
    flex-direction: column;
    padding: 10px;
    overflow: auto;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: rgb(150, 0, 80);
    display: flex;
}