:root {
	--color-accent: #808080;
	--color-accent-secondary: #000;
	--color-heading: #181818;
	--color-1: #3a3a3a;
	--color-2: #ffffff;
	--container-width: 1170px;
	--border-color: rgba(0,0,0,0.3);
}
html[data-theme='dark'] {
	--color-accent: #808080;
	--color-accent-secondary: #ffffff;
	--color-heading: #ffffff;
	--color-1: #ffffff;
	--color-2: #000;
}
:root {
	--color-link: var(--color-accent-secondary);
	--color-link-hover: var(--color-accent);
	--color-link-visited: var(--color-1);

	--color-bg-1: var(--color-2);
	--color-bg-2: var(--color-accent-secondary);
	--color-bg-3: var(--color-accent);

	--color-btn: var(--color-2);
	--color-btn-hover: var(--color-accent);
	--color-btn-bg: var(--color-accent);
	--color-btn-bg-hover: var(--color-bg-1);
	--border: 1px solid var(--border-color);
}

/* Basic Block Editor CSS */
.editor-styles-wrapper {
    background-color: var(--color-2);
    color: var(--color-1);
    font-size: 1rem;
    font-family: -apple-system, blinkmacsystemfont, "segoe ui", roboto, "oxygen-sans", ubuntu, cantarell, "helvetica neue", helvetica, arial, sans-serif;
    line-height: 1.8;
    word-wrap: break-word;
}

.editor-styles-wrapper > * {
    font-family: -apple-system, blinkmacsystemfont, "segoe ui", roboto, "oxygen-sans", ubuntu, cantarell, "helvetica neue", helvetica, arial, sans-serif;
    color: var(--color-1);
}

.editor-styles-wrapper .wp-block[data-align="wide"] {
    max-width: 1200px;
}

.editor-styles-wrapper .wp-block.editor-post-title__block .editor-post-title__input {
    margin: 0 0 0.5em;
    font-size: 2.25rem;
    word-wrap: break-word;
    line-height: 1.8;
    color: var(--color-heading);
    font-weight: normal;
}

.wp-block {
    max-width: 1160px;
}

/*=============================================
=            Heading Typography            =
=============================================*/
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
    color: var(--color-heading);
    line-height: 1.3;
    font-weight: 500;
    margin: 0 0 20px;
}

.editor-styles-wrapper h1 {
    font-size: 2.5rem;
}

.editor-styles-wrapper h2 {
    font-size: 2.25rem;
}

.editor-styles-wrapper h3 {
    font-size: 1.75rem;
}

.editor-styles-wrapper h4 {
    font-size: 1.5rem;
}

.editor-styles-wrapper h5 {
    font-size: 1.313rem;
}

.editor-styles-wrapper h6 {
    font-size: 1.125rem;
}

/*=============================================
=            Base Typography            =
=============================================*/
.editor-styles-wrapper code {
    background-color: #f8f9fa;
    padding: 0.125em 0.25em;
}

.editor-styles-wrapper pre {
    background-color: #f8f9fa;
    padding: 20px;
}

.editor-styles-wrapper blockquote {
    color: var(--color-accent);
    font-weight: 500;
    padding: 30px 50px 15px;
    position: relative;
    font-size: 25px;
    font-weight: 600;
    background: var(--color-bg-1);
    margin: 40px 0;
    line-height: 1.4;
    border-left: 5px solid;
}
.editor-styles-wrapper .wp-block-pullquote blockquote,
.editor-styles-wrapper .wp-block-pullquote {
    color: var(--color-accent);
    border-left: none;
}
.editor-styles-wrapper blockquote cite {
    text-transform: uppercase;
}

.editor-styles-wrapper blockquote.has-text-align-right {
    border: unset;
    border-left: 4px solid #e9ecef;
}

/*=============================================
=            Table            =
=============================================*/
.editor-styles-wrapper table {
    margin: 0 0 1.5em;
    width: 100%;
}

.editor-styles-wrapper table th,
.editor-styles-wrapper table td {
    text-align: left;
    border: 1px solid var(--color-1);
}

.editor-styles-wrapper hr {
    background-color: #e9ecef;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

/* Make sure embeds and iframes fit their containers */
.editor-styles-wrapper embed,
.editor-styles-wrapper iframe,
.editor-styles-wrapper object {
    max-width: 100%;
}

.is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline {
    border: 2px solid var(--color-btn-hover);
}
.is-style-outline > .wp-block-button__link:not(.has-text-color), .wp-block-button__link.is-style-outline:not(.has-text-color) {
    color: var(--color-btn-bg);
}

.editor-styles-wrapper input[type="text"],
.editor-styles-wrapper input[type="email"],
.editor-styles-wrapper input[type="url"],
.editor-styles-wrapper input[type="password"],
.editor-styles-wrapper input[type="search"],
.editor-styles-wrapper input[type="number"],
.editor-styles-wrapper input[type="tel"],
.editor-styles-wrapper input[type="range"],
.editor-styles-wrapper input[type="date"],
.editor-styles-wrapper input[type="month"],
.editor-styles-wrapper input[type="week"],
.editor-styles-wrapper input[type="time"],
.editor-styles-wrapper input[type="datetime"],
.editor-styles-wrapper input[type="datetime-local"],
.editor-styles-wrapper input[type="color"],
.editor-styles-wrapper select,
.editor-styles-wrapper textarea {
    color: var(--color-1);
    border: 1px solid var(--color-1);
    padding: 0.7rem 1rem;
    width: 100%;
    border-radius: 0;
}

.editor-styles-wrapper input[type="text"]:focus,
.editor-styles-wrapper input[type="email"]:focus,
.editor-styles-wrapper input[type="url"]:focus,
.editor-styles-wrapper input[type="password"]:focus,
.editor-styles-wrapper input[type="search"]:focus,
.editor-styles-wrapper input[type="number"]:focus,
.editor-styles-wrapper input[type="tel"]:focus,
.editor-styles-wrapper input[type="range"]:focus,
.editor-styles-wrapper input[type="date"]:focus,
.editor-styles-wrapper input[type="month"]:focus,
.editor-styles-wrapper input[type="week"]:focus,
.editor-styles-wrapper input[type="time"]:focus,
.editor-styles-wrapper input[type="datetime"]:focus,
.editor-styles-wrapper input[type="datetime-local"]:focus,
.editor-styles-wrapper input[type="color"]:focus,
.editor-styles-wrapper select:focus,
.editor-styles-wrapper textarea:focus {
    color: var(--color-1);
}

.editor-styles-wrapper input[type="search"] {
    -webkit-appearance: none;
}

.editor-styles-wrapper input[type="checkbox"],
.editor-styles-wrapper input[type="radio"] {
    margin-right: 0.5rem;
    vertical-align: middle;
    display: inline-block;
}

.editor-styles-wrapper label {
    margin-bottom: 0.5rem;
    display: inline-block;
}

.editor-styles-wrapper select {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active,
.wp-block-button__link:visited {
    background-color: var(--color-accent-secondary);
}

/*=============================================
=                    Links                    =
=============================================*/
.editor-styles-wrapper a,
.editor-styles-wrapper .wp-block-file__textlink {
    color: var(--color-link);
    text-decoration: none;
    -webkit-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

.editor-styles-wrapper a:hover, .editor-styles-wrapper a:focus {
    color: var(--color-link-hover);
}

/*=============================================
=            Lists            =
=============================================*/
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
    margin: 0 0 1.6rem 1.6rem;
    padding-left: 0;
}

.editor-styles-wrapper ul {
    list-style: square;
}

.editor-styles-wrapper ol {
    list-style: decimal;
}

.editor-styles-wrapper li > ul,
.editor-styles-wrapper li > ol {
    margin-bottom: 0;
    margin-left: 1.6rem;
}

.editor-styles-wrapper dt {
    font-weight: 700;
}

.editor-styles-wrapper dd {
    margin: 0 1.6rem 1.6rem;
}

/*=============================================
=            Alignments            =
=============================================*/
.editor-styles-wrapper .alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.editor-styles-wrapper .alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.editor-styles-wrapper .aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*=============================================
=            Captions            =
=============================================*/
.editor-styles-wrapper .wp-caption {
    border: 1px solid #cccccc;
    margin-bottom: 1.5em;
    max-width: 100%;
}

.editor-styles-wrapper .wp-caption img[class*="wp-image-"],
.editor-styles-wrapper .wp-caption img[class*="wp-image-"] dt {
    display: block;
    margin: 1.2% auto 0;
    max-width: 98%;
}

.editor-styles-wrapper .wp-caption .wp-caption-text,
.editor-styles-wrapper .wp-caption .wp-caption .wp-caption-dd {
    margin: 0.8075em 0;
}

.editor-styles-wrapper .wp-caption-text,
.editor-styles-wrapper .wp-caption .wp-caption-dd {
    text-align: center;
}

/*=============================================
=            Gallery            =
=============================================*/
.editor-styles-wrapper .gallery {
    margin: 0 auto 1.5em;
}

.editor-styles-wrapper .gallery-item {
    display: inline-block;
    padding: 15px 2%;
    text-align: center;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.editor-styles-wrapper .gallery-icon img {
    margin: 0 auto;
}

.editor-styles-wrapper .gallery .gallery-caption {
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
}

.editor-styles-wrapper .wp-block-gallery ol,
.editor-styles-wrapper .wp-block-gallery li {
    margin-bottom: 1em;
}

.editor-styles-wrapper .wp-block .gallery-columns-2 .gallery-item {
    width: 50%;
}

.editor-styles-wrapper .wp-block .gallery-columns-3 .gallery-item {
    width: 33.33%;
}

.editor-styles-wrapper .wp-block .gallery-columns-4 .gallery-item {
    width: 25%;
}

.editor-styles-wrapper .wp-block .gallery-columns-5 .gallery-item {
    width: 20%;
}

.editor-styles-wrapper .wp-block .gallery-columns-6 .gallery-item {
    width: 16.66%;
}

.editor-styles-wrapper .wp-block .gallery-columns-7 .gallery-item {
    width: 14.28%;
}

.editor-styles-wrapper .wp-block .gallery-columns-8 .gallery-item {
    width: 12.5%;
}

.editor-styles-wrapper .wp-block .gallery-columns-9 .gallery-item {
    width: 11.11%;
}

.editor-styles-wrapper .wp-block .gallery-columns-3 .gallery-item {
    padding: 15px 1%;
}

.editor-styles-wrapper .wp-block .gallery-columns-4 .gallery-item {
    padding: 15px 1%;
}

.editor-styles-wrapper .wp-block .gallery-columns-5 .gallery-item {
    padding: 15px 1%;
}

.editor-styles-wrapper .wp-block .gallery-columns-6 .gallery-item {
    padding: 10px 0.5%;
}

.editor-styles-wrapper .wp-block .gallery-columns-7 .gallery-item {
    padding: 10px 0.5%;
}

.editor-styles-wrapper .wp-block .gallery-columns-8 .gallery-item {
    padding: 10px 0.5%;
}

.editor-styles-wrapper .wp-block .gallery-columns-9 .gallery-item {
    padding: 10px 0.5%;
}
