@layer bricks { :root, .brxc-light-colors, html[data-theme="dark"] .brxc-reversed-colors, html[data-theme="light"] .brxc-initial-colors { --headingFont: "Latina", sans-serif; --textFont: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; --monospace: var(--textFont); --textColor: var(--color3); --color1: hsla(47, 100%, 50.2%, 1); --color1-h: 47; --color1-s: 100%; --color1-l: 50.2%; --color2: hsla(302, 48.4%, 52.2%, 1); --color2-h: 302; --color2-s: 48.4%; --color2-l: 52.2%; --color3: hsla(233, 22.4%, 22.7%, 1); --color3-h: 233; --color3-s: 22.4%; --color3-l: 22.7%; --color4: hsla(195, 100%, 37.8%, 1); --color4-h: 195; --color4-s: 100%; --color4-l: 37.8%; --color5: hsla(192, 59.2%, 51%, 1); --color5-h: 192; --color5-s: 59.2%; --color5-l: 51%; --white: #ffffff; --lightgray: hsla(0, 0%, 91.4%, 1); --lightgray-h: 0; --lightgray-s: 0%; --lightgray-l: 91.4%; --darkgrey: hsla(0, 0%, 20%, 1); --darkgrey-h: 0; --darkgrey-s: 0%; --darkgrey-l: 20%; --black: hsla(0, 0%, 0%, 1); --black-h: 0; --black-s: 0%; --black-l: 0%; } *, :after, :before { box-sizing: inherit } img, svg { max-width: 100%; height: auto } a.skip-link { left: -9999px; position: absolute; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: -999 } a.skip-link:active, a.skip-link:focus { background: #fff; color: var(--black); left: 0; top: 0; width: auto; height: auto; overflow: auto; margin: 1rem; padding: .5rem; font-size: 1.5rem; z-index: 99999999999999 } html { background-image: url("/wp-content/uploads/texture.webp"); background-size: cover; background-attachment: fixed; font-family: var(--textFont); line-height: 1.4 } body { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; max-width: 100vw !important; overflow-x: hidden } .fullwidth { width: 100%; max-width: 100%; flex-basis: 100% } .text-left { text-align: left } .text-center { text-align: center } .text-right { text-align: right } .text-decoration-none { text-decoration: none } .m0 { margin: 0 } .mt3 { margin-top: 3rem } .mt4 { margin-top: 4rem } .mb1 { margin-bottom: 1rem; } .plr1 { padding: 0 1rem } .primary { color: var(--color2) } .secondary { color: var(--color4) } .white { color: var(--white) } .lightgray { color: var(--lightgray) } .darkgray { color: var(--darkgray) } .black { color: var(--black) } .bg-white { background-color: var(--white) } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: var(--headingFont); font-weight: 800; font-style: italic; color: var(--textColor) } h1,.h1 { text-align: center; grid-column: 1/-1; background: linear-gradient(0deg, var(--color1) 0, var(--color1) 10%, rgba(255, 255, 255, 0) 10%); font-size: clamp(2rem, 8vw - 1.5rem, 3.5rem); width: 100%; } h1.frontpage-title { font-size: 1.75rem; line-height: 1.5; padding-bottom: .5rem; text-align: left; background: none; } h1 a, h2 a, h3 a, h4 a { text-decoration: none; background: linear-gradient(0deg, var(--color1) 0, var(--color1) 10%, rgba(255, 255, 255, 0) 10%); color: var(--color3) } h2, .h2 { font-size: 1.75rem; } h3, .h3 { font-size: 1.25rem } .h4 { font-size: 1.125rem; } @media (min-width:768px) { h3 { font-size: 1.5rem } .h4 { font-size: 1.25rem; } } li, p { font-weight: 400; color: var(--textColor) } .p__highlighted { display: inline; padding-bottom: 4px; background: linear-gradient(0deg, var(--color1) 0, var(--color1) 10%, rgba(255, 255, 255, 0) 10%); font-weight: 700; line-height: 1.8 } .p__highlighted::after { content: ""; display: block } .p__highlighted a { text-decoration: none } a { color: var(--textColor); text-decoration: none; background: linear-gradient(0deg, var(--color1) 0, var(--color1) 10%, rgba(255, 255, 255, 0) 10%) } .toprow a { color: #fff; background: 0 0 } .logo-area a { background: 0 0 } code, pre { font-family: var(--monospace) } pre { padding: 1rem; background: var(--color3); overflow-x: scroll } code { font-style: italic } pre code { color: var(--white); font-style: normal } .toprow { background-color: var(--color4); padding: .25rem 0 } .toprow .container { display: flex; justify-content: space-between } .toprow .address { color: var(--white); font-size: 1rem; font-weight: 700 } .toprow .address p { margin: .25rem } .toprow .address a { color: var(--white) } .social__nav { display: flex; align-items: center } .address { text-align: center; font-size: .75rem } @media (min-width:1120px) { .address { text-align: right } } .siteheader { position: relative; z-index: 100 } .siteheader .container { position: relative } .siteheader .logo-area { padding: 2rem 0; text-align: center } @media (min-width:1120px) { .siteheader .logo-area { min-height: 120px } } .siteheader .logo-area a { display: inline-block; width: 280px } @media (min-width:560px) { .siteheader .logo-area a { width: 380px } } @media (min-width:1120px) { .mobile-menu { display: none } } .mobile-menu__btn .fa-bars { pointer-events: none } .main-navigation__nav { max-height: 0; overflow: hidden; transition: max-height .5s ease } @media (min-width:1120px) { .main-navigation__nav { max-height: 60px } } @media (min-width:1120px) { .main-navigation__nav { overflow: initial } } #site-navigation.toggled .main-navigation__nav { max-height: 2000px; transition: max-height .5s ease } @media (min-width:1120px) { .menu-item-has-children>.sub-menu { max-height: 0; overflow: hidden; transition: max-height .5s ease } } @media (min-width:1120px) { .menu-item-has-children.focus>.sub-menu, .menu-item-has-children:hover>.sub-menu { max-height: 2000px; transition: max-height .5s ease } } .mobile-menu { margin-bottom: 1rem } .mobile-menu__btn { display: block; width: 100%; text-align: center; border: 0; padding: .25rem; color: var(--white); background-color: var(--color3); text-decoration: none; font-weight: 700; font-family: var(--headingFont); font-size: 1.5rem } .mobile-menu__btn .fa-bars { padding: .5rem .5rem .5rem 0rem } #primary-menu { padding: 0; margin-top: 0; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--lightgray) } @media (min-width:1120px) { #primary-menu { border: none; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 45%, var(--color2) 45%, var(--color2) 55%, rgba(255, 255, 255, 0) 55%) } } @media (min-width:1120px) { #primary-menu { display: flex; justify-content: center } } #primary-menu>li { list-style: none; text-align: center; position: relative; filter: drop-shadow(3px 3px var(--color5)); transition: .25s } #primary-menu>li.current_page_item { filter: drop-shadow(3px 3px var(--color1)) } #primary-menu>li:focus-within, #primary-menu>li:hover { transform: scale(1.1) !important } #primary-menu>li:focus-within { outline: 1px dotted var(--color2) } @media (min-width:1120px) { #primary-menu>li.current_page_item, #primary-menu>li.current_page_parent { border-bottom: 4px solid var(--primary) } } #primary-menu>li>span { display: block } #primary-menu>li.home>span { -webkit-clip-path: polygon(34% 18%, 67% 14%, 66% 79%, 35% 82%); clip-path: polygon(34% 18%, 67% 14%, 66% 79%, 35% 82%) } #primary-menu>li.lesematerial>span { -webkit-clip-path: polygon(12% 15%, 84% 11%, 84% 79%, 16% 82%); clip-path: polygon(12% 15%, 84% 11%, 84% 79%, 16% 82%) } #primary-menu>li.downloads>span { -webkit-clip-path: polygon(12% 15%, 84% 11%, 84% 79%, 16% 82%); clip-path: polygon(12% 15%, 84% 11%, 84% 79%, 16% 82%) } #primary-menu>li.ueber-mich>span { -webkit-clip-path: polygon(23% 10%, 79% 16%, 77% 79%, 22% 82%); clip-path: polygon(23% 10%, 79% 16%, 77% 79%, 22% 82%) } #primary-menu>li.kontakt>span { -webkit-clip-path: polygon(26% 15%, 75% 11%, 71% 79%, 26% 82%); clip-path: polygon(26% 15%, 75% 11%, 71% 79%, 26% 82%) } @media (min-width:640px) { #primary-menu>li.home>span { -webkit-clip-path: polygon(40% 18%, 61% 14%, 59% 79%, 42% 82%); clip-path: polygon(40% 18%, 61% 14%, 59% 79%, 42% 82%) } #primary-menu>li.lesematerial>span { -webkit-clip-path: polygon(30% 19%, 70% 14%, 69% 79%, 31% 82%); clip-path: polygon(30% 19%, 70% 14%, 69% 79%, 31% 82%) } #primary-menu>li.downloads>span { -webkit-clip-path: polygon(32% 19%, 69% 14%, 67% 79%, 31% 82%); clip-path: polygon(32% 19%, 69% 14%, 67% 79%, 31% 82%) } #primary-menu>li.ueber-mich>span { -webkit-clip-path: polygon(33% 10%, 64% 16%, 66% 79%, 35% 82%); clip-path: polygon(33% 10%, 64% 16%, 66% 79%, 35% 82%) } #primary-menu>li.kontakt>span { -webkit-clip-path: polygon(36% 12%, 65% 11%, 63% 79%, 37% 82%); clip-path: polygon(36% 12%, 65% 11%, 63% 79%, 37% 82%) } } @media (min-width:1120px) { #primary-menu>li.home>span { -webkit-clip-path: polygon(8% 18%, 91% 14%, 89% 79%, 11% 82%); clip-path: polygon(8% 18%, 91% 14%, 89% 79%, 11% 82%) } #primary-menu>li.lesematerial>span { -webkit-clip-path: polygon(6% 19%, 94% 14%, 92% 79%, 8% 82%); clip-path: polygon(6% 19%, 94% 14%, 92% 79%, 8% 82%) } #primary-menu>li.downloads>span { -webkit-clip-path: polygon(6% 19%, 94% 14%, 92% 79%, 8% 82%); clip-path: polygon(6% 19%, 94% 14%, 92% 79%, 8% 82%) } #primary-menu>li.ueber-mich>span { -webkit-clip-path: polygon(6% 10%, 94% 16%, 92% 79%, 9% 82%); clip-path: polygon(6% 10%, 94% 16%, 92% 79%, 9% 82%) } #primary-menu>li.kontakt>span { -webkit-clip-path: polygon(8% 12%, 94% 11%, 92% 79%, 10% 82%); clip-path: polygon(8% 12%, 94% 11%, 92% 79%, 10% 82%) } } #primary-menu>li>span>a { background: var(--color3); display: block; text-decoration: none; font-family: var(--headingFont); font-size: 28px; font-weight: 900; text-transform: uppercase; color: var(--white); padding: 1rem 1.75rem } @media (min-width:1120px) { #primary-menu>li:focus-within .sub-menu, #primary-menu>li:hover .sub-menu { border: 1px solid var(--lightgray); box-shadow: 0 0 10px rgba(0, 0, 0, .15); padding: 1rem } } #primary-menu>li:hover .sub-menu li { transform: none !important } #primary-menu .sub-menu { margin: 0; padding-left: 0; width: 40%; margin: 0 auto 1.5rem auto } @media (min-width:1120px) { #primary-menu .sub-menu { width: auto; background: #fff; position: absolute; top: calc(100% + 2px); z-index: 999999999; left: 50%; transform: translateX(-50%); filter: drop-shadow(-3px -3px var(--color5)) } } @media (min-width:1120px) { #primary-menu .sub-menu::before { content: ""; display: block; top: 10px; width: 100%; position: relative; height: 10px; background: 0 0 } } #primary-menu .sub-menu li { list-style: none; margin-bottom: .75rem } @media (min-width:1120px) { #primary-menu .sub-menu li { margin-bottom: 1.25rem } } #primary-menu .sub-menu li>span>a { background: var(--color3); text-decoration: none; font-family: var(--headingFont); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; color: var(--white); padding: .5rem .75rem } .frontpage-greeting { margin-bottom: 2rem; padding: 0 1rem } .frontpage-greeting__span { display: inline-block; background-color: var(--color2); color: var(--white); font-size: 2.5rem; font-family: var(--headingFont); font-weight: 900; font-style: italic; transform: rotate(-1deg) } .frontpage-greeting__span { padding: 0 .5rem } .frontpage-title { display: inline; padding-bottom: 8px; color: var(--textColor) } .frontpage-title::after { content: ""; display: block } .categories-and-search { grid-column: 1/-1; display: flex; flex-wrap: wrap; justify-content: center } .categories-and-search .categories-list { margin-right: 1rem } .search-form { position: relative } .search-form label { position: relative } .search-form label::after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4yLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO30NCjwvc3R5bGU+DQo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI5LjYiIGN5PSI5LjYiIHI9IjYuNiIvPg0KPGxpbmUgY2xhc3M9InN0MCIgeDE9IjIxIiB5MT0iMjEiIHgyPSIxNC4zIiB5Mj0iMTQuMyIvPg0KPC9zdmc+DQo=); background-repeat: no-repeat; content: ""; height: 1.75rem; width: 1.75rem; color: red; position: absolute; top: -5px; right: -23px; z-index: 100; color: #fff; pointer-events: none } .search-form input.search-field { padding: .75rem .5rem } .search-form input.search-submit { width: 2.8rem; height: 2.8rem; border: none; background-color: var(--color2); color: transparent; font-size: 1.1rem; letter-spacing: .05rem; cursor: pointer; transition: .25s ease-in-out; position: absolute; right: -2.5rem; top: 0 } .feature__h2-wrap { position: relative; top: -54px; filter: drop-shadow(3px 3px var(--color2)) } .feature__h2-wrap--1, .feature__h2-wrap--2, .feature__h2-wrap--3 { left: 50%; transform: translateX(-50%) } .feature__h2-wrap--1 { width: 220px } @media (min-width:560px) { .feature__h2-wrap--1 { width: 280px } } .feature__h2-wrap--2 { width: 220px } @media (min-width:560px) { .feature__h2-wrap--2 { width: 300px } } .feature__h2-wrap--3 { width: 240px } @media (min-width:560px) { .feature__h2-wrap--3 { width: 320px } } .feature__h2-clip { background-color: var(--color1); display: flex; flex-direction: row; justify-content: center; align-items: center } .feature__h2-clip h2 { font-size: 1.5rem; margin: 0; text-align: center; padding: 1.5rem 0; transform: rotate(-1deg) } @media (min-width:560px) { .feature__h2-clip h2 { font-size: 2rem } } .feature__h2-clip--1 { -webkit-clip-path: polygon(2% 21%, 94% 14%, 91% 75%, 8% 82%); clip-path: polygon(2% 21%, 94% 14%, 91% 75%, 8% 82%) } .feature__h2-clip--2 { -webkit-clip-path: polygon(7% 18%, 94% 20%, 87% 79%, 9% 82%); clip-path: polygon(7% 18%, 94% 20%, 87% 79%, 9% 82%) } .feature__h2-clip--3 { -webkit-clip-path: polygon(2% 20%, 99% 10%, 97% 79%, 3% 89%); clip-path: polygon(2% 20%, 99% 10%, 97% 79%, 3% 89%) } .brxe-filter-radio label .brx-option-text, .more-posts-btn { font-family: var(--headingFont); font-size: 1.25rem; font-weight: 700; color: var(--white); background: var(--color2); display: inline-block; padding: .25rem .5rem; box-shadow: 3px 3px 0 var(--color4); transition: .15s ease; margin-bottom: 1rem; } .brxe-filter-radio label .brx-option-text.brx-option-active { box-shadow: 3px 3px 0 var(--color1); } .post__excerpt { display: grid; grid-template-columns: 100px 1fr; gap: 1rem; background-color: var(--white); padding: .5rem } .post__excerpt img { border: 1px solid var(--color3); border-radius: 2px } .post__excerpt h2 { font-size: 1.25rem; margin: 0 0 1rem 0 } @media (min-width:560px) { .post__excerpt h2 { font-size: 1.5rem } } .post__excerpt--title { margin: 0; font-size: 1rem } @media (min-width:768px) { .post__excerpt--title { margin: .25rem 0 .5rem 0; font-size: 1.25rem } } .post__excerpt--pagination { grid-column: 1/-1; margin-bottom: 2rem } .post__excerpt--pagination .nav-links { text-align: center; font-family: var(--headingFont); font-size: 1.25rem; font-weight: 900 } .post__excerpt--pagination .nav-links * { margin: .5rem } .post__excerpt--pagination .nav-links a { text-decoration: none; background: linear-gradient(0deg, var(--color1) 0, var(--color1) 10%, rgba(255, 255, 255, 0) 10%) }  a.icon-link { text-decoration: none } a.icon-link::after { background-color: transparent !important } .arrow-icon { width: 16px; height: 16px } .arrow-icon .svg-element-dark:hover { fill: var(--textColor) } .svg-element-dark { fill: #333 } .svg-element-light { fill: #aaa } .svg-element-dark--mod { fill-rule: evenodd; clip-rule: evenodd } .post__header { padding-bottom: 1.5rem; border-bottom: 1px solid var(--color3); margin-bottom: 2rem } .post__header img { display: none } @media (min-width:768px) { .post__header img { display: block } } @media (min-width:768px) { .post__header { display: grid; gap: 1rem; grid-template-columns: 140px 1fr } } .post__title { margin: 0 } .post-meta__date { margin-top: 0 } .post-meta__tags ul { display: inline-flex; padding-left: .5rem; margin: 0 } .post-meta__tags ul li { list-style: none } .post-meta__tags ul li:not(:last-child) { margin-right: .25rem } .post-meta__tags ul li:not(:last-child)::after { content: "/"; margin-left: .25rem } .post__footer { grid-column: 1/-1 } .post__footer h3 { text-align: center } #modalOeffnen, .modalWrapper a { text-decoration: none; padding-bottom: 4px; background: linear-gradient(0deg, var(--color1) 0, var(--color1) 15%, #fff 15%) } .modalWrapper { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .7) } .modalWrapper.modalOpen { display: flex; justify-content: center; align-items: center; z-index: 99999999 } .modalWrapper__inner { background: #fff; box-shadow: rgba(0, 0, 0, .7); padding: 1rem; width: 90%; overflow-y: auto } @media (min-width:768px) { .modalWrapper__inner { width: 80% } } @media (min-width:1120px) { .modalWrapper__inner { width: 70%; padding: 2rem } } .modalWrapper__inner__btn { display: flex; justify-content: center; cursor: pointer } .wpcf7-form .wpcf7-form-control-wrap { position: static } .wpcf7-form>p { width: 100%; max-width: 600px; margin-bottom: 1.5rem } .wpcf7-form label { display: block } .wpcf7-form label+span { display: block } .wpcf7-form label+span input, .wpcf7-form label+span textarea { width: 100%; padding: .75rem .5rem } .wpcf7-form .wpcf7-list-item { margin-left: 0 } .wpcf7-form button#modalSchliessen, .wpcf7-form input[type=submit] { border: 0; padding: .5rem .75rem; color: #fff; background-color: var(--color4); transition: .15s ease } .wpcf7-form button#modalSchliessen:hover, .wpcf7-form input[type=submit]:hover { background-color: var(--color5); box-shadow: 2px 2px 2px rgba(0, 0, 0, .3) } .new-search { grid-column: 1/-1; place-self: center; display: flex; flex-wrap: wrap; vertical-align: middle } .new-search h2 { margin: 0 1rem 1rem 0 } @media (min-width:768px) { .new-search h2 { margin-bottom: 0 } } .new-search .searchfield { position: relative; top: -8px } .new-search.nothing-found { display: block; width: 100% } .new-search.nothing-found h2, .new-search.nothing-found p { text-align: center; width: 100% } .new-search.nothing-found p { max-width: 100% } .new-search.nothing-found .new-search { display: grid; place-items: center; margin-left: -2rem } .alignnone { margin: 5px 20px 20px 0 } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto } .alignright { float: right; margin: 5px 0 20px 20px } .alignleft { float: left; margin: 5px 20px 20px 0 } a img.alignright { float: right; margin: 5px 0 20px 20px } a img.alignnone { margin: 5px 20px 20px 0 } a img.alignleft { float: left; margin: 5px 20px 20px 0 } a img.aligncenter { display: block; margin-left: auto; margin-right: auto } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center } .wp-caption.alignnone { margin: 5px 20px 20px 0 } .wp-caption.alignleft { margin: 5px 20px 20px 0 } .wp-caption.alignright { margin: 5px 0 20px 20px } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important } .screen-reader-text:focus { background-color: #eee; clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000 } .alignwide { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw } @media (min-width:1120px) { .alignwide.block-startseite { margin-left: calc(77% - 50vw) } } .alignfull { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw } .alignfull img { width: 100vw } .wp-block-image { margin: 1rem 0 } .info-page a { background: 0 0 } .info-page__siteheader { text-align: center; padding-left: 1rem; padding-right: 1rem } .info-page__h1 { margin-bottom: 0 } .info-page__article { display: grid; place-items: center } .info-page__headline { margin-bottom: 2rem; font-size: 2rem } @media (min-width:768px) { .info-page__headline { font-size: 3rem } } .info-page__nav { min-width: 280px; max-width: 480px; display: grid; gap: 1rem; padding: 0 1.5rem } .info-page .button { background: var(--color4); border-left: 4px solid var(--color1); border-right: 4px solid var(--color1); border-radius: 2px; color: var(--white); text-align: center; padding: .75rem; font-size: 1.25rem; transition: .25s ease-in-out } .info-page .button:hover { background: var(--color5); transform: scale(1.05) } #respond { padding: 0 2rem; border-top: 1px solid var(--lightgray) } #respond #reply-title { font-size: 3rem; color: var(--primary) } #respond p[class*=comment-form]:not([class*=cookies-consent]) { display: flex; flex-direction: column; max-width: 800px } #respond p[class*=comment-form]:not([class*=cookies-consent]) label { font-weight: 700; color: var(--primary) } #respond p[class*=comment-form]:not([class*=cookies-consent]) input, #respond p[class*=comment-form]:not([class*=cookies-consent]) textarea { padding: .75rem; border: 1px solid var(--darkgray) } #respond input#submit { border: none; background-color: var(--primary); color: #fff; padding: .75rem; transition: .5s } #respond input#submit:hover { background-color: var(--darkgray) } p.logged-in-as a { color: var(--textcolor) } .comment-list li.comment { list-style: none; padding: 0 1rem } .comment-list .comment-meta { border-top: 1px solid var(--lightgray); border-bottom: 1px solid var(--lightgray); padding: 1rem 0; display: grid; grid-template-columns: 180px 1fr } .comment-list .comment-metadata { display: flex; align-items: center } .comment-list .comment-metadata a { color: var(--textcolor); text-decoration: none } .comment-list .comment-author .avatar { margin-right: 1rem } .comment-list .comment-author .says { display: none } .comment-list .comment-author .fn, .comment-list .comment-author .fn a { color: var(--primary); font-size: 2rem; text-decoration: none; font-weight: 400 } .comment-list .comment-body { padding: 1rem } .comment-list .reply a { background: var(--primary); color: var(--white); text-decoration: none; display: inline-block; padding: .5rem .75rem } #respond #reply-title { display: flex; flex-wrap: wrap; font-size: 2rem } #respond #reply-title a { color: var(--primary); margin-left: 1rem } #respond #reply-title a:hover { color: var(--darkgray) } #respond #reply-title small { font-size: 1.25rem; margin-left: 2rem; padding-top: .5rem; display: inline-block } #respond #reply-title small #cancel-comment-reply-link { background: var(--primary); color: var(--white); padding: .75rem .75rem .5rem .75rem; text-decoration: none } #respond #reply-title small #cancel-comment-reply-link:hover { background: var(--darkgray) } .footer-menu { list-style: none; color: var(--textColor); padding: 1rem 0; border-top: 4px solid var(--color2); border-bottom: 4px solid var(--color2); margin-bottom: 1rem } @media (min-width:768px) { .footer-menu { display: flex; justify-content: center } } @media (min-width:768px) { .footer-menu li.menu-item:not(:last-child)::after { margin-left: .5rem; margin-right: .5rem; content: "|"; font-weight: 700; color: var(--primary) } } .footer-menu li.menu-item a { color: var(--textColor); text-decoration: none; text-align: center; font-weight: 700; background: 0 0 } .footer-meta__copyright { font-size: .75rem; max-width: 100% } }