.shipil-tip-container {
    --primary: #292929;
    --secondary: #a2a2a2;

    /* display: none; */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);

    /* font-family: Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
    font-family: 'Open Sans';

    color: white;
    text-shadow: black 1px 1px;

    .shipil-tip {

        border: 1px solid var(--secondary);
        /* border-bottom-left-radius: 15px;
        border-top-right-radius: 15px; */
        border-radius: 15px;

        /* padding: 20px; */
        margin: 15% auto;

        width: 80%;
        max-width: 800px;

        position: relative;
        z-index: 2;


        /* animation: 'wiggle' 2s linear 0ms infinite forwards; */

        animation-duration: 2s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;

        .shipil-title {
            font-weight: bold;
            font-family: monospace;
            color: white;
            text-transform: uppercase;

            /* text-shadow: #f00 1px 1px; */

            padding: 6px 20px;



        }

        .shipil-msg {

            margin: 20px;
            font-size: 15px;

            filter: drop-shadow(black 1px 2px);

        }

        .shipil-btn-group {
            display: flex;
            justify-content: space-around;

            padding: 10px 0;

            button {

                width: 100px;

                font-family: inherit;
                text-transform: capitalize;

                color: white;
                -webkit-text-stroke: black;

                background-color: transparent;
                border: none;
            }

            button:hover {

                cursor: pointer;
            }
        }
    }

    .shipil-tip.jrpg {
        background-color: #fff;
        background: url('/welcome/assets/awesome-mountain-image-hd.jpg'), #fff;
        background-blend-mode: exclusion;

        border-radius: 0px;

        .shipil-title {
            background: url(/welcome/assets/weowo.png);
            background-color: white;
            background-blend-mode: hard-light;
        }

        .shipil-msg {
            font-family: 'Open Sans';
        }

        .shipil-btn-group {

            button {
                /* background-color: #f4fff0; */

                /* background: linear-gradient(blue 50%, #b5abff); */
                background: blue;

                border-style: outset;
                border-color: var(--secondary);
                border-width: 2px;
                border-bottom-right-radius: 15px;
                border-top-left-radius: 15px;
                border-bottom-left-radius: 4px;
                border-top-right-radius: 4px;
            }

            button:hover {
                /* background: linear-gradient(rgb(7, 7, 226) 50%, #b5abff); */
                background: rgb(7, 7, 226);
            }
        }
    }

    .shipil-tip.coffee {

        /* background: url('/welcome/assets/coffeeaddict.jpg'), #fff8dd; */
        background: #fff8dd;
        background-position: bottom;
        /* background-blend-mode: hard-light; */
        background-size: 60px;

        .shipil-title {
            font-family: inherit;
            background-color: brown;
            color: beige;
        }

        .shipil-msg {
            color: brown;
            filter: none;
            text-transform: uppercase;
            text-shadow: none;
            background-color: yellowgreen;
        }

        button {
            background-color: #650b0b;
        }

        button:hover {
            background-color: #510909;
        }
    }

    .shipil-tip.default {

        background-color: #fff;

        font-family: 'Helvetica';

        border-color: aliceblue;
        border-width: 4px;

        .shipil-title {
            border-top-left-radius: 11px;
            border-top-right-radius: 11px;
            background: linear-gradient(blue, white);
            color: white;

            font-family: 'Helvetica';
            letter-spacing: 2px;
        }

        .shipil-msg {
            color: black;

            padding: 2px;

            /* border: 1px solid red;
            outline: 1px solid yellow; */
            outline-offset: 2px;

            text-shadow: none;
            filter: drop-shadow(lightgray 1px 1px);
            font-size: 18px;
        }

        .shipil-btn-group {

            button {
                background-color: gray;
                letter-spacing: 2px;
            }

            button:hover {
                background-color: green;
                letter-spacing: 1px;
            }
        }
    }

    .shipil-tip.datingsim {

        text-shadow: none;
        filter: none;
        color: #a1056b;

        background: url('/welcome/assets/datingsim-gf.png'), url('/welcome/assets/dating-bgtile.jpg'), pink;
        background-repeat: no-repeat, repeat;
        background-position: bottom, left;
        background-size: 90px, auto;

        .shipil-title {
            -webkit-text-stroke: 1px var(--primary);
            font-size: large;
            background: #e772ff;
            border-top-left-radius: 13px;
            border-top-right-radius: 13px;
        }

        .shipil-msg {
            font-family: 'Open Sans';
            filter: none;
            background: #fffa;
            padding: 20px;
        }

        .shipil-btn-group {

            button {
                width: 200px;
                color: inherit;
                background: #fffa;
            }

            button:hover {

                background: #e772ff;
                color: white;
            }
        }
    }
}

@keyframes wiggle {
    0% {
        transform: skewX(2deg)
    }

    100% {
        transform: skewX(-2deg)
    }
}

@keyframes busy2 {
    0% {
        transform: translate(-10px, 0px);
    }

    100% {
        transform: translate(10px, 0px);
    }
}

@keyframes hover {

    0% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(10px);
    }

}