html, body {
  margin:0;
  padding:0;
}

.title {
	padding:1vmin;
	text-align: center;
	font-size: 2.5em;
}


/**
 * Layout
 */
.nav__list {
    margin: 0;
    padding: 0;
}
.nav__list a {
    padding: .75em 1.5em;
    transition: all .25s ease-in-out;
}
.nav__list__item {
    border-style: solid;
    border-width: 0 0 1px;
}
.nav__list__item,
.nav__list__item a {
    display: block;
}
/**
 * Desktop-view
 */
@media screen and (min-width: 1024px) {
    .nav__list > .nav__list__item {
        border-width: 0 1px 0 0;
    }
    .nav__list > .nav__list__item,
    .nav__list > .nav__list__item a {
        display: inline-block;
    }
}
/**
 * Presentation
 */
.nav {
    background-color: #f5f5f5;
}
.nav .nav__list__item {
    border-color: #CCC;
}
.nav a {
    color: #555;
	font-weight: bold;
    text-decoration: none;
}
.nav a:hover, .nav a:active, .nav a:focus {
    background-color: #e5e5e5;
}


.comic {
  display:flex;
  flex-wrap:wrap;
  font-family:'Comic Sans', cursive; /** C'est assez comique, non ? **/
  padding:1vmin;
}

.panel {
  background-color:#fff;
  border:solid 2px #000;
  box-shadow:0 6px 6px -6px #000;
  display:inline-block;
  flex:1 1;
  height:200px;
  margin:1vmin;
  overflow:hidden;
  position:relative;
}
.img-text {
    margin-left: 33%;
    margin-top: 75px;
}
.img-text-bold {
    margin-left: 33%;
    margin-top: 75px;
	font-weight: bold;
	font-size: 2em;
}
.img-speech{
    display: flex;
    justify-content: space-around;
    align-content: flex-end;
}

/* panel - text */

.text {
  background-color:#fff;
  border:solid 2px #000;
  margin:0;
  padding:3px 10px;
}

.text.top-left {
	left:-6px;
	position:absolute;
	top:-2px;
	transform:skew(-15deg);
}
.text.top-right {
	right:-6px;
	position:absolute;
	top:-2px;
	transform:skew(-15deg);
}
.text.bottom-left {
	bottom:-2px;
	position:absolute;
	left:-6px;
	transform:skew(-15deg);
}
.text.bottom-right {
	bottom:-2px;
	position:absolute;
	right:-6px;
	transform:skew(-15deg);
}

/* panel - speech */

.speech-left {
  background-color:#fff;
  border:solid 2px #000;
  border-radius:12px;
  display:inline-block;
  margin:.5em;
  padding:.5em 1em;
  position:relative;
}
.speech-left:before { /* black */
  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(50deg);
  width:0;
}
.speech-left:after { /* white */
  border:solid 10px transparent;
  border-left:solid 10px #fff;
  border-top:solid 10px #fff;
  bottom:-19px;
  content:"";
  height:0;
  left:24px;
  position:absolute;
  transform:skew(50deg);
  width:0;
}

.speech-right {
  background-color:#fff;
  border:solid 2px #000;
  border-radius:12px;
  display:inline-block;
  margin:.5em;
  padding:.5em 1em;
  position:relative;
  float: right;
}
.speech-right:before { /* black */
  border:solid 12px transparent;
  border-left:solid 12px #000;
  border-top:solid 12px #000;
  bottom:-24px;
  content:"";
  height:0;
  right:24px;
  position:absolute;
  transform:skew(-25deg);
  width:0;
}
.speech-right:after { /* white */
  border:solid 10px transparent;
  border-left:solid 10px #fff;
  border-top:solid 10px #fff;
  bottom:-19px;
  content:"";
  height:0;
  right:24px;
  position:absolute;
  transform:skew(-25deg);
  width:0;
}

/* panel - size */

.panel.size400 {
	flex-basis: 400px;
}
.panel.size300 {
	flex-basis: 300px;
}
.panel.size200 {
	flex-basis: 200px;
}
.panel.size100 {
	flex-basis: 100px;
}
.panel.size50 {
	flex-basis: 50px;
}
.panel.size25 {
	flex-basis: 25px;
}
.panel.size15 {
	flex-basis: 15px;
}

/* panel - background colours */

.panel.white { /* white */
	background-image:radial-gradient(circle, white, white);
}
.panel.silver { /* gray */
	background-image:radial-gradient(circle, white, silver);
}
.panel.orange { /* orange */
	background-image:radial-gradient(circle, yellow, orange);
}
.panel.deepskyblue { /* blue */
	background-image:radial-gradient(circle, lightblue, deepskyblue);
}
.panel.yellowgreen { /* yellow */
	background-image:radial-gradient(circle, palegreen, yellowgreen);
}
.panel.tomato { /* red */
	background-image:radial-gradient(circle, lightcoral, tomato);
}
.panel.black { /* black */
	background-image:radial-gradient(circle, gray, black);
}



.add-button {
  position: absolute;
  top: 1px;
  left: 1px;
  display: none;
}