html {
    cursor: url("cursors/music-note-cursor.png"), auto;
 }

a {
	color: black;
}

a:hover {
    cursor: url("cursors/music-note-cursor.png"), auto;
    opacity: 0.5;
}

a:active {
    opacity: 0.3;
}

  body {
            background-image: url(images/css-pattern-by-magicpattern.png);
            background-size:     cover;
	font-family: 'MS PGothic', sans-serif;
        }

* {
	box-sizing: border-box;
}

.body-container {
	width: 800px;
	margin: auto;
}

.scroll-box {
	width: 50%;
	margin-left: 50%;
	border-style: dotted;
	border-width: 2px;
	background-color: white;
	margin-bottom: 10px;
	margin-top: 50px;
}

.header {
	background-color: white;
	height: 200px;
	border-style: dotted;
	border-width: 2px;
}

.title {
	font-size: 80px;
	margin-left: 55%;
	margin-top: -15px;
	color: rgba(61, 61, 61, 0.884);
}

.zero-jp {
	font-size: larger;
	color: rgba(59, 59, 59, 0.747);
	font-weight: 800;
	margin-left: 80%;
	margin-top: 50px;


	   animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}


.left-one {
	width: 20%;
	padding-left: 20px;
	padding-bottom: 20px;
	margin-top: 10px;
	border-style: dotted;
	border-width: 2px;
	background-color: white;
}

.middle-one {
	width: 55%;
	border-style: dotted;
	border-width: 2px;
	background-color: white;
		margin-top: -372px;
		margin-left: 168px;
		height: 372px;
			overflow-y: scroll;
	scrollbar-width: none;
}

.welcome, .intro {
	text-align: center;
}

.welcome {
	font-size: 26px;
}

.intro {
	padding-left: 15px;
	padding-right: 15px;
	font-size: 17px;
}

.eye {
	padding-left: 47%;
}

.right-one {
	width: 23%;
	border-style: dotted;
	border-width: 2px;
	background-color: white;
	margin-left: 615px;
	margin-top: -372px;
	height: 372px;
}

.left-two {
	background-color: white;
	border-style: dotted;
	border-width: 2px;
	margin-top: 10px;
	width: 290px;
}

.latest {
	padding-left: 73px;
	border-bottom-style: dotted;
	border-bottom-width: 2px;
	padding-bottom: 20px;
}

.video {
	width: 280px;
	height: 140px;
	margin-left: 5px;
	margin-top: -10px;
}

.update-box {
	background-color: white;
	border-style: dotted;
	border-width: 2px;
	margin-top: -220px;
	margin-left: 305px;
	width: 239px;
	height: 220px;
	overflow-y: scroll;
	scrollbar-width: none;
}

.update-log {
	margin-left: 62px;
}

.cover-box {
	background-color: white;
	border-style: dotted;
	border-width: 2px;
	margin-top: -220px;
	margin-left: 560px;
	width: 239px;
	height: 220px;
	overflow-y: scroll;
	scrollbar-width: none;
}

.cover-log {
	margin-left: 68px;
}

.update {
	border-top-style: dotted;
	border-top-width: 2px;
	padding-top: 15px;
	padding-left: 5px;
}

.blog-news {
	border-top-width: 2px;
	padding-left: 5px;
}

.poem-news {
	border-top-width: 2px;
	padding-left: 5px;
}

mark {
	background-color: rgba(91, 91, 91, 0.229);
}

.footer {
	background-color: white;
	border-style: dotted;
	border-width: 2px;
	width: 800px;
	margin-top: 10px;
}

.footer-text {
	text-align: center;
}

@media only screen and (max-width: 600px) {
	.body-container {
	width: 100%;
}

.header {
	height: 100px;
	
}

.title {
	font-size: 40px;
	margin-left: 45%;
	margin-top: -5px;
}

.zero-jp {
	font-size: small;
	margin-top: -30px;
	margin-left: 230px;
}
.left-one {
	width: 45%;
}

.middle-one {
	width: 50%;
	margin-left: 50%;
	height: 350px;
}

.welcome {
  font-size: 20px;
}

.intro {
	font-size: 11px;
}

.right-one {
 margin-left: 50%;
 margin-top: 20px;
 width: 50%;
 height: 320px;
}

.left-two {
  width: 45%;
  margin-top: -330px;
  height: 330px;
}

.latest {
  padding-left: 7px;
}

.video {
  width: 95%;
  
}

.update-box {
  margin-top: 10px;
  margin-left: 1px;
  width: 45%;
  
}

.update-log {
	margin-left: 20px;
}

.cover-box {
  margin-top: -220px;
  margin-left: 50%;
  width: 50%;
  
}

.cover-log {
	margin-left: 38px;
}

.footer {
  width: 100%;
}
}