* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


body {
margin: 0 0;
background-color: black;
background-image: url('./pub-assets/ori3.jpg');
background-attachment: fixed;
color: black;
background-size: cover;
font-family: serif;
}


@font-face {
    font-family: 'Averia';
    src: url('./Averia/AveriaSerifLibre-Bold.ttf'),
    src: url('./Averia/AveriaSerifLibre-BoldItalic.ttf'),
    src: url('./Averia/AveriaSerifLibre-Italic.ttf'),
    src: url('./Averia/AveriaSerifLibre-Light.ttf'),
    src: url('./Averia/AveriaSerifLibre-LightItalic.ttf'),
    src: url('./Averia/AveriaSerifLibre-Regular.ttf'),
    font-weight: normal;
    font-style: normal;

}


nav {
position: sticky;
top: 4.8%;
left: 2%;
width: 95%;
}


nav a {
padding: 3px;
background-color: black;
color: white;
border: 1px solid white;
display: inline;
font-family: Averia;
color: white;
text-decoration: none;
}

nav a:hover {
box-shadow: 0px 0px 20px white;


}

footer {
padding: 1%;
width: 100%;
background-color: black;
color: white;
font-size: 33px;
position: fixed;
bottom: 0%;
font-family: Averia;
border-top: 1px dashed white;
}

#mag-area {
width: 90%;
overflow: scroll;
margin: 100px auto;


}

#issue-title {
text-align: right;
background-color: black;
color: white;
font-size: 44px;
display: block;
margin-top: 0px;
border: 1px solid white;
font-family: Averia;
}

#piece {
background-color: whitesmoke;
border: 1px solid white;
text-align: left;
max-height: 300px;
width: 300px;
overflow: hidden;
float: left;
margin: 10px;
border-bottom-color: black;
}

#piece-title {
background-color: black;
color: whitesmoke;
width: 100%;
height: 100px;
margin-top: 0px;
border-bottom: 1px solid black;
font-family: Averia;
font-size: 16px;
text-align: justify;
}


#piece-date {
width: 100%;
padding: 2px;
height: 20px;
color: red;
font-size: 12px;
font-family: Averia;
font-weight: bold;
background-color: chartreuse;
color: black;
}

#piece-text {
padding: 2%;
height: 100px;
border-bottom: 1px solid black;
background-color: black;
color: whitesmoke;
text-align: justify;
background-size: contain;
overflow: hidden;
font-family: Averia;
}

#piece-text img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
} 


/*
Submit Page, About Page, and 'Piece' Page Only
*/

#story-area {
width: 40%;
max-height: 600px;
margin: auto;
border: 1px solid white;
background-color: black;
color: white;
padding: 1%;
text-align: justify;
overflow: scroll;
}

#story-title {

font-family: Averia;

}