/* Container classes */
body {
background-color: cornflowerblue;
}

.main-container {
margin:auto;
display: flex;
flex-direction: column;
align-items:stretch;
min-height: 100vh;
max-width: 670px;
}
/* header stuff */
header {
margin-bottom: 1%;
margin-top: 1%;
display: flex;
flex-direction: column;
}
header a {
letter-spacing: 3px;
}
.banner-logo {
text-decoration: none;
/* Font size scales to minimum and maximum
https://stackoverflow.com/questions/40528290/how-to-implement-max-font-size */
font-size: clamp(2em, 10vw, 4.1em);
letter-spacing: 30px;
margin-bottom: 2%;
border: 3px solid black;
background-color: white;
}
.main-nav {
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: large;
border: 3px solid black;
background-color: white;
}
.main-nav a {
padding: 2%
}
/*general*/
.translate-btn {
position: absolute;
top: 0;
right: 0;
padding-top: 3rem;
padding-right: 3vw;
}

.translate-btn a {
padding: 10px;
border: 3px solid black;
background-color: white;
}

.translate-btn a:hover {
background-color: #000000;
color: white;
cursor: pointer;
}
/* READ PAGE */
.comic-nav {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-evenly;
width: 60%;
min-width: 320px;
align-self: center;
padding: 10px 0px;
margin-top: 10px;
border: 3px solid black;
background-color: white;
}
.comic-nav p {
margin:0%;
color:#6b6b6b;
}
.comic-img {
width: 470px;
max-width: 98%;
min-width: 300px;
height: auto;
}
.info-text {
text-align: center;
}
.comic-container {
display: flex;
justify-content: center;
width:100vw;
position: relative;
left: calc(-50vw + 50%);
}
.comic-grid {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
justify-content: center;
width: auto;
max-width: fit-content;
margin: 10px;
padding: 10px;
border: 3px solid black;
background-color: white;
}
/* 2 columns for medium screens */
@media (min-width: 700px) {
.comic-grid {
grid-template-columns: 1fr 1fr;
justify-content: center;
}
.comic-grid > *:nth-child(2n+1) {
justify-self: end;
}
.comic-grid > *:nth-child(2n) {
justify-self: start;
}
}
/* 4 columns for large screens */
@media (min-width: 1350px) {
.comic-grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-content: center;
}
}
.panel-container {
display: flex;
justify-content: center;
}
/*FONTS*/
/* header font */
p, a, h1, h2, h3, h4, h5, td {
font-family: Arial, Helvetica, sans-serif;
}
.comic-title {
letter-spacing: 3px;
padding-left: 3%;
}
footer p {
text-align: center;
font-size: 12px;
}
/* ARCHIVE PAGE */
/* style table in which archive is displayed */
.archive-table {
width: 100%;
border-collapse:collapse;
background-color: white;
}
/* style archive table cells */
.archive-table td {
vertical-align: center;
}
table, tr, td {
border: 3px solid black;
}
.archive-cell {
text-align: center;
min-width: 30px;
}
/* style the thumbnails on the archive page */
.archive-thumb {
max-width: 50px;
}
.archive-thumb img{
max-width: 100%;
min-width: 30px;
height: auto;
}
/* highlight a table row and make pointer into hand when moused over */
.archive-row:hover {
background-color: #000000;
color: white;
cursor: pointer;
}
/* about page stuff */
.text-container {
flex-grow: 1;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.right-pic {
clear: left;
float:right;
margin-left:20px;
max-width: 30%;
height: auto;
padding: 10px;
border: 3px solid black;
background-color: white;
}
/* link colors */
a {
color: #000000;
}
a:hover {
color: #6b6b6b;
}