@font-face {
    font-family: 'p5hatty';
    src: url(P5HATTY-1.TTF)
}

@font-face {
    font-family: 'NewComicTitle';
    src: url(NEWCOMICTITLE.TTF)
}

@font-face {
    font-family: 'Gen1';
    src: url(POKEMON_GENERATION.TTF)
}

@font-face {
    font-family: 'EarwigFactory';
    src: url(EARWIG\ FACTORY\ RG.OTF)
}

head {
    margin: 0;
    padding: 0;
}

body::-webkit-scrollbar{
    display: none;
}

a:link{
    text-decoration: none;
    color: inherit;
}

a:visited{
    text-decoration: none;
    color: inherit;
}

a:hover{
    text-decoration: none;
    
    color: inherit;
}

a:active{
    text-decoration: none;
    color: gainsboro;
}

body {
    /*flexbox stuff*/
    display: flex;
    flex-direction: column;
    /*styling*/
    color: white;
    background-color: #031606;
    /*text*/
    font-size: 2.1vmax;
    font-family: "Comic Sans MS";
    /*dimensions*/
    width: 100%;
    height: 100%;
    /*spacing*/
    margin: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 10vw;
}

#navBarContainer {
    position: sticky;
    top: 0;
    /*flexbox stuff*/
    display: flex;
    flex-direction: row;
    /*styling*/
    background-color: #22B14C;
    /*dimensions*/
    width: 87%;
    height: 10vmin;
    /*spacing*/
    padding: 0 8% 2vmin 5%;
    float: left;
    justify-content: center;

}

#navListContainer {
    /*grid*/
    display: grid;
    grid-template-columns:  auto auto auto auto auto;
    grid-gap: 3%;
    /*text*/
    text-align: center;
    font-size: 2.17vmax;
    /*dimensions*/
    width: 100%;
    height: 100%;
    /*spacing*/
    margin: 0;
    padding: 0;
}

.bar{
    /*flexbox stuff*/
    display: flex;
    /*stylng*/
    text-decoration: underline;
    /*dimensions*/
    width: 100%;
    height: 100%;
    /*spacing*/
    float: left;
    margin-left: 20%;
    align-items: center;
    justify-content: center;
}

.logo {
    /*spacing*/
    margin-left: 0;
    height: 12vmin;
}

.logo>img{
height: 100%;
}
.container{
    /*grid stuff*/
    display: flex;
    /*styling*/
    background-color: black;
    border: 1vmax solid yellow;
    border-radius: 5vmin;
    /*dimensions*/
    width: 90vw;
    /*spacing*/
    margin-top: 7vw;
    padding: 3vw 2vmax;
    align-self: center;
}

.blogpostContainer{
    /*styling*/
    background-color: black;
    justify-content: space-evenly;
    justify-self: center;
}

.blogImage {
    height: 20vw;
    border-radius: 3vmin;
}

.blogpostContent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.articleP{
    width: 70%;
    text-indent: 7%;
    text-align: center;
    border: 1vmin solid yellow;
    border-radius: 5vmin;
    padding: 1vw;

}

.comicsContainer{
    /*grid stuff*/
    grid-template-columns: auto auto auto;
    grid-gap: 2vmin;
    /*styling*/
    /*spacing*/
    justify-content: space-evenly;
    justify-self: center;
}

.comicBox {
    /*styling*/
    background-color: #22B14C;
    border-radius: 5vmin;
    /*dimensions*/
    width: 22vw;
    height: 22vw;
    /*spacing*/
    align-content: center;
    text-align: center;
}

.devBox {
    position: relative;
    float: left;
    /*spacing*/
    top: -1.5vw;
    left: 65vw;
    z-index: -1;
    /*dimensions*/
    width: max-content;
}

.blobImage{
    position: absolute;
    width: 8vw;
    height: 8vw;
    left: 15vw;
    top: -1.9vw;
    rotate: 162deg;
}

.devText {
    /*styling*/
    position: absolute;
    font-family: p5hatty;
    text-align: center;    
    /*dimensions*/
    width: 15vw;
    /*spacing*/
}

.navButton {
    /*dimensions*/
    margin: 2vmin 5vmax;
    width: 13vmax;
    height: 4vmax;
    font: inherit;
    outline: inherit;
    border: none;
    background: none;
    color: white;
    border-radius: 3vmin;
}

.comicsPageContainer{
    gap: 2.7vw;
}

.coverImage{
    /*dimensions*/
    /*spacing*/
    width: 25%;
    height: 100%;
    align-self: center;
}

.comicDescription{
    width: 75%;
    height: auto;
}

.descriptionBox{
    display: flex;
    flex-direction: column;
    height: 70%;
    margin: 0 3vw;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.descriptionBox>h3{
    text-decoration: underline;
}

.infoBox{
    margin-top: 1vw;
    width: 100%;
    height: 30%;
}
.dateBox{
    display: flex;
    float: left;
    width: 50%;
    height: 40%;
    justify-content: left;
    align-items: center;
}
.chapterBox {
    display: flex;
    float: left;
    width: 50%;
    height: 40%;
    justify-content: right;
    align-items: center;
}
.linkBox{
    display: flex;
    justify-self: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60%;
    font-size: 2.7vmax;
}

.bigImage{
    display: flex;
    width: auto;
    height: 40vw;
    justify-self: center;
    align-self: center;
}
/*
navbar: #22B14C
body: #031606
*/