html, body {
    margin:0;
    padding:0;
  }
  
  .comic {
    display:flex;
    flex-wrap:wrap;
    font-family:'Comic Sans', cursive;
    padding:1vmin;
  }
  .box{
    /* margin:25px; */
    width:100%;
    height:250px;
    background:#fff;
    border: solid black;
    border-color: black;
    float:left; 
  }
  
  .box1{
    margin-top: 10px;
    margin-bottom: 10px;
    width:100%;
    height: auto;
    border-width: 10px 40px 3px 15px;
    /* border-radius:95% 4% 92% 5%/4% 95% 6% 95%; */
    /* transform: rotate(2deg); */
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    border:solid 5px ;
  }
  .box2{
    width:auto;
    height: auto;
    border-width: 3px 3px 5px 5px;
    border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
    /* transform: rotate(-2deg); */
  }
  
  .box3{
    border-width: 5px 3px 3px 5px;
    border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
    transform: rotate(2deg);
  }
  
  .oddboxinner{
    margin:15px;
    transform: rotate(-2deg);
  }
  .evenboxinner{
    transform: rotate(2deg);
    margin:15px;
    padding:0 5px;
    float:right;
    background:#ddd;
    border:1px solid #222;
    box-shadow:3px 3px 0 #222;
  }
  .panel {
    background-color:#fff;
    /* border:solid 3px #000; */
    box-shadow:0 6px 6px -6px #000;
    display:inline-block;
    flex:1 1;
    height:auto;
    margin:1vmin;
    overflow:hidden;
    position:relative;
  }
  .panel_kecil{
    background-color:#fff;
    /* border:solid 3px #000; */
    /* box-shadow:0 6px 6px -6px #000; */
    display:inline-block;
    flex:1 1;
    height:150px;
    margin:1vmin;
    overflow:hidden;
    position:relative;
  }
  
  .text {
    background-color:#fff;
    border:solid 2px #000;
    margin:0;
    padding:3px 10px;
  }
  
  .top-left {
    left:-6px;
    position:absolute;
    top:-2px;
    transform:skew(-15deg);
  }
  
  .bottom-right {
    bottom:-2px;
    position:absolute;
    right:-6px;
    transform:skew(-15deg);
  }
  
  .speech {
    background-color:#fff;
    border:solid 2px #000;
    border-radius:12px;
    display:inline-block;
    margin:.5em;
    padding:.5em 1em;
    position:relative;
  }
  
  .speech:before {
    border:solid 12px transparent;
    border-left:solid 12px #000;
    border-top:solid 12px #000;
    bottom:-24px;
    content:"";
    height:0;
    left:24px;
    position:absolute;
    transform:skew(-15deg);
    width:0;
  }
  
  .speech:after {
    border:solid 10px transparent;
    border-left:solid 10px #fff;
    border-top:solid 10px #fff;
    bottom:-19px;
    content:"";
    height:0;
    left:27px;
    position:absolute;
    transform:skew(-15deg);
    width:0;
  }
  .panel_kecil:nth-child(1) {
    flex-basis: 150;
  }
  .panel_kecil:nth-child(4n+1) {
    background-image:radial-gradient(circle, yellow, orange);
  }
  .panel_head{
      flex-basis: auto;
  }
  .panel:nth-child(1) {
    flex-basis: 400px;
  }
  .panel:nth-child(2) {
    flex-basis: 400px;
  }
  .panel:nth-child(3) {
    flex-basis: 400px;
  }
  .panel:nth-child(4) {
    flex-basis: 400px;
  }
  .panel:nth-child(5) {
    flex-basis: 400px;
  }
  .panel:nth-child(6) {
    flex-basis: 400px;
  }
  .panel:nth-child(7) {
    flex-basis: 400px;
  }
  .panel:nth-child(8) {
    flex-basis: 400px;
  }
  .panel:nth-child(9) {
    flex-basis: 400px;
  }
  .panel:nth-child(10) {
    flex-basis: 400px;
  }
  .panel:nth-child(11) {
    flex-basis: 400px;
  }
  .flip{
    width:100%;
    height: 600px;
    padding:10px;
  }
  /* background colours */
  
  /* .panel:nth-child(4n+1) {
    background-image:radial-gradient(circle, yellow, orange);
  }
  
  .panel:nth-child(4n+2) {
    background-image:radial-gradient(circle, lightblue, deepskyblue);
  }
  
  .panel:nth-child(4n+3) {
    background-image:radial-gradient(circle, palegreen, yellowgreen);
  }
  
  .panel:nth-child(4n+4) {
    background-image:radial-gradient(circle, lightcoral, tomato);
  } */