@font-face {
  font-family: 'stickyhero';
  src: url('stickyhero.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tagger';
  src: url('tagger.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body{
    margin:0;
    font-family: 'tagger';
    background:#111;
    color:#81C995;
    font-size: 20px;
}

header{
    background:#191919;
    border-bottom:4px solid #00cc55;
    padding:18px;
    text-align:center;
}

h1{
    color:#3cff75;
    margin:0;
    font-family: 'stickyhero';
}

nav{
    margin-top:15px;
}

nav a{
    color:white;
    background:#008c3b;
    padding:10px 16px;
    text-decoration:none;
    margin:4px;
    display:inline-block;
    border-radius:10px;
    transition:.2s;
    font-weight:bold;
}

nav a:hover{
    background:#3cff75;
    color:black;
    transform:rotate(-2deg);
}

main{
    width:90%;
    max-width:1100px;
    margin:auto;
    margin-top:25px;
}

.box{
    background:#1c1c1c;
    border:3px solid #81C995;
    border-radius:14px;
    padding:20px;
    margin-bottom:20px;
}

footer{
    margin-top:50px;
    padding:20px;
    text-align:center;
    background:#191919;
    color:#888;
}

/* doodles */

.gallery{
    columns:3 250px;
    column-gap:18px;
}

.gallery img{
    width:100%;
    margin-bottom:18px;
    border-radius:12px;
    border:3px solid #00aa55;
    break-inside:avoid;
    transition:.2s;
}

.gallery img:hover{
    transform:scale(1.02) rotate(-1deg);
}

/* updates */

.post{
    margin-bottom:30px;
    background:#191919;
    padding:18px;
    border-left:8px solid #00cc55;
    border-radius:10px;
}

.postImage{
    columns:1 250px;
    column-gap:18px;
}

.postImage img{
    width:100%;
    margin-bottom:18px;
    border-radius:12px;
    border:3px solid #00aa55;
    break-inside:avoid;
    transition:.2s;
}

.postImage img:hover{
    transform:scale(1.02) rotate(-1deg);
}

.date{
    color:#888;
    font-size:14px;
}

.comicPage{

    max-width:1100px;
    margin:auto;
    text-align:center;

}

.comicBox{

    margin:30px auto;

    border:3px solid #00dd66;

    border-radius:15px;

    padding:20px;

    background:#1b1b1b;

}

#comicImage{

    width:100%;

    height:auto;

    display:block;

}

.comicNavigation{
    width:100%;
    max-width:900px;
    margin:30px auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.leftButtons,
.rightButtons{
    display:flex;
    gap:18px;
}

.comicNavigation button{

    background:#008c3b;

    color:white;

    border:none;

    border-radius:12px;

    padding:10px 16px;

    font-size:20px;      /* Adjust to your font */

    cursor:pointer;

    transition:.15s;

    font-family:inherit;
    
    font-weight:bold;
}

.comicNavigation button:hover{

    background:#00C84F;

    transform:translateY(-2px);

}

.comicNavigation button:active{

    transform:translateY(2px);

}

.comicNavigation button:disabled{

    background:#1b5b36;

    color:#94b79f;

    cursor:default;

    transform:none;

    opacity:.65;

}

/* Character Index */

.characterGrid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:28px;

}

.characterCard{

    background:#191919;

    border:3px solid #00dd66;

    border-radius:18px;

    padding:26px;

    text-align:center;

    transition:.18s;

}

.characterCard:hover{

    transform:translateY(-4px);

}

.characterImage{

    width:100%;
    height:260px;

    background:111;

    border:3px solid #00dd66;

    border-radius:16px;

    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:18px;

}

.characterImage img{

    width:100%;
    height:100%;

    object-fit:contain;

}

.characterCard h2{

    margin:0;

    color:#3cff75;

    font-family:'stickyhero';
    font-size:48px;

}

.characterCard p{

    margin:10px 0 24px;

    font-size:24px;

}

.viewButton{

    color:#3cff75;

    text-decoration:underline;

    font-size:30px;

    transition:.15s;

}

.viewButton:hover{

    color:white;

}

.characterPage{

    max-width:1200px;
    margin:30px auto;

}

.characterLayout{

    display:grid;
    grid-template-columns:420px 1fr;
    gap:28px;

}

.characterSidebar,
.characterHeader,
.characterBio{

    background:#1b1b1b;
    border:3px solid #00dd66;
    border-radius:18px;
    padding:24px;

}

.characterDescription{

    margin-top:0;
    margin-bottom:30px;

    line-height:1.5;

}

.galleryImage{

    background:#222;

    border:3px solid #00dd66;

    border-radius:14px;

    overflow:hidden;

}

.galleryImage img{

    width:100%;
    height:100%;
    object-fit:cover;

    display:block;

}

.galleryImage.wide{

    height:190px;
    margin-bottom:22px;

}

.galleryRow{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;

}

.galleryRow .galleryImage{

    height:180px;

}

.characterHeader{

    text-align:center;

}

.portrait{

    height:280px;

    border:3px solid #00dd66;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:20px;

}

.portrait img{

    width:100%;
    height:100%;

    object-fit:contain;

}

.characterHeader h1{

    margin:0;

    font-size:72px;

    font-family:'stickyhero';

}

.characterBio{

    margin-top:18px;

    min-height:420px;

}

.characterBio h2{

    margin-top:0;

}