body {
    /* background-color: rgb(78, 78, 78); */
    background-color: rgb(14, 14, 14);
    /* background-image: url("/images/Leviathan.jpg"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* margin:0;
	display:flex;
	height:100vh;
	align-items:center; */
}

.splash-page-container{
    width: 40rem;
    height: 40rem;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}

.header-container {
    /* width: 100vw; */
    margin: 0 auto;
    overflow: auto;
}

h1 {
    font-family: "mason-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    text-shadow: 0px 0px 21px rgba(0, 0, 0, 1.0), 0px 0px 21px rgba(0, 0, 0, 1.0), 0px 0px 21px rgba(0, 0, 0, 1.0);
}



h2 {
    text-align: center;
    /* color: rgb(205, 205, 205); */
    color: white;
    /* font-family: "kristal-opencaps", sans-serif;
font-weight: 400;
font-style: normal; */
    /* font-family: "priori-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase; */
    font-family: "modestolite", serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: 0px 0px 21px rgba(0, 0, 0, 1.0), 0px 0px 21px rgba(0, 0, 0, 1.0), 0px 0px 21px rgba(0, 0, 0, 1.0);
}

h3 {
    color: white;
    font-family: "modestolite", serif;
    font-weight: 400;
    font-style: normal;
}

p {
    color: white;
    font-family: "priori-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:x-large;
}

.paragraph-container-container{
      display: flex;
  justify-content: center;
  /* align-items: center; */
    /* background-color: red; */
}

.paragraph-container{
    align-self: center;
}

@media only screen and (max-width: 600px) {
        h2 {
        font-size: 24pt;
    }

    .grid-container {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 100vw;
        /*change height of grid item*/
        /* grid-gap: 0.5vw;  optional gutter , use "vw" instead of "px" to keep proportions responsive */

    }
    .paragraph-container{
    width: 95vw;
    /* background-color: blueviolet; */
    }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media only screen and (min-width: 601px) {
    .paragraph-container{
        width: 570px;
        /* background-color: red; */
    }
}

@media only screen and (min-width: 922px) {

    h1 {
        font-size: 40pt;
    }

    h2 {
        font-size: 20pt;
    }

    .grid-container {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 25vw;
        /*change height of grid item*/
        /* grid-gap: 0.5vw;  optional gutter , use "vw" instead of "px" to keep proportions responsive */

    }
    .paragraph-container{
        width: 700px;
        /* background-color: blue; */
    }
}



a {
    color: rgb(230, 230, 230);
    text-decoration-line: none;
}

a:hover {
    color: white;
}


/* the grid*/
.grid-container {
    width: 100vw;
    display: grid;
}


.griditem {
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    box-sizing: border-box;
}

.griditem:hover {
    cursor: pointer;
    filter: brightness(70%) grayscale(100%);
}

/* set background images*/
.image1 {
    background-position: left center;
    background-image: url("https://images.pexels.com/photos/707676/pexels-photo-707676.jpeg");
    /*grid-area: image1;*/
}

.image2 {
    background-image: url("https://images.pexels.com/photos/1105766/pexels-photo-1105766.jpeg");
    /*grid-area: image2;*/
}

.image3 {
    background-image: url("https://images.pexels.com/photos/6948647/pexels-photo-6948647.jpeg");
    /*grid-area: image3;*/
}

.image4 {
    background-position: top center;
    background-image: url("https://images.pexels.com/photos/6956605/pexels-photo-6956605.jpeg");
    /*grid-area: image4;*/
}

.image5 {
    background-image: url("https://images.pexels.com/photos/604694/pexels-photo-604694.jpeg");
}

.image6 {
    background-image: url("https://images.pexels.com/photos/3309268/pexels-photo-3309268.jpeg");
}

.image7 {
    background-image: url("https://images.pexels.com/photos/1906859/pexels-photo-1906859.jpeg");
}

.image8 {
    background-image: url("https://images.pexels.com/photos/3536487/pexels-photo-3536487.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
}

/*full image modal */
.modal {
    z-index: 3;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    /* below covers window area*/
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    /* set window background color */
}

.modal-content {
    display: block;
}

.modal-btn {
    color: red;
    padding: 4px 8px;
    position: absolute;
    right: 10vw;
    top: 1vh;
}

.modal-btn:hover {
    background-color: red;
    color: white;
    cursor: pointer;
}

.animate-zoom {
    animation: animatezoom 0.8s;
}

@keyframes animatezoom {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.topright {
    position: relative;
    right: 0;
    top: 0;
}

.mod-img {
    /* responsive display full image within in users view area */
    object-fit: scale-down;
    display: block;
    max-height: 99vh;
    max-width: 99vw;
    margin: 0.5vh auto;
}

.header{
    width: 90vw;
}

.header-top-center-header{
    box-sizing: border-box;
    display: grid;
    align-items: center;
    grid-template-areas: "left-icons heading icons";

    padding-left: 33px;
    padding-right: 33px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.header-menu-icon{
    width: 48.4px;
}

.logo-container{
    width: 191px;
}

.comic-page-container{
        max-width: 60%;
        max-height: 60%;
        position: relative;
        margin: auto;
        /* margin-top: 20vh;
        margin-bottom: 20vh; */
        justify-content: space-between;
        display: flex;
}

.comic-page {
    width:100%;
    /* max-width: 700px; */
    /* position: absolute; */
    /* top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; */
    /* display: inline;
  max-height: 1200px;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto; */
}

.comic-back-button, .comic-forward-button {
        cursor: pointer;
        flex: 1;
        user-select: none;
        /* background: red;
        opacity: 0.2; */
        z-index: 55555;
        width: 48%;
        height: 100%;
        display: block;
        position: absolute;
	/* background: url(images/clear-single-pixel.gif); */
}

.comic-back-button { left: 0;}
.comic-forward-button { right: 0;}

.comic-navigation-bar{
    text-align: center;
    margin: 0 auto;
    overflow: auto;
}

.archive-grid-container-parent{
      display: flex;
  justify-content: center;
  place-items: center;
      place-self: center;
    padding: 2%;
}

.archive-grid-container{
    width: 90%;
    display: grid;
  grid-template-columns: repeat(4, 1fr);
    place-items: center;
    place-self: center;
        column-gap: 2%;
}

.comic-archive-image{
    width: 100%;
    padding: 5%;
}
.comic-archive-image {
    -webkit-transition: all 0.50s;
    transition: all 0.50s;
    &:hover {
        filter: brightness(160%);
        -webkit-filter: brightness(160%);
        -moz-filter: brightness(160%);
        -o-filter: brightness(160%);
        -ms-filter: brightness(160%);
        -webkit-transition: all 0.50s;
        transition: all 0.50s;
    }
}

.website-logo-container{
      display: flex;
  justify-content: center;
  place-items: center;
      place-self: center;
}

.website-logo{
    place-self: center;
    width: 100%;
}


.website-logo-min{
    place-self: center;
    width: 15rem;
}

.labyrinthia-logo-container{
      display: flex;
  justify-content: center;
  place-items: center;
      place-self: center;
}

.labyrinthia-logo{
    place-self: center;
    width: 40%;
    padding-bottom: 2%;
}