* {
  box-sizing: border-box;
}

body{
font-family: 'Comic Neue', cursive;
background-color:#F9F6DA;
margin:0;
color:#080e3a;
line-height:1.2;
}

.wrapper{
max-width:600px;
margin:0px auto;
}

.padding{
  margin:30px auto;
  padding:10px;
  }

img {
  width:100%;
  display: block
}

.hover{
  transition: all 0.2s ease-in-out;
}

.hover:hover{
  -ms-transform: scale(1.025); /* IE 9 */
  -webkit-transform: scale(1.025); /* Safari 3-8 */
  transform: scale(1.025) rotate(2deg);
  filter: drop-shadow(2px 2px 0px black);
}

.panel{
width:100%;
border:2px solid black;
overflow:hidden;
}

.chara{
border:none;
width:200%;
}

.icons{
display:flex;
margin-bottom:10px;
}

.columnleft {
  float: left;
  width: 35%;
}
.columnright {
  float: left;
  width: 65%;
  padding:10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.flex-container {
  display: flex;
    position: relative;
  list-style: none;
  justify-content: space-between; 
}

.flex-item {
  margin: 10px 10px 10px 0px;
    position: relative;
    background-color:white;
      overflow:hidden;
}
.flex-item2 {
  position: relative;
  background-color:white;
    margin: 10px 0px 10px 0px;
      overflow:hidden;
}

.img-container {
  position: relative;
  overflow:hidden;
  border:2px solid black;
  border-top:none;
    border-bottom:none;
margin-top:0;
margin-left:10px;
height:100vh;
background-color:#080e3a;

}

.logo {
writing-mode: vertical-rl;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color:#f97e03;
  height:100%;
  overflow:hidden;
  padding-left:2px;
  mix-blend-mode:normal;
  font-size: 30px;
  color:black;
  line-height:0.6;
  letter-spacing:-0.2rem;
  vertical-align: bottom;
  font-family: 'Dela Gothic One', sans-serif;
  z-index:999 !important;
}

a{
  text-decoration:none;
  color:#f97e03;
}

a:hover{
  transition: all 0.2s ease-in-out;
  color:#7A70C7 ;
      text-decoration:underline;
    text-decoration-style: wavy;
}

.textbox{
  border:2px solid black;
  padding:5px;
  margin:5px;
  background-color:white;
  position: absolute;
}

.textbox2{
  position: absolute;
  z-index: 999 !important;
  font-family: Rowdies;
  font-size: min(5vw, 30px);
  color: #F9F6DA;
  line-height:0.75;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  letter-spacing: -0.1rem;
  left: -2px;
  top:-4px;
}

.topright {
  position: absolute;
  bottom: 0px;
  right: 0px;
  top: auto;
}

table{
  min-width:100%;
  white-space: nowrap;
  padding:10px 0 10px 0;
  border-top: 1px dashed Chocolate;
  border-bottom: 1px dashed Chocolate;
  }
  
  td{
  padding:0px;
}

p{
  margin-top:0;
  }

h1,h2,h4,h5{
  margin:0;
  font-family: 'Gluten', sans-serif;
  }
  
  h3{
    font-size:20px;
    font-family: 'Gluten', sans-serif;
    margin-bottom:0px;
    margin-top:2em;
    }
    

.icon{
  width:15px;
  vertical-align:top;
  display:inline;
}

.overlay-img {
  position: absolute;
  bottom: 0;
  right: 0;
  width:max(300px, 180%);
}

.comic img{
  margin: 20px 0 20px 0;
  border-radius:2px;
  }
  
   .code {
background-color:#080e3a;
color:#F9F6DA;
padding:5px;
font-size:12px;
border-radius:3px;
font-family:Courier New;
}