html {
  background-image: url("../gif/kabe-gos-g04.gif");
  background-repeat: repeat;
  animation:
        sky_drift 87s linear infinite;
}

body {
  width:min(420px,90vw);
  color: white;
  margin: auto;
  margin-top: 2em;
  text-align: center;
  filter:
        contrast(1.05)
        saturate(1.15);


}

.title{
  font-family: "UnifrakturCook", cursive;
}

img {
  width: 100%;
}


#reference {
  color: #9E3146;
  font-family: "Times New Roman";
}

#text {
  font-family: "Times New Roman";

}

@keyframes sky_drift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -800px -250px;
    }
}

.frame{
    
    border-collapse:collapse;
    margin:auto;
    filter: drop-shadow(0 0 20px rgba(0,0,0,.85))
            drop-shadow(0 0 20px rgba(0,0,0,.65));

}

.frame{
    position:relative;
    z-index:1;
}

.frame::before{
    content:"";
    position:absolute;
    inset:-40px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.1) 50%,
            rgba(0,0,0,.1) 100%,
            transparent 20%
        );

    z-index:-1;
    pointer-events:none;
}

.frame-top{
    height:66px;
    background:url("../img/frame-hanecross-top.gif") no-repeat center;
    background-size:420px 66px;
}

.frame-bottom{
    height:60px;
    background:url(../img/frame-hanecross-botom.gif) center bottom no-repeat;
}

.frame-left{
    width:52px;
    background:url(../img/frame-hanecross-left.gif) repeat-y center;
}

.frame-right{
    width:52px;
    background:url(../img/frame-hanecross-right.gif) repeat-y center;
}

.frame-content{
    padding:25px 35px;
    background:#000;
}

html::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.25);
    pointer-events:none;
}