body {
    background-color: black;
    color: white;
    overflow: hidden;
    font-size: 17.5px;
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    color: black;
}

hr {
    margin: 70px;
}

h2 {
    margin: 0;
    font-weight: normal;
    margin-bottom: 2rem;
}

h4 {
    margin: 0;
    font-weight: normal;
}

h6 {
    margin: 1rem;
    font-weight: normal;
}

form {
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  background: black;
  /* border: 1px solid rgb(81, 81, 81); */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input, textarea {
  font-family: inherit;
  padding: 0.8rem 1rem;
  outline: 0.5px solid #fefefe;
  font-size: 1rem;
  border: none;
  transition: border-color 0.2s;
  background-color: black;
  color: white;
}

input:focus, textarea:focus {
  box-shadow: 0 0px 8px white;
    transition: 0.3s ease;
}

button {
  padding: 0.8rem 1rem;
  background: black;
  color: white;
  font-family: 'Times New Roman', Times, serif;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: background 0.2s ease;
}

button:hover {
    box-shadow: 0 0px 5px white;
    background-color: white;
    color: black;
    transition: 0.2s ease;
}

.windowContainer {
    width: 99vw;
    height: 98vh;
    font-family: 'Times New Roman', Times, serif;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.windowContainer > div {
    outline: 0.5px solid rgb(57, 57, 57);
}


.toc {
  grid-column: 1/2;
  grid-row: 1/2;
  overflow: hidden;
}

.toc img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.hexNav {
    overflow: scroll;
    grid-column: 1/2;
    grid-row: 2/3;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 5px;
}

.hexNav > a:hover{
    border: 1px solid white;
    box-shadow: 0 0px 5px 1px rgb(255, 255, 255, 100);
    transition: ease-in 0.08s;
}

.hexNav a {
    text-decoration: none;
    color: white;
    border: 1px #333 solid;
    text-align: center;
    align-content: center;
    font-size: clamp(0.1rem, 1.5vw, 0.7rem);
}

.contentScreen {
  grid-column: 2/4;
  grid-row: 1/3;
  overflow: scroll;
  padding: 2rem;

}

.contentScreen img {
    width: 100%;
    position: relative;
    z-index: -100;
}

.contentScreen:hover {
    box-shadow: inset 0 -10px 10px -7px rgb(255, 255, 255);
    transition: ease-in-out 0.2s;
}

.contentScreen p {
    margin: 0.3rem;
    text-indent: 1.5rem;
}

.comicContainer {
    cursor: ns-resize;
}

.comicContainer > img{
    width: 100%; 
    position: relative; 
    z-index: -20;
}

#aboutBody:hover {
    box-shadow: inset 0 -10px 10px -7px rgb(255, 255, 255);
    transition: ease-in-out 0.2s;
    cursor: ns-resize;
}

#contentTable {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 0.5fr repeat(3, 1fr);
    margin-top: 1rem;
    gap: 5px;
    cursor: ns-resize;
}

#contentTable > div {
    outline: 0.5px solid rgb(88, 88, 88);
    text-align: center;
    padding: .5rem;
    cursor: pointer;
}

.contentTypes{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 1rem;
    padding: 0;
    text-align: center;
}

#contentBlog {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

#blogContainer {
    cursor: ns-resize;
}

#blogContainer:hover {
    box-shadow: inset 0 -10px 10px -7px rgb(255, 255, 255);
    transition: ease-in-out 0.2s;
}

#blogContainer > p a {
    color: white;
    text-decoration: underline;
}

#blogContainer a:hover{
  text-shadow: 5px 0 10px rgb(255, 255, 255);
}

#contentBlog > div {
    outline: 0.5px solid rgb(76, 76, 76);
}

.blogThumbnail {
    grid-column: 1/2;
}

.blogText {
    grid-column: 2/4;
    padding: 20px;

}

.moreBlog {
    color: white;
    outline: 1px solid rgb(89, 89, 89);
    text-decoration: none;
    padding: 0px 5px;
}

.moreBlog:hover {
    background-color: white;
    color: black;
    border: none;
    transition: ease 0.3s;
    box-shadow: 0 0 5px white;
}

.contentThumbnail a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contentThumbnail:hover {
    outline: 1px solid rgb(255, 255, 255);
    transition: ease 0.3s;
    box-shadow: 0 0 5px white;
}

.contentThumbnail a {
    display: inline-block;
    width: 100%;
    height: 100%;
}


.blogThumbnail > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopContent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}


#shopContainer:hover {
    box-shadow: inset 0 -10px 10px -7px rgb(255, 255, 255);
    transition: ease-in-out 0.2s;
}

.shopItem {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    text-align: center;
}

.shopItem > div {
    outline: 0.5px solid rgb(94, 94, 94);
    align-content: center;    
}


.shopItem  a {
    color: white;
    text-decoration: none;
    width: 100%;
    height: 100%;
    outline: 0.5px solid white;
    padding-top: 5px;
}

.shopItem a:hover{
    background-color: white;
    color: black;
    box-shadow: 0 0 5px white;
    transition: 0.1s ease-in;
}

.charSprite {
    grid-column: 1/2;
    grid-row: 3/4;
    overflow: hidden;     
}

.charSprite img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diaBox {
    overflow: scroll;
    grid-column: 2/4;
    grid-row: 3/4;
    padding: 2rem;
    cursor: ns-resize;
    padding-top: 10px;
}

.diaBox:hover {
    box-shadow: inset 0 -10px 10px -7px rgb(255, 255, 255);
    transition: ease-in-out 0.2s;
}