@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --accent-color: #d9aa35;
    --display-font:grandstander;
    --body-font:Arial, Helvetica, sans-serif;
    --comic-width: 900px;
}

body{
    padding:0;margin:0;
    font-family:var(--body-font);
}

h1,h2,h3,h4,h5,h6{
    margin:0;
    font-family:var(--display-font);
}

ol,ul{margin-top:0;}
a{text-decoration:none;color:inherit;}
p{margin-top:0;}

p > a { text-decoration:underline; }

#mainHeader {
    box-sizing: border-box;
    text-align: center;
    margin: auto;
    padding: 1rem;
    width: 100%;
    background-color: black;
    color: white;
}

#mainNav {
    box-sizing: border-box;
    border: 2px solid black;
    background-color: white;
    margin: auto;
    width: 100%;
    padding: 1rem;
    text-align: center;

    a:hover { color: var(--accent-color); }
    
    a:nth-of-type(n+2)::before { 
        content: ' | ';
        display: inline-block;
        margin: 0 1rem;
        color: black;
    }
}

main {
    position: relative;
    --transparent: color-mix(in srgb, var(--accent-color), #0000);
    background-color: color-mix(in srgb, var(--accent-color), #FFFFFF);
    background-image: repeating-linear-gradient(45deg, var(--transparent), var(--transparent) 20px, transparent 20px, transparent 40px), repeating-linear-gradient(-45deg, var(--transparent), var(--transparent) 20px, transparent 20px, transparent 40px);
}

#comicHeader {
    padding: 1rem 0;
    text-align: center;
}

@media only screen and (min-width: 600px) {
    #comicHeader { font-size: 1.5rem; }
}

.comic-nav > *{
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 1rem 0;
    img {
        max-width: 100px;
        width: 100%;
    }
}

#comicView {
    box-sizing: border-box;
    border: 2px solid black;
    background-color: white;
    margin: auto;
    max-width: var(--comic-width);
    width: 95%;

    img {
        display: block; 
        width: 100%;
    }
}

#comicInfo {
    box-sizing: border-box;
    background-color: white;
    border: 2px solid black;
    width: 100%;
    margin: auto;
    padding: 1rem;
}

#mainFooter {
    box-sizing: border-box;
    text-align: center;
    margin: auto;
    padding: 1rem;
    background-color: black;
    color: white;
}

.comic-list-item {
    display: flex;
    padding: 1rem;
    position: relative;

    &:hover {
        background-color: color-mix(in srgb, var(--accent-color), #FFFFFF);
    }

    > * > span {
        position: relative;
        display: block;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    > * > span > span {
        font-family: var(--display-font);
        font-weight: bolder;
    }

    img[src="#"] {
        display: none;
    }

    img {
        max-width: 3rem;
        aspect-ratio: 1/1;
        margin-right: 1rem;
        object-fit: cover;
    }
}

.comic-list-title {
    flex: 1;
    margin-right: 10px;
}

.comic-list-index {
    position: relative;
    min-width: 30px;
}