/* Colors */
/*https://lospec.com/palette-list/cherrymelon*/
:root {
    --darkColor:#012824;
    --lightColor:#fcdeea;
    --accent1:#ff4d6d;
    --accent2:#265935;
}

/* Fonts */
@font-face {
  font-family: 'Zombie Bites';
  src: local('Zombiebites'), url('Fonts/Zombiebites.otf') format('opentype');

}

@font-face {
    font-family: 'Board Marker';
    src: local('BoardMarker'), url('Fonts/BoardMarker.ttf') format('truetype');
}

@font-face {
    font-family: 'Zen Kaku Gothic';
    src: local('ZenKakuGothicNew-Medium'), url('Fonts/ZenKakuGothicNew-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Zen Kaku Gothic';
    src: local('ZenKakuGothicNew-Black'), url('Fonts/ZenKakuGothicNew-Black.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Page structure */
body {
    background-color: var(--darkColor);
    background: 
        radial-gradient(circle, transparent 20%, var(--darkColor) 20%, var(--darkColor) 80%, transparent 80%, transparent), 
        radial-gradient(circle, transparent 20%, var(--darkColor) 20%, var(--darkColor) 80%, transparent 80%, transparent) 25px 25px, 
        linear-gradient(var(--accent2) 2px, transparent 2px) 0 -1px, 
        linear-gradient(90deg, var(--accent2) 2px, var(--darkColor) 2px) -1px 0;
    background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
    font-family: 'Zen Kaku Gothic';
}
header, footer, main {
    margin-left: 20em;
    width: 800px;
}
header, footer, article, nav  {
    background-color: var(--lightColor);
    padding-top: 0.05em;
    padding-bottom: 0.05em;
    padding-left: 1em;
    padding-right: 1em;
    border: 5px solid var(--accent2);
    border-radius: 1em;
}
footer {
    padding: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}
header, article, footer {
    margin-bottom: 1em;
}

/* Headers */
h1 {
    font-family: 'Zombie Bites';
    font-weight: normal;
}
h2, h3, h4 {
    font-family: 'Board Marker';
    font-weight: normal;
}
h1 {
    font-size: 5em;
    color: var(--darkColor);
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    border-bottom: 3px var(--darkColor) solid;
}
h2 {
    color: var(--accent1);
    margin-top: 0;
    margin-bottom: 0;
    text-align: right;
}
h3 {
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 2px var(--darkColor) solid;
}
h4 {
    font-size: 1em;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 0;
    border-bottom: 1px solid var(--darkColor);
}

/* Links */
a {
    color: var(--accent1);
}
a:hover {
    font-weight: bold;
    text-decoration-style:wavy;
}
.pageLink {
    display: block;
    margin-top: 0.5em;
    font-size: 1.25em;
    text-align: center;
    font-weight: bold;
}

/* Nav bar */
nav {
    float: left;
    width: 15em;
    padding-left: 0;
    text-align: left;
    margin-left: 1%;
    position: fixed;
}
nav ul {
    padding-left: 1em;
}
nav li {
    list-style-type:none;
    padding-left: 0;
    margin-left: 0;
}
nav li:before {
    content: '\1f480';
    margin-right: 0.5em;
}
nav #banners li:before {
    content: '';
    margin-right: 0;
}
nav #banners {
    margin-top: 0.5em;
}
.date {
    margin-left: 1.5em;
    margin-top: 0;
    font-size: 0.8em;
    font-weight: bold;
    color: var(--accent2);
}

/* Main content */
#latest img, #anime img, #characters img {
    margin: 0.8em;
    border: 4px solid var(--accent2);
}
#latest img:hover, #anime img:hover, #characters img:hover {
    border: 4px dashed var(--accent1);
}
#latest img:hover, #anime img:hover, #old img:hover {
    cursor: zoom-in;
}
#old img {
    width: 100px;
    margin: 0.5em;
    margin-top: 1em;
    border: 2px solid var(--accent2);
}
#old img:hover {
    border: 2px dotted var(--accent1);
}
.moreLink {
    display:block;
    margin-bottom: 1em;
    
    padding-top: 0.5em;
    text-align: center;
    border-top: 2px dashed var(--accent2);
}

/* Anime Art page */
.artThumbs img {
    margin: 0.8em;
    border: 2px solid var(--accent2);
}
.artThumbs img:hover {
    border: 2px dashed var(--accent1);
}
/* Anime Recs page */
.animeThumbs img {
    width: 100px;
    border: 2px solid var(--accent2);
    margin: 0.5em;
    margin-bottom: 0.2em;
}
.animeThumbs img:hover {
    border: 2px dashed var(--accent1);
}

.lightbox .animeRecContent img {
    max-height: 50vh;
    float: left;
}

.animeRecContent .recText h3 {
    color: var(--accent1);
    border-bottom-color: var(--accent1);
    margin-bottom: 0.2em;
}

.animeRecContent .recText {
    background-color: var(--lightColor);
    padding: 1em;
    border-radius: 1em;
    margin-left: 1em;
    width: 500px;
    float: right;
    
}

.animeRecContent .recText a {
    display: block;
    margin-top: 0.5em;
}

.animeRecContent .recText .date {
    display: block;
    margin-bottom: 0.2em;
    font-size: 1em;
    margin-left: 0;
    font-style: italic;
}

/* Characters page */
.character ul {
    padding-left: 1em;
}
.character li {
    list-style-type: none;
}

.character img {
    margin: 0.8em;
    border: 2px solid var(--darkColor);
}

.character img:hover {
    border: 2px dotted var(--accent1);
}

/* Lightbox */
.lightbox {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 1000;
}

.lightbox:target {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  top: 0;
}

.lightbox img {
  border-radius: 1em;
  display: block;
  margin: auto;
  max-height: 75vh;
  max-width: 90vh;
}

.lightbox .close {
    color: var(--lightColor);
    font-size: 4em;
    height: 1em;
    position: fixed;
    right: 0;
    top: 0;
    width: 1em;
    z-index: 1001;
    text-decoration: none;
}

.lightbox .imgTitle {
    font-size: 2em;
    text-align: center;
    color: var(--lightColor);
    display: block;
    font-family: 'Board Marker';
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}


/* Font overrides */
.zombie-bites {
    font-family: 'Zombie Bites';
    font-weight: normal;
}
.board-marker {
    font-family: 'Board Marker';
    font-weight: normal;
}