
@font-face{
    font-family: rubic;
    src: url(fonts/RubikMonoOne-Regular.ttf);
}

@font-face{
    font-family: kaimono;
    src: url(fonts/LXGWWenKaiMonoTC-Light.ttf);
}

body{
    height: 150vh;
    width: 150vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: -25vh;
    left: -25vw;
}

.ground{
    background: url(image/background.png) repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 25vh;
    height: 150vh;
    width: 150vw;
    animation: rotate 30s linear infinite;
     overflow: hidden;
}

@keyframes rotate{
    0%{
        transform: skewX(0deg);
    }

    25%{
        transform: skewX(-10deg);
    }

    50%{
        transform: skewX(0deg);
    }

    75%{
        transform: skewX(10deg);
    }

    100%{
        transform: skewX(0deg);
    }

}

.message{
    border: saddlebrown 5px dotted;
    border-radius: 2em;
    background: lightgreen;
    width: 60vw;
    min-width: 300px;
    animation: norotate 30s infinite;
}

@keyframes norotate{
    0%{
        transform: skewX(0deg);
    }

    25%{
        transform: skewX(10deg);
    }

    50%{
        transform: skewX(0deg);
    }

    75%{
        transform: skewX(-10deg);
    }

    100%{
        transform: skewX(0deg);
    }

}

h1{
    text-align: center;
    font-family: rubic;
    color: brown;
    margin: 2em;
}

p{
font-family: kaimono;
color: darkslategray;
margin: 2em;
font-size: 2em;
}