* {box-sizing:border-box;}

body {
  margin: 0;
  padding: 0;
  height:100vh;
  background-image:url("https://xixxii.neocities.org/images/personal/kawasebg.jpg");
  background-size: cover;
  background-repeat:no-repeat;
  overflow:hidden;}


.box {margin:auto;
  margin-top:150px;
  margin-bottom:45px;
border-radius: 20px;
height:410px;
padding:50px;
width:550px;
background-color:rgba(163, 163, 163, 0.7);
border-style:double;
border-color:black;
border-width:3px;
position:relative;}

.boxcontents {height:310px;
  padding:10px;
width:440px;
overflow:auto;
margin:auto;
  font-family: "League Spartan", sans-serif;
  line-height:1;
  font-size:20px;
  text-align: justify;
  text-justify: inter-character;
scrollbar-width:thin;
scrollbar-color:black transparent;
z-index:2;
position;relative;}

.frame {position:absolute;
  top:-15px;
    left:-35px;
    pointer-events:none;
    z-index:1;
}

.nav {display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:row;
  margin:auto;
width:500px;
z-index:2;}

.nav img:hover {rotate:-20deg;}

e {
  position: absolute;
  top:0px;
  height: 80px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.5));
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  animation: raining 5s linear Infinite;
}
@-moz-keyframes raining {
  0% {
    transform: translateY(-160px);
  }
  100% {
    transform: translateY(calc(100vh + 160px));
  }
}
@-webkit-keyframes raining {
  0% {
    transform: translateY(-160px);
  }
  100% {
    transform: translateY(calc(100vh + 160px));
  }
}
@-o-keyframes raining {
  0% {
    transform: translateY(-160px);
  }
  100% {
    transform: translateY(calc(100vh + 160px));
  }
}
@keyframes raining {
  0% {
    transform: translateY(-160px);
  }
  100% {
    transform: translateY(calc(100vh + 160px));
  }
}

@media only screen and (max-width: 600px) {
  .box {width:100%;
  padding:20px;}
  .frame {display:none;
  }
  .boxcontents {width:100%;
  height:100%;
  top:0;
  left:0;
  }
  .nav {width:100%;}
}