/*Variables*/
    :root{
        --bg: rgb(57, 57, 57);
        --dark-bg: rgba(40, 40, 40, 0.9);
        --text:rgb(241, 241, 241);
        --link:pink;
    }


/*Universal Styles*/
    */{
        box-sizing: border-box;
        scroll-behavior: smooth;
        margin:0;
        padding:0;
    }
    body{
        background-color:var(--bg);
        color:var(--text);
        font-family:"National Park", sans-serif;
    }
    main{
        width:80%;
        margin:0 auto;
    }
    img{
        border-radius: 5px;
        width:100%;
    }
    .caption{
        font-size:0.8em;
        font-style: italic;
        text-align: center;
        max-width: 600px;
        margin-left:auto;
        margin-right: auto;
    }
    .caption a{
        color:var(--link);
        transition: 0.4s all;
    }
    .caption a:hover{
        color:var(--text);
    }

/*Navigation*/
    nav{
            background-color: var(--dark-bg);
            position:fixed;
            top:0;
            left:0;
            width:100vw;
            height:2.5em;
        }
        nav a{
            color:var(--text);
            text-decoration:none;
            text-transform: uppercase;
            transition: all 0.4s;
            font-size:1.2em;
        }
        nav a:hover{
            color:var(--link);
        }
        nav a.home{
            position:fixed;
            top:0.2em;
            left:0.35em;
        }
        nav img{
            height:1.5em;
        }
    /*Hamburger Menu*/
        .burgermenu{
            display:none;
        }
        #hamburger{
            display:none;
        }
        label{
            position:fixed;
            top:-0.15em;
            right:10px;
            font-size:2em;
        }
        #hamburger:checked~.burgermenu{
            display:block;
            list-style-type: none;
            background-color: var(--dark-bg);
            position:fixed;
            top:1.5em;
            width:100vw;
            height:100vh;
            padding:0.5em 1em 0 1em;
        }
        .burgermenu ul{
            list-style-type: none;
        }
        .burgermenu li{
            text-align:center;
            padding:0.5em 0;
        }
        
    /*Media Queries*/
        @media(min-width:800px){
            nav{
                height:3em;
            }
            #hamburger:checked~.burgermenu{
                top:2em;
            }
            label{
                font-size:2.5em;
                right:0.5em;
            }
            nav img{
                height:2em;
            }
        }


/*Header*/
        header{
            text-transform:uppercase;
            margin:3em 10vw 0 10vw;
            text-align: center;
            font-size: 1.3em;
        }
        /*For Image Banners*/
        .desktop{
            display:none;
        }
        @media(min-width:800px){
            .desktop{
                display:block;
            }
            .mobile{
                display:none;
            }
        }

/*Footer*/
        footer ul{
            list-style: none;
            margin:3em auto 0 auto;
            display:flex;
            justify-content: space-around;
            max-width: 30em;
        }
        footer a{
            color:var(--text);
            transition:0.4s all;
            text-decoration: none;
        }
        footer a:hover{
            color:var(--link);
        }
        .copyright{
            display: flex;
            justify-content: space-between;
            font-size: 0.8em;
        }


/*Card Design*/
    .card-grid{
        display:grid;
        grid-template-columns: 1fr;
    }
    .card{
        border:3px solid var(--text);
        border-radius:5px;
        margin-top:1em;
        display:grid;
        grid-template-columns: 1fr 2fr;
        background-color: var(--dark-bg);
    }
    .l{
        margin: 1em 0 1em 1em;
    }
    .r{
        margin:auto 1em;
    }
    .card h1{
        text-transform: uppercase;
    }
    .card a{
        color:var(--text);
        text-decoration: none;
        transition: 0.4s all;
    }
    .card a:hover{
        color:var(--link);
    }
    @media(min-width:800px){
        .card-grid{
            grid-template-columns: 1fr 1fr;
            max-width:950px;
            margin:auto;
        }
        .card{
            grid-template-columns: 1fr;
            max-width:50vw;
            margin:1em;
        }
        .l{
            margin:1.5em 1.5em 0 1.5em;
        }
        .r{
            margin:auto 1.5em;
        }
    }
    @media(min-width:1200px){
        .card-grid{
            grid-template-columns: 1fr 1fr 1fr;
        }
        .card{
            max-width:33vw;
        }
    }

/*About Page*/
#about{
    max-width:900px;
}
#about img{
    max-width:600px;
}
.image{
    display:flex;
    justify-content: center;
}
#social-links a{
    color:var(--link);
    transition:0.4s all;
    font-size:1.3em;
}
#social-links a:hover{
    color:var(--text);
}
#social-links li{
    margin-bottom:0.2em;
    font-size:0.8em;
}

/*Comics Page*/
.comic{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.comic img{
    max-width: 600px;
    margin:0.25em 0;
}
/*Navigation Buttons Btwn Pages*/
.prev-next{
   display:flex;
   justify-content: space-between;
   max-width:600px;
   margin:2em auto 3em auto;
}
.prev-next button{
    border:3px solid var(--text);
    border-radius:5px;
    background-color: var(--dark-bg);
    max-width:10em;
    padding:0.5em;
}
.prev-next button a{
    color: var(--text);
    transition:0.4s all;
    text-decoration: none;
    font-family: 'National Park', sans-serif;
    font-size:1.4em;
}
.prev-next button a:hover{
    color:var(--link);
}
/*Navigation Buttons w/in slideshow*/
.comic ul{
    margin:1em auto;
    display: flex;
    justify-content: space-between;
    width:90%;
    max-width: 600px;
    padding:0;
}
.comic ul li{
    list-style-type: none;
    border: 3px solid var(--text);
    border-radius: 5px;
    background-color: var(--dark-bg);
    padding:0.5em;
    text-align: center;
}
.comic ul li a{
    color:var(--text);
    text-decoration: none;
    transition:0.4s all;
}
.comic ul li a:hover{
    color:var(--link);
}
@media(min-width:800px){
    .comic ul li{
        padding:0.5em 1em;
    }
}