@font-face {
    font-family: 'crimefighter';
    src:url("fonts/CRIMFBRG.TTF");
}
@font-face {
    font-family: 'title';
    src:url("fonts/Captureit.ttf");
}

.barcode {
position:absolute;
height:15%;
aspect-ratio: 1 / 1;
width:initial;
border: solid 1px;
bottom:2%;
left:2%;
}

.cover {
  aspect-ratio: 540 / 675;
  box-sizing:border-box;
  max-width:1080px;
  max-height:1350px;
  display:flex;
  overflow:hidden;
  border:solid 5px #000;
  position:relative;
}

.banner {
position:absolute;
  background-color:rgba(44, 123, 184, 0.5);
  padding:3px 1%;
  margin:0px;
  font-family:title;
color: rgb(210,183,31);
  -webkit-text-stroke: 1px rgb(170,140,1);
}

.datebox {
bottom:2%;
right:2%;
font-size:30px;
}

.bannertop {
top:18%;
left:-2px;
right:-2px;
}

.banner h1 {
font-size:80px;
}
.banner h2 {
font-size:47px;
}

.comic {
  box-sizing:border-box;
  max-width:730px;
  aspect-ratio: 730 / 913;
  max-height:913px;
  min-height:0px;
  display:flex;
  flex-wrap:wrap;
  padding:1%;
  font-family:crimefighter;
  font-size:16px;
  border:solid 5px #000;
}

.layout4 > div {
width:46%;
height:48%;
}

.layout2 > div {
width:46%;
height:98%;
}

.layout2 > div.fullwidth {
width:100%;
height:46%;
}

.layout4 > div.fullwidth {
width:100%;
height:46%;
}

.layoutstrips > div {
width:100%;
height:22.5%;
}

.layoutswim > div {
width:100%;
}

.layoutswim > div.swimimage {
height:36%;
}

.layoutswim > div.messagepanel {
height:20%;
}

.layoutswimside > div {
height:46%;
}

.layoutswimside > div.halves {
width:46%;
}

.layoutswimside > div.fullwidth {
width:100%;
height:46%;
}

.fullwidth {
width:100%;
}

.halves {
width:46%;
}

.caption {
  background-color:#F00;
  background-image:linear-gradient(to right,yellow, orange);
  border:solid 2px #000;
  padding:0.3% 1%;
  margin: 0px;
  position:absolute;
  top:0;
  z-index:2;
  left:-2px;
  right:-2px;
}

img {
width:100%;
height:100%;
display:block;
object-fit: cover;
}

.comic > div {
  border:solid 4px #000;
  overflow:hidden;
  margin:1%;
  position:relative;
  box-sizing:border-box;
}

.textpanel {
  border:solid 4px #000;
  margin:1%;
  padding:3% 4%;
  box-sizing:border-box;
  background:#fff;
}

.messagepanel {
  border:none;
  margin:1%;
  padding:4%;
  box-sizing:border-box;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:10%;
}

.messagebubble {
  max-width:85%;
  padding:4% 6%;
  box-sizing:border-box;
  background:#eee;
  border:3px solid #000;
  border-radius:24px;
  text-align:center;
  line-height:1.15;
}

.messagebubble.reply {
  background:#d8f5d0;
  align-self:flex-end;
}

.speechpanel {
  position:relative;
}

.speechbubble {
  position:absolute;
  top:8%;
  right:6%;
  max-width:52%;
  padding:4% 5%;
  box-sizing:border-box;
  background:#fff;
  border:3px solid #000;
  border-radius:999px;
  font-family:crimefighter;
  line-height:1.15;
  z-index:2;
}

.speechbubble:after {
  content:"";
  position:absolute;
  bottom:-18px;
  left:20%;
  width:0;
  height:0;
  border-left:14px solid transparent;
  border-right:8px solid transparent;
  border-top:22px solid #000;
}

.speechbubble:before {
  content:"";
  position:absolute;
  bottom:-13px;
  left:21%;
  width:0;
  height:0;
  border-left:12px solid transparent;
  border-right:6px solid transparent;
  border-top:18px solid #fff;
  z-index:1;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}