html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}


	body {
		line-height: 1;
		-webkit-text-size-adjust: none;
  font-family: "M PLUS 1p", sans-serif;
  background-color: #000;
  background-image: url( "../monthly-disc-review/mao.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto 510px;
  background-attachment: scroll;
  margin:0;
overflow-x: hidden;
border:4px solid #888;
    box-sizing: border-box;
	}
    
    body::before{
    content:'';
  position: fixed; bottom:0;
    box-sizing: border-box;
  width:100%;height:100vh;
    background-image: url("../monthly-disc-review/lines.png");
  background-repeat: no-repeat;
  background-position:right bottom;
  background-size: auto 85%;
  background-attachment: fixed;
  z-index: -1;
    }
    
    header{
position:relative;
max-width: 100%;
margin-left: auto;
margin-right: auto;
    height: 500px;
    color:#eacaca;
}
h1{
font-size:10vw;
font-weight:100;
text-wrap: nowrap;
letter-spacing: 0;
text-align: center;
margin-top:-0.5vw;
}
header .text{
text-align: right;
padding-right:3vw;padding-top:2vw;
font-weight: 400;
text-shadow: 1px 1px 2px black;
}
header .link{
position: absolute;
bottom:100px;right:10vw;
text-align: right;
font-weight: 300;
}
a {text-decoration: none;
color: #888}
header .logo{
position: absolute;
width:150px;
left:50%;
margin-left: -75px;
bottom:1em;
opacity: 0.5;
}

main {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    padding:10px;
display: flex; gap:10px;
background: #;
flex-wrap: wrap;
box-sizing: border-box;
	}
   
   
section{
  transition-duration: .2s;
position: relative;
max-width:225px;
background-color:rgba(255, 255, 255, 0.9);
border-bottom: 1px solid #ddd;
box-sizing: border-box;
align-self: stretch;

display: flex;
 justify-content: space-between;
  flex-direction: column;
}
.disc{
width:225px;height:225px;
  background-repeat: no-repeat;
  background-position:center;
  background-size: cover;
}

section  a{
color: #666;
display: block;
text-decoration: none;
height: 100%;
   }
   section:hover{
     transform: scale(1.01);
background-color:rgba(255, 255, 255, 1);
   }
   .vol{
   font-weight:300;
   border-left:15px solid #ccc;
   }
   .vol span{font-weight:400;}
   h2{
   font-size: 1.1em;
   margin:1em 0.3em 1.5em;
font-weight:700;
   }
   
   time{
position: absolute;bottom:0;right:0;
   font-weight:100;
   padding:.2em;
   }
  
  
 hr{
   height: 0;
   width:70%;
  margin: 4em auto 10em;
  border: 0;
   padding: 20px 0;
  text-align: center;
  overflow: visible;
   border-top: 3px double #666;
 }   
 hr::after {
  font-family: FontAwesome;
  content: "\f2d1";
  display: inline-block;
  position: relative;
  top: -40px;
  padding: 0 3px;
  color: #666;
  font-size: 25px;
}
    
    @media screen and (max-width: 1280px) {
body{
  background-size:auto 360px;
  background-attachment: scroll;
}    
header{height:350px;}    
    }    
    @media screen and (max-width: 949px) {
header{

}
main{justify-content: center;}

}