Gutenberg Extra CSS for MD

custom-editor.css

/* @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'); */
h3.numbered {
    counter-reset: h4;
    counter-increment: h3;
}
h2.numbered {
    counter-reset: h3;
    counter-increment: h2;
}
h3.numbered::before {
    content: counter(h3);
}
h2.numbered::before {
    content: counter(h2);
}
.numbered::before {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    line-height: 2;
    color: #111;
    background-color: #ffd700;
	border:2px solid #111;
    border-radius: 50px;
	margin-right:15px;
	margin-left:-10px;
}

/* AND My CODE */
.has-drop-cap:not(:focus):first-letter {
    font-weight: 600;
    background: #ffd700!important;
    padding: 20px;
    border-radius: 3%;
    color: #333!important;
    margin: 10px 20px 0 -30px;
    font-size:3em
}
blockquote:before, .quote-box:before{
	display:none;
}
blockquote, .quote-box{
	font-style:normal;
	font-weight:600;
	color:#333;
	border:0;
	font-size:23px;
	
}
.wp-block-group.has-background {
    padding:1em;
	border-radius:0.2em;
}
table td, table {
    border:0.5px solid #333!important;
}
.wp-block-table{
    margin-bottom:30px;
}
.list-cross li:before, .list-cancel li:before{
	content:'\e810';
	font-family: md-icon;
	color: #c0392b;
    position: absolute;
    left: -32px;
    top: 0;
}
.list-check, .list-cross, .list-cancel{
	list-style-type:none;
}
.pull-right{
	margin-right:-56px
}
.pull-left{
	margin-left:-56px
}
.wp-block-image figcaption:before{
	content: '\f256';
font-family: md-icon; margin-right:10px;
}
.quote-box cite, blockquote cite {
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
	color:#666;
}
.quote-box cite:before, blockquote cite:before{content: '\e819'; font-family: md-icon; margin-right:10px}
.wp-block-image figcaption{
	font-style:normal;
	color:#555;
}
/*Gutenberg*/
.note, .callout-home{
  background:#ffd700;
  color:#000;
  border:1px solid #AB3428;
}
.notice{
  border:3px dashed #AB3428;
}
.alert{
  background:#2E2E3A;
  color:#fff;
}
/*Content Formatting*/

.card {
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 2px;
	max-width:100%!important
}
.card:hover {
    box-shadow:3px 6px 10px #eee;
}
.card .wp-block-image {
    margin-left: -1em;
    margin-right: -1em;
    width: auto;
	max-width:100%!important
}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #cbcbcb; font-size:90%}
table figcaption{color:#000;padding:1em 0;text-align:center}
table td,table th{border-left:1px solid #cbcbcb;border-width:0 0 0 1px;margin:0;overflow:visible;padding:.5em 1em} table thead{background-color:#138833;color:#fff;vertical-align:middle} table tr:nth-child(2n-1) td{background-color:#f9f9f9} table td{border-bottom:1px solid #cbcbcb} table tbody>tr:last-child>td{border-bottom-width:0}

.has-buttons table a{
  padding:3px 5px;
  min-height:42px;
  font-weight:600;
  border-radius:4px;
  border:0;
  background:#57ad68;
  color:#fff;
  display:block;
  text-align:center;
}
.has-buttons table a:nth-child(2n){
  background:#fff;
  color:#138833;
  border:1px solid;
  margin-top:5px;
}
.has-ratings table tr strong:after{
  content:'\e81b';
  font-family:md-icon;
  color:#fff;
  margin-left:5px;
  font-size:100%;
    background:orange;
  padding:5px;
}
.gradient{
  background: #fce672; /* Old browsers */
background: -moz-linear-gradient(45deg, #fce672 0%, #f8a52b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #fce672 0%,#f8a52b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #fce672 0%,#f8a52b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce672', endColorstr='#f8a52b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.shop-button a:before{
    content: '\e825';
  margin-right:10px;
  font-family: md-icon;
}
.has-title-buttons td a:after{
  content:'Shop now →';
  display:inline-block;
  float:right;
  padding:10px 15px;
  margin:10px 0;
  text-align:center;
  color:#111;
  background:#ffdd00;
  border:1px solid #999;
  border-radius:5px
}
.blocks-shortcode__textarea, .wp-block textarea{
	font-family:monospace;
	font-size:14px
}
.editor-post-title__block .editor-post-title__input{
	font-size:38px
}

/* Fixes for some incomtability issues of MD with Gutenberg*/

.wp-block-button__link {
	color: #fff;
	background-color: #421983; /* Your button color */
	border: none;
	border-radius: 0;
	box-shadow: none;
}