/* (A) HIDE CHECKBOX & CONTENT, SHOW ON CHECKED */
.tab input, .tab .content { display: none; }
.tab input:checked ~ .content { display: block; }

/* (B) COSMETICS */
/* (B1) WARPPER */
.tab {
  max-width: 600px; /* optional */
  margin-bottom: 10px;
}
 
/* (B2) LABEL */
.tab label {
  display: block; padding: 10px;
  font-weight: 700;
  color: #fff; background: #2d5faf;
  cursor: pointer;
}
 
/* (B3) CONTENT */
.tab .content {
  padding: 10px;
  background: #ccdef9;
}
 
/* (B4) DIRECTION ARROW */
.tab label { position: relative; }
.tab label::after {
  display: block; content: "\25b6";
  position: absolute; right: 10px; top: 10px;
  transition: all 0.4s;
}
.tab input:checked ~ label::after { transform: rotate(90deg); }

/* (X) THE REST DOES NOT MATTER - COSMETICS */
/* PAGE & BODY */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
body {
	background-color: powderblue;
  display: flex;
  align-items: center; justify-content: center;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

/* WIDGET */
.widget-wrap {
  max-width: 500px;
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
}

/* SVG */
#talk {
  width: 100%; height:120px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-16 160H64v-84c0-6.6 5.4-12 12-12h360c6.6 0 12 5.4 12 12v84z" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

/* FOOTER */
#code-boxx {
  font-weight: 600;
  margin-top: 30px;
}
#code-boxx a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  background: #b90a0a;
  color: #fff;
}