:root { --dune: #333333;
--liver: #4f4f4f;
--cotton-seed: #bdbdbd;
--porcelain: #f2f2f2;
--carrot: #ff8800;
--red-beech: #7a4100;
--light-apricot: #f8d883;
--peacock-blue: #0f6394; --prussian-blue: #0a3954; --turquoise-blue: #75d6ff; --cotton-seed--trans58: #bdbdbd58;  --background-color: var(--dune);
--background-color--footer: var(--liver);
--background-color--welcome: var(--liver);
--background-color--post: var(--porcelain);
--background-color--summary: var(--cotton-seed--trans58); 
--background-color--sources: var(--light-apricot);
--primary-color: var(--peacock-blue);
--primary-color--dark: var(--prussian-blue);
--primary-color--light: var(--turquoise-blue);
--secondary-color: var(--carrot);
--secondary-color--dark: var(--red-beech);
--secondary-color--light: var(--light-apricot);
--text-color: var(--porcelain);
--text-color--nav: var(--cotton-seed);
--text-color--inactive: var(--liver);
--text-color--dark: var(--dune);
--category-color: var(--secondary-color);
--tag-color: var(--primary-color);
--tag-color--light: var(--primary-color--light);
--shadow-color: rgba(51, 51, 51, 0.25);
--text-shadow: 0.2rem 0.2rem 0.2rem var(--shadow-color); --header-height: 5.6rem;
--spacing-height: 4.7rem;
--footer-height: 15rem;
--main-height: calc(100vh - var(--header-height) - var(--footer-height));
--main-padding-left-n-right: 3rem;
--main-padding-top: 2rem;
--main-padding-bottom: var(--spacing-height);
--single-header-padding-top: 1rem;
--single-header-padding-bottom: 1rem;
--single-header-padding-left-n-right: 1.5rem;
--single-content-padding-top: 3.2rem;
--single-content-padding-bottom: 3.2rem;
--single-content-padding-left-n-right: 1.5rem;
--single-inserted-element-spacing-left-n-right: 1.5rem;
--single-inserted-element-spacing: 3rem;
font-family: 'Mulish', sans-serif;
font-weight: 400;
line-height: normal;
--author-font: 'LineScript', 'Mulish', sans-serif;
}
@media screen and (min-width: 768px) {
:root {
--footer-height: 17.6rem;
--main-padding-left-n-right: 4rem;
--main-padding-top: 3rem;
--single-header-padding-top: 1.5rem; --single-header-padding-left-n-right: 4rem;
--single-content-padding-top: 6rem;
--single-content-padding-bottom: 2.1rem;
--single-content-padding-left-n-right: 4rem;
--single-inserted-element-spacing-left-n-right: 4rem; }
}
@media screen and (min-width: 1440px) {
:root {
--header-height: 7.5rem;
--footer-height: 19.6rem;
--main-padding-left-n-right: 10rem;
--main-padding-bottom: 7rem;  --single-header-padding-left-n-right: 10rem;
--single-content-padding-top: 3.2rem;
--single-content-padding-bottom: 3.2rem;
--single-content-padding-left-n-right: 5rem;
--single-inserted-element-spacing-left-n-right: 5rem;
--single-inserted-element-spacing: 4rem;
}
}
html {
background-color: black;  font-size: 62.5%;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
box-sizing: border-box;
margin: 0 0; }
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0 0;
}
body {
width: 100%;
margin: auto; color: var(--text-color);
scroll-behavior: smooth;
}
.wrapper {
overflow-x: hidden;
margin:auto;
}
.wrapper::-webkit-scrollbar {
overflow-x: hidden;
}
main {
width: 100%;
min-height: var(--main-height);
margin: var(--header-height) auto 0rem auto;
padding: var(--main-padding-top) var(--main-padding-left-n-right) var(--main-padding-bottom) var(--main-padding-left-n-right); 
display:flex;
flex-direction: column;
gap: var(--spacing-height); 
background-color: var(--background-color);
}
@media screen and (min-width: 1440px) {
main {
width: 144rem;
}
}
.screen-reader-text {
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
left: -10000px;
top:auto;
width: 1px;
white-space: nowrap;
border: 0;
}
a {
text-decoration: none;
color: var(--text-color);
} h1 {
font-size: 2.4rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.6rem;
}
h4, p, ol, ul {
font-size: 1.4rem;
}
p, ol, ul {
line-height: 143%;
}
h5, h6 {
font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
h1 {
font-size: 2.8rem;
}
h2 {
font-size: 2.2rem;
}
h3 {
font-size: 1.8rem;
}
h4, p, ol, ul {
font-size: 1.6rem;
}
h5, h6 {
font-size: 1.4rem;
}
}
@media screen and (min-width: 1440px) {
h1 {
font-size: 3.2rem;
}
h2 {
font-size: 2.6rem;
}
h3 {
font-size: 2.2rem;
}
h4, p, ol, ul {
font-size: 1.8rem;
}
h5, h6 {
font-size: 1.6rem;
}
} h2, h3, h4, h5, h6 {
font-weight: bold;
}   .btn {
display: block;
padding: 0.9rem 2.2rem;
border-radius: 1.8rem;
border-width: 0;
font-size: 1.4rem;
line-height: 0%;
font-weight: 700;
text-transform: uppercase;
text-align: center;
height: 3.6rem;
cursor: pointer;
transform: scale(1);
transition: transform 0.01s ease-in; 
}
.btn--large {
height: 4.1rem;
font-size: 1.8rem;
border-radius: 2.6rem;
}
a.btn {
padding: 1.6rem 2.2rem 0.1rem 2.2rem;
}
a.btn--large {
padding: 1.8rem 2.2rem 0.1rem 2.2rem;
}
.btn-primary {
background-color: var(--primary-color);
}
.btn-secondary {
background-color: var(--secondary-color);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.site__header__menu .menu-item-type-custom a:hover,
.site__header__menu .menu-item-type-custom a:focus-visible {
box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.25);
transform: scale(1.1);
}
.btn-secondary:hover,
.btn-secondary:focus-visible,
.site__header__menu .menu-item-type-custom a:hover,
.site__header__menu .menu-item-type-custom a:focus-visible {
color: var(--secondary-color--light);
transform: scale(1.1);
}
.btn:active,
a.btn:active {
transform: scale(0.75);
}
.btn-primary:active {
background-color: var(--primary-color--dark);
}
.btn-secondary:active,
.site__header__menu .menu-item.menu-item-type-custom a:active {
background-color: var(--secondary-color--dark);
color: var(--text-color);
}
.btn-primary:active,
.btn-secondary:active,
.site__header__menu .menu-item-type-custom a:active {
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}
#up-button {
height: 4.8rem;
width: 4.8rem;
position: fixed;
bottom: 5%;
right: 2%;
z-index: 2000;
}
#up-button a {
display: block;
border-radius: 2.4rem;
border: 0.2rem solid var(--primary-color--light);
width: 100%;
height: auto;
padding: 1.2rem;
font-size: 2rem;
line-height: 0%;
background-color: var(--background-color);
box-shadow: 0.4rem 0.4rem 0.4rem var(--shadow-color);
opacity: 0.9;
text-align: center;
color: var(--primary-color--light);
transform: scale(1);
transition: transform 0.1s ease-in;
transition: color 0.1s ease-in;
}
#up-button a:hover,
#up-button a:active {
transform: scale(1.25);
color: var(--primary-color);
background: var(--primary-color--light);
border-color: var(--primary-color);
}
#top-page {
scroll-margin-top: calc(var(--header-height) + 10rem);
}   .search-form {
background-color: var(--background-color);
border-bottom: 0.2rem solid var(--liver);
position: relative;
}
.search-form__input {
font-size: 1.4rem;
font-weight: bold;
display: block;
width: 100%;
padding: 0.6rem 0.6rem 0.6rem 5.5rem;
height: 5rem;
background-color: transparent;
color: var(--text-color--nav);
border-radius: 0.5rem;
border: 0.1rem solid var(--text-color);
}
.search-form__input::placeholder,
.search-form__input::-moz-placeholder {
opacity: 1;
}
.search-form__input:hover {
background-color: var(--primary-color--light);
color: var(--text-color--dark);
}
.search-form__input:hover::placeholder,
.search-form__input:hover::-moz-placeholder {
opacity:0.6;
}
.search-form__input:focus-visible {
color: var(--text-color);
background-color: transparent;
border-color: var(--primary-color--light);
}
.search-form__button {
font-size: 2.4rem;
display: block;
width:4.8rem;
height: 4.8rem;
padding: 0.6rem;
border-radius: 0.5rem  0 0 0.5rem ;
background-color: var(--background-color);
color: var(--text-color);
border: none;
position: absolute;
top:2.5rem;
left: 2.5rem;
transform: scale(1);
transition: transform 0.01s ease-in; 
}
.search-form__button:hover {
color: var(--primary-color--light);
}
.search-form__button:active {
color: var(--primary-color);
transform: scale(0.75);
}     .post-categories,
.post-tags {
list-style: none;
margin-left: -4rem; 
}
.post-categories a,
.post-tag a {
font-weight: bold;
text-transform: uppercase;
border-bottom: 0.2rem transparent solid; 
}
.post-card .post-categories a {
color: var(--secondary-color);
text-shadow: 10px 20px 40px #093954;
font-size: 1.6rem;
background-color: var(--primary-color--dark);  
}
.post-categories a:hover,
.post-categories a:focus-visible {
border-bottom: 0.2rem var(--secondary-color) solid;
}
.post-card .post-categories a:active {
color: var(--secondary-color--dark);
border-bottom: initial;
}
.post-tags {
display: flex;
flex-direction: row;
flex-wrap: wrap; 
}
.post-tag {
display: inline-block;
margin-right: 1.8rem;
}
.post-tag a {
font-size: 1.2rem;
border-bottom: 0.2rem transparent solid;
display: block;
}
.post-tag a:active {
border-bottom: initial;
}/*/*//**//*/*/.a11y-nav {
position: absolute;
top: -20rem;
z-index: 200;
width: 100%;
padding: 0;
margin: 0;
}
.ally-nav li {
list-style-type: none;
}
.a11y-nav a {
position: absolute;
left: 0;
right: 0;
padding: 1rem 0;
background-color: var(--text-color);
color: var(--background-color);
font-weight: 700;
font-size: 2rem;
text-align: center;
}
.a11y-nav a:focus,
.a11y-nav a:hover {
top:20rem;
text-decoration: none;
}/*/*//**//*/*/.site__banner {
z-index: 100;
position: fixed;
width: 100%;
background-color: var(--background-color);
box-shadow: 0 0.2rem 0.3rem var(--liver);
}
.site__header { 
position: relative;
flex-direction: row;
justify-items: space-between;
height: var(--header-height);
width:100%;
}
.site__header__brand {
position:absolute;
top: 50%;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
padding-left: 1rem;
}
.site__header__brandname,
.site__header__logo,
.site__header__by,
.site__header__author-brandname {
display: inline-block;
vertical-align: middle;
}
.site__header__brandname,
.site__header__author-brandname {
padding: 2rem 0rem;
font-size: 2.4rem;
font-weight: bold;
text-transform: uppercase;
}
.site__header__brand a,
.site__header__author a {
display: inline-block;
height:5.5rem;
}
.site__header__brandname:hover,
.site__header__logo:hover + .site__header__brandname,
.site__header__brand a:focus-visible,
.site__header__author-brandname:hover,
.site__header__author-brandname:focus-visible,
.site__header__logo:hover + .site__header__author-brandname,
.site__header__brandname:active,
.site__header__author-brandname:active {
color: var(--secondary-color);
}
.site__header__logo {
padding: 0.6rem;/**/}
.site__header_author {
display: none;
}
.site__header__by {
font-size: 2rem;
padding: 0rem 2.6rem;
}
.site__header__author-brandname {
font-family: 'LineScript', 'Mulish', sans-serif;
font-size: 3rem;
padding: 0.9rem 0rem;
}
@media screen and (min-width: 768px) { .site__header__brand {
padding-left: 1.5rem;
}
.site__header__brandname,
.site__header__author-brandname {
font-size: 2.8rem;
padding: 1rem 0rem;
}
}
@media screen and (min-width: 1440px) {
.site__header { 
width: 144rem; margin: auto;
}
.site__header__brand {
padding-left: 2rem;
}
.site__header_author {
display: inline-block;
}
.site__header__by {
font-size: 2rem;
padding: 0rem 2.6rem;
}
.site__header__author-brandname {
font-family: 'LineScript', 'Mulish', sans-serif;
font-size: 3.6rem;
padding: 0.9rem 0rem;
}
}/*/*//**//*/*/.togglemenu-input + .togglemenu-label .span-nochecked,
.togglemenu-input:checked + .togglemenu-label .span-checked { display: block; }
.togglemenu-input + .togglemenu-label .span-checked,
.togglemenu-input:checked + .togglemenu-label .span-nochecked { display: none; }
.togglemenu-label {
display: block;
width: 4.8rem;
height: 4.8rem;
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-33%);
-o-transform: translateY(-33%);
-ms-transform: translateY(-33%);
-moz-transform: translateY(-33%);
-webkit-transform: translateY(-33%);
font-size: 2.6rem;
text-align: right;
cursor: pointer;
}
.site__header__nav { 
max-height: 0;
overflow: hidden;
transition: max-height 0.8s;
display: block;
position: relative;
top: var(--header-height);
}
.togglemenu-input:checked ~ .site__header__nav {
max-height: 85vh;
overflow: auto;
}
.site__header__menu {
padding: 1rem;
list-style-type: none;
font-size: 1.6rem;
font-weight: bold;
display: block;
background-color: #333333;
}
.site__header__menu .menu-item {
display: block;
color: var(--text-color--nav);
border-bottom: 0.2rem solid var(--liver);
}
.site__header__menu .menu-item a {
display: block;
padding: 1.4rem 1.4rem 1.4rem 3.6rem;
color: var(--text-color--nav);
text-transform: lowercase;
}
.site__header__menu .menu-item a::first-letter {
text-transform: uppercase;
}
.site__header__menu .menu-item a:hover,
.site__header__menu .menu-item a:focus-visible {
color: var(--text-color);
background-color: var(--secondary-color);
}
.site__header__menu .menu-item a:active {
color: var(--text-color);
background-color: var(--secondary-color--dark);
}
.site__header__menu .menu-item-type-custom {
padding: 1.4rem 1.4rem 1.4rem 1.4rem;
}
.site__header__menu .menu-item-type-custom a {
display: inline-block;
padding: 0.9rem 2.2rem;
font-size: 1.6rem;
border-radius: 1.8rem;
background-color: var(--secondary-color);
color: var(--text-color);
text-transform: uppercase;
}/**/@media screen and (min-width: 768px) {
.togglemenu-label {
display: none;
}
.site__header__nav { 
display: block;
max-height: var(--header-height);
height: var(--header-height);
position: absolute;
top: 0;
right: 1.5rem;
background-color: transparent;  
padding-right: 1.5rem; }
.site__header__menu {
margin: 0;
padding: 0rem;
height: var(--header-height);
min-height: auto;
display:flex;
flex-direction: row;
align-items: center;
justify-items: right;
background-color: transparent;
}
.site__header__menu .menu-item {
display: inline-block;
border-bottom: 0rem;
margin: 0rem;
margin-left: 2.1rem;
padding-bottom: 1rem;
}
.site__header__menu .menu-item a {
display: inline-block;
align-items: center;
padding: 1rem 0rem 0.2rem 0rem;
color: var(--text-color--nav);
border-bottom: 0.2rem solid transparent;
}
.site__header__menu .menu-item a:hover,
.site__header__menu .menu-item a:focus-visible {
color: var(--text-color);
border-bottom: 0.2rem solid var(--secondary-color);
background-color: transparent; }
.site__header__menu .menu-item a:active {
color: var(--secondary-color);
border-bottom: 0.2rem solid transparent;
background-color: transparent; }
.site__header__menu .menu-item-type-custom {
padding: 0rem;
}
.site__header__menu .menu-item-type-custom a {
padding: 0.9rem 2.2rem;
color: var(--text-color);
border-bottom: 0rem;
}
.site__header__menu .menu-item-type-custom a:hover,
.site__header__menu .menu-item-type-custom a:focus-visible {
background-color: var(--secondary-color--dark);
color: var(--secondary-color--light);
box-shadow: 0rem 0.4rem 0.4rem #33333325;
border-bottom: 0rem;
}
.site__header__menu .menu-item-type-custom a:active {
background-color: var(--secondary-color--dark);
color: var(--text-color);
box-shadow: 0rem 0.4rem 0.4rem #33333325 inset;
border-bottom: 0rem;
}
}
@media screen and (min-width: 1440px) {
.site__header__menu {
font-size: 2.4rem;
}
.site__header__menu .menu-item {
padding-bottom: 0rem;
}
.site__header__menu .menu-item a {
padding: 1rem 0rem 0.5rem 0rem;
border-bottom: 0.3rem solid transparent;
}
.site__header__menu .menu-item a:hover,
.site__header__menu .menu-item a:focus-visible {
border-bottom: 0.3rem solid var(--secondary-color);
}
.site__header__menu .menu-item a:active {
border-bottom: 0.3rem solid transparent;
}
.site__header__menu .menu-item-type-custom a {
display: inline-block;
padding: 0.9rem 2.2rem;
color: var(--text-color);
text-transform: uppercase;
border-bottom: 0rem;
border-radius: 2.6rem;
font-size: 1.8rem;
}
.site__header__menu .menu-item-type-custom a:hover,
.site__header__menu .menu-item-type-custom a:focus-visible {
border-bottom: 0rem;
}
}/*/*//**//*/*/.searchmenu-input + .toggle-searchmenu-label .span-nochecked,
.searchmenu-input:checked + .toggle-searchmenu-label .span-checked { display: block; }
.searchmenu-input:checked + .toggle-searchmenu-label .span-checked { color: var(--primary-color--light); }
.searchmenu-input + .toggle-searchmenu-label .span-checked,
.searchmenu-input:checked + .toggle-searchmenu-label .span-nochecked { display: none; }
.toggle-searchmenu-label {
display: block;
width: 4.8rem;
height: 4.8rem;
position: absolute;
right: 7rem; 
top: 55%;
transform: translateY(-33%);
-o-transform: translateY(-33%);
-ms-transform: translateY(-33%);
-moz-transform: translateY(-33%);
-webkit-transform: translateY(-33%);
font-size: 2.2rem;
text-align: right;
cursor: pointer;
}
.toggle-searchmenu-label:hover,
.toggle-searchmenu-label:focus-visible {
color: var(--primary-color--light);
}
.toggle-searchmenu-label:active {
color: var(--primary-color);
}
.site__header__search { 
max-height: 0;
overflow: hidden;
transition: max-height 0.8s;
display: block;
position: relative;
top: var(--header-height);
box-shadow: 0 0.2rem 0.3rem var(--liver);
}
.searchmenu-input:checked ~ .site__header__search {/**/max-height: 75vh;
overflow: auto;
}
.site__header__search .search-form {
display:inline-flex;
width: 100%;
padding: 2.4rem 1.4rem 1.4rem 2.4rem;
} .site__header__search .menu { padding: 0 1rem 1rem 1rem; list-style-type: none;
font-size: 1.6rem;
font-weight: bold;
text-transform: uppercase;
display: block;
background-color: #333333; 
}
.menu-item-type-taxonomy {
display: block;
border-bottom: 0.2rem solid var(--liver);  
}
.menu-item-type-taxonomy:last-child{
border-bottom: 0rem;
}
.menu-item-type-taxonomy a {
display: block;
padding: 1.4rem 1.4rem 1.4rem 1.4rem;
}
.menu-item-type-taxonomy a:hover,
.menu-item-type-taxonomy a:focus-visible {
color: var(--text-color);
}
.menu-item-object-category a {
color: var(--category-color);
}
.menu-item-object-category a:hover,
.menu-item-object-category a:focus-visible {
background-color: var(--secondary-color);
}
.menu-item-object-category a:active {
background-color: var(--secondary-color--dark);
}
.menu-item-object-post_tag a {
color: var(--tag-color--light);
}
.menu-item-object-post_tag a:hover,
.menu-item-object-post_tag a:focus-visible {
background-color: var(--primary-color);
}
.menu-item-object-post_tag a:active {
background-color: var(--primary-color--dark);
}
@media screen and (min-width: 768px) {
.toggle-searchmenu-label {
right: 38rem;
}
.site__header__search { 
width: 36rem; 
position: absolute;
top: var(--header-height);
right: 35rem;
}
}
@media screen and (min-width: 1440px) {
.toggle-searchmenu-label {
right: 48rem;
}
.site__header__search { 
right: 46rem;
}
}   .site__footer {
width: 100%;
background-color: var(--background-color--footer);
padding: 2.5rem 0 0.7rem 0;
margin: auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 2rem;
} .social_links {
list-style-type: none;
display: flex;
margin-left: -4rem; gap: 3.2rem;
width: 100%;
}
.social_link {
display: inline-block;    
}
.social_link a {
display: flex;
height: 4.8rem;
text-decoration: none;
}
.social_link a i {
font-size: 2.4rem;
display: block;
padding: 1.2rem;
}
.social_link a:hover,
.social_link a:focus-visible {
color: var(--primary-color--light);
}
.social_link a:active {
color: var(--primary-color--dark);
}
.social_link a img {
height: 4.8rem;
width: 4.8rem;
border-radius: 50%;
padding: 1.2rem;
filter: opacity(1);
transition: filter 0.3s ease-in-out;
}
.social_link a:hover img,
.social_link a:focus-visible img {
filter:hue-rotate(185deg)  saturate(1) brightness(1);
}
.social_link a:active img {
filter:hue-rotate(202deg)  saturate(0.81) brightness(0.37);
}
.social_link_name {
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
left: -10000px;
top:auto;
width: 1px;
white-space: nowrap;
} .site__footer .menu {
list-style-type: none;
color: var(--primary-color--light);
font-size: 1.2rem;
margin-left: -4rem;
}
.site__footer .menu .menu-item {
display: inline-block;
}
.site__footer .menu .menu-item:nth-child(n+2)::before {
content: " / ";
}
.site__footer .menu .menu-item a {
color: var(--primary-color--light);   
}
.site__footer .menu .menu-item a:hover,
.site__footer .menu .menu-item a:focus-visible {
color: var(--text-color);
text-decoration: underline;
}
.site__footer .menu .menu-item a:active {
color: var(--primary-color);
text-decoration: none;
} .copyright {
font-size: 1.2rem;
}
.copyright a:hover, 
.copyright a:focus-visible {
color: var(--secondary-color);
text-decoration: underline;
}
.copyright a:active{
color: var(--secondary-color--dark);
text-decoration: initial;
}
@media screen  and (min-width: 768px) {
.site__footer {
gap: 3rem;
}
.social_links {
gap: 9.8rem;
}
.social_link a i {
font-size: 1.6rem;
padding: 0.6rem;
}
.social_link a img {
height: 3.2rem;
width: 3.2rem;
padding: 0.6rem;
}
.social_link_name {
border: 0;
height: auto;
margin: 0;
padding: 0.4rem 0 0.8rem 0;
overflow: auto;
position:static;
width: auto;
font-size: 2rem;
text-transform: uppercase;
}
img + .social_link_name {
margin-top: 0.1rem;
vertical-align: super;
}
.site__footer .menu,
.copyright {
font-size: 1.4rem;
}
}
@media screen  and (min-width: 1440px) {
.site__footer {
width: 144rem;
max-width: 144rem;
padding: 4.3rem 0 0.7rem 0;
}
.social_link a i {
font-size: 2rem;
padding: 0.6rem;
}
.social_link a img {
padding: 0.4rem;
}
.copyright {
font-size: 1.6rem;
}
}   .codingtricks_widget {
--widget-padding-left-n-right: 3rem;
width: 100%;
max-width: 45rem;
height: auto;
margin: 0 auto; 
padding: 2rem var(--widget-padding-left-n-right) 3.5rem var(--widget-padding-left-n-right);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2.7rem;
background-color: var(--background-color--welcome);
color: var(--text-color);
text-align: center;
border-radius: 1rem;
}
@media screen and (min-width: 768px) {
.codingtricks_widget {
--widget-tablet-width: 59rem;
max-width: var(--widget-tablet-width);
padding: 2rem 3rem 3.5rem 3rem;
}
}
@media screen and (min-width: 1440px) {
.codingtricks_widget {
max-width: 30rem;
height: auto;
margin: 0 auto;
padding: 2rem 3rem 3.5rem 3rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 2.7rem; text-align: center;
}
} .codingtricks_widget_author__name {
text-transform: uppercase;
font-size: 2rem;
font-weight: bold;
font-family: var(--author-font);
letter-spacing: 0.1rem;
}
.codingtricks_widget_author__biography p {
font-size: 1.4rem;
}
.codingtricks_widget_author__picture > img {
width: 12.6rem;
height: auto;
margin: 0 auto;
}
.codingtricks_widget_author__item:nth-child(1) {
order: 1;
}
.codingtricks_widget_author__item:nth-child(2) {
order: 2;
}
.codingtricks_widget_author__item:nth-child(3) {
order: 1;
}
.codingtricks_widget_author__item:nth-child(4) {
order: 3;
}
.codingtricks_widget_author__item:nth-child(5) {
order: 3;
}
@media screen and (min-width: 768px) { 
.codingtricks_widget.codingtricks_widget_author {
display: grid;
grid-template-columns: 10.7rem 16rem 6rem auto;
grid-template-rows: auto auto auto auto;
gap: 2.7rem;
grid-template-areas: 
"title . . ."
"picture bio bio bio"
". . signature signature"
". . . button";
justify-content: left;
align-content:start;
text-align: left;
}
.codingtricks_widget_author .single__sidebar__widget__title {
grid-area: "title";
} 
.codingtricks_widget_author__name {
grid-area: signature;
margin: 0 1.5rem 0 auto;
}
.codingtricks_widget_author__biography {
grid-area: bio;
align-self: normal;
}
.codingtricks_widget_author__biography p {
font-size: 1.4rem;
}
.codingtricks_widget_author__picture {
grid-area: picture;
align-self: start;
}
.codingtricks_widget_author__picture > img {
width: 9rem;
margin: 0;
margin-left: 1.5rem;    
}
.codingtricks_widget_author__link {
grid-area: button;
}
}
@media screen and (min-width: 1440px) {
.codingtricks_widget.codingtricks_widget_author {
display: flex; }
.codingtricks_widget_author__name {
text-transform: uppercase;
font-size: 2rem;
font-weight: bold;
margin: 0; }
.codingtricks_widget_author__picture {
align-self: center;
}
.codingtricks_widget_author__picture > img {
width: 12.6rem;
margin: 0 auto;
}
.codingtricks_widget_author__biography p {
text-align: center; font-size: 1.4rem;
}
} .codingtricks_widget_most-recent-articles__items {
list-style: none;
padding: 0;
align-items:flex-start;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2.5rem;
}
.codingtricks_widget_most-recent-articles__post {
display: block;
color: var(--text-color);
}
.codingtricks_widget_most-recent-articles__post-heading {
text-align: left;
font-size: 1.4rem;
padding-bottom: 0.5rem;
} .codingtricks_widget_most-recent-articles__post-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
width: 100%;
height: 7.5rem;
}
.codingtricks_widget_most-recent-articles__post-content .wp-post-image {
width: 7.5rem;
height:auto;
}
.codingtricks_widget_most-recent-articles__post-content_excerpt {
text-align: left;
font-size: 1.2rem;
width: 100%;
height: 7.5rem;
word-wrap: break-word;
overflow: hidden;
}
.codingtricks_widget_most-recent-articles__post a:hover,
.codingtricks_widget_most-recent-articles__post a:focus-visible{
color: var(--primary-color--light);
}
.codingtricks_widget_most-recent-articles__post:hover .wp-post-image,
.codingtricks_widget_most-recent-articles__post:focus-visible .wp-post-image {
filter: grayscale(100);
opacity: 0.5;
}
.codingtricks_widget_most-recent-articles__post:hover,
.codingtricks_widget_most-recent-articles__post:focus-visible {
transform: scale(0.95);
}
.codingtricks_widget_most-recent-articles__post:active {
transform: scale(0.75);
}
.codingtricks_widget_most-recent-articles__post a:active {
color: var(--primary-color--dark);
}
.codingtricks_widget_most-recent-articles__cta {
align-self: center;
}
@media screen and (min-width: 768px) {
.codingtricks_widget_most-recent-articles .single__sidebar__widget__title {
text-align: left;
}
.codingtricks_widget_most-recent-articles__items {
--widget-most-recent-articles-post-gap: 2.5rem;
flex-direction: row;
justify-content: space-between;
align-items:space-between;
gap: var(--widget-most-recent-articles-post-gap);
flex-wrap: wrap;
max-width: 100%;
}
.codingtricks_widget_most-recent-articles__post {
--widget-articles-post-width: calc((var(--widget-tablet-width) - (var(--widget-padding-left-n-right) *2) - var(--widget-most-recent-articles-post-gap)) / 2);
width: var(--widget-articles-post-width);
}
.codingtricks_widget_most-recent-articles__cta {
align-self: flex-end;
} 
}
@media screen and (min-width: 1440px) {
.codingtricks_widget_most-recent-articles__items {
flex-direction: column;
}
.codingtricks_widget_most-recent-articles__cta {
align-self: center;
}
} .codingtricks_widget_topics__content {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2.7rem;
}
.codingtricks_widget_topics .codingtricks_widget_topics__items {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin-left: -4rem;
}
.codingtricks_widget_topics__item a {
display: inline-block;
margin: 0 1.5rem 0.7rem 0;
padding: 0.2rem;
font-size: 1.4rem;
font-weight: bold;
text-transform: uppercase;
border-bottom: 2px solid transparent;
}
.codingtricks_widget_topics__item a > span {
color: var(--text-color);
font-weight: normal;
}
.codingtricks_widget_topics__link-category {
color: var(--secondary-color);
}
.codingtricks_widget_topics__link-tag {
color: var(--primary-color--light);
}
.codingtricks_widget_topics__item a:hover,
.codingtricks_widget_topics__item a:focus-within {
border-bottom: 2px solid;
}
.codingtricks_widget_topics__item a:active {
border-bottom: transparent;
}
.codingtricks_widget_topics__link-category:active {
color: var(--secondary-color--dark);
}
.codingtricks_widget_topics__link-tag:active {
color: var(--primary-color);
} .codingtricks_widget_topics .search-form__input {
background-color: var(--background-color--welcome);
} 
.codingtricks_widget_topics .search-form__input:hover,
.codingtricks_widget_topics .search-form__input:focus-visible {
background-color: var(--primary-color--light);
color: var(--text-color--dark);
}
.codingtricks_widget_topics .search-form__button {
background-color: var(--background-color--welcome);
top: 0.1rem;
left: 0.1rem;
}@font-face {
font-family: 'icomoon';
src:  url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/icomoon.eot?hqut3n);
src:  url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/icomoon.eot?hqut3n#iefix) format('embedded-opentype'),
url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/icomoon.ttf?hqut3n) format('truetype'),
url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/icomoon.woff?hqut3n) format('woff'),
url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/icomoon.svg?hqut3n#icomoon) format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-address-card:before {
content: "\e95c";
}
.icon-angles-down:before {
content: "\e95d";
}
.icon-angles-left:before {
content: "\e95e";
}
.icon-angles-right:before {
content: "\e95f";
}
.icon-angles-up:before {
content: "\e960";
}
.icon-arrow-left:before {
content: "\e961";
}
.icon-arrow-right:before {
content: "\e962";
}
.icon-bars:before {
content: "\e963";
}
.icon-bezier-curve:before {
content: "\e913";
}
.icon-board-user:before {
content: "\e900";
}
.icon-bootstrap:before {
content: "\e914";
}
.icon-camera:before {
content: "\e915";
}
.icon-chevron-left:before {
content: "\e964";
}
.icon-chevron-right:before {
content: "\e965";
}
.icon-chrome:before {
content: "\e916";
}
.icon-circle:before {
content: "\e966";
}
.icon-circle-chevron-down:before {
content: "\e967";
}
.icon-circle-chevron-left:before {
content: "\e968";
}
.icon-circle-chevron-right:before {
content: "\e969";
}
.icon-circle-chevron-up:before {
content: "\e96a";
}
.icon-circle-solid:before {
content: "\e96b";
}
.icon-circle-stroked:before {
content: "\e96c";
}
.icon-code:before {
content: "\e901";
}
.icon-codepen:before {
content: "\e906";
}
.icon-cogs:before {
content: "\e96d";
}
.icon-copyright:before {
content: "\e96e";
}
.icon-css3:before {
content: "\e917";
}
.icon-d3:before {
content: "\e918";
}
.icon-database:before {
content: "\e919";
}
.icon-desktop:before {
content: "\e96f";
}
.icon-docker:before {
content: "\e91a";
}
.icon-droplet:before {
content: "\e91b";
}
.icon-elementor:before {
content: "\e91c";
}
.icon-ellipsis:before {
content: "\e970";
}
.icon-english:before {
content: "\e92f";
}
.icon-envelope:before {
content: "\e971";
}
.icon-eraser:before {
content: "\e91d";
}
.icon-etsy:before {
content: "\e907";
}
.icon-excel:before {
content: "\e91e";
}
.icon-express:before {
content: "\e91f";
}
.icon-eye:before {
content: "\e920";
}
.icon-facebook:before {
content: "\e908";
}
.icon-figma:before {
content: "\e921";
}
.icon-filezilla:before {
content: "\e922";
}
.icon-fontforge:before {
content: "\e923";
}
.icon-free-code-camp:before {
content: "\e909";
}
.icon-gimp:before {
content: "\e924";
}
.icon-git:before {
content: "\e925";
}
.icon-github:before {
content: "\e90a";
}
.icon-gitlab:before {
content: "\e927";
}
.icon-globe:before {
content: "\e972";
}
.icon-home:before {
content: "\e973";
}
.icon-house:before {
content: "\e974";
}
.icon-html5:before {
content: "\e928";
}
.icon-illustrator:before {
content: "\e929";
}
.icon-image:before {
content: "\e975";
}
.icon-indesign:before {
content: "\e92a";
}
.icon-industry:before {
content: "\e902";
}
.icon-inkscape:before {
content: "\e92b";
}
.icon-instagram:before {
content: "\e90b";
}
.icon-italian:before {
content: "\e930";
}
.icon-jest:before {
content: "\e92c";
}
.icon-jquery:before {
content: "\e92d";
}
.icon-js:before {
content: "\e92e";
}
.icon-libroffice:before {
content: "\e932";
}
.icon-lightpad:before {
content: "\e933";
}
.icon-linkedin:before {
content: "\e90c";
}
.icon-mamp:before {
content: "\e934";
}
.icon-markdown:before {
content: "\e935";
}
.icon-medium:before {
content: "\e90d";
}
.icon-mobile:before {
content: "\e976";
}
.icon-mongodb:before {
content: "\e936";
}
.icon-more:before {
content: "\e903";
}
.icon-mysql:before {
content: "\e937";
}
.icon-nightwatch:before {
content: "\e938";
}
.icon-node:before {
content: "\e939";
}
.icon-paintbrush:before {
content: "\e93c";
}
.icon-palette:before {
content: "\e904";
}
.icon-paper:before {
content: "\e93e";
}
.icon-paper-plane:before {
content: "\e978";
}
.icon-pdfsambasic:before {
content: "\e93f";
}
.icon-pen:before {
content: "\e940";
}
.icon-pen-ruler:before {
content: "\e905";
}
.icon-pencil:before {
content: "\e941";
}
.icon-photoshop:before {
content: "\e942";
}
.icon-php:before {
content: "\e943";
}
.icon-phpmyadmin:before {
content: "\e944";
}
.icon-phpunit:before {
content: "\e945";
}
.icon-plus:before {
content: "\e979";
}
.icon-postman:before {
content: "\e946";
}
.icon-powerpoint:before {
content: "\e947";
}
.icon-quote-left:before {
content: "\e97a";
}
.icon-quote-right:before {
content: "\e97b";
}
.icon-radio-button-checked:before {
content: "\e97c";
}
.icon-radio-button-unchecked:before {
content: "\e97d";
}
.icon-react:before {
content: "\e948";
}
.icon-sass:before {
content: "\e949";
}
.icon-scanner:before {
content: "\e94a";
}
.icon-scissors:before {
content: "\e94b";
}
.icon-screwdriver-wrench:before {
content: "\e97e";
}
.icon-scribus:before {
content: "\e94c";
}
.icon-sketchbook:before {
content: "\e94d";
}
.icon-skype:before {
content: "\e94e";
}
.icon-slack:before {
content: "\e90e";
}
.icon-spanish:before {
content: "\e931";
}
.icon-sqlpowerarchitect:before {
content: "\e94f";
}
.icon-star:before {
content: "\e97f";
}
.icon-swatchbook:before {
content: "\e950";
}
.icon-symfony:before {
content: "\e951";
}
.icon-tablet:before {
content: "\e980";
}
.icon-tiktok:before {
content: "\e90f";
}
.icon-tools:before {
content: "\e981";
}
.icon-tools-nuxt:before {
content: "\e93a";
}
.icon-tools-nvidia:before {
content: "\e93b";
}
.icon-travisci:before {
content: "\e952";
}
.icon-twitter:before {
content: "\e910";
}
.icon-ui-more:before {
content: "\e977";
}
.icon-user:before {
content: "\e982";
}
.icon-vector-square:before {
content: "\e953";
}
.icon-visualstudiocode:before {
content: "\e954";
}
.icon-vuejs:before {
content: "\e955";
}
.icon-wacom:before {
content: "\e956";
}
.icon-whatsapp:before {
content: "\e957";
}
.icon-windows:before {
content: "\e958";
}
.icon-word:before {
content: "\e959";
}
.icon-wordpress:before {
content: "\e95a";
}
.icon-xd:before {
content: "\e95b";
}
.icon-xmark:before {
content: "\e983";
}
.icon-youtube:before {
content: "\e912";
}
.icon-french:before {
content: "\e911";
}
.icon-testing-library:before {
content: "\e926";
}
.icon-search:before {
content: "\e93d";
}
.icon-arrow-down:before {
content: "\e984";
}
.icon-arrow-up:before {
content: "\e985";
}@font-face {
font-family: 'LineScript';
src: url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/LineScript.eot);
src: url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/LineScript.eot?#iefix) format('embedded-opentype'),
url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/LineScript.svg#LineScript) format('svg'),
url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/LineScript.ttf) format('truetype'),
url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/LineScript.woff) format('woff'),
url(//coding-tricks.sandrinemanguy.com/wp-content/themes/codingtricks/assets/fonts/LineScript.woff2) format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}main.single {
padding:0;
gap: 0;
width: 100%;
margin: var(--header-height) auto 0 auto;
}
@media screen and (min-width: 768px) {
body {
background-color: var(--background-color);
}
main.single {
width: 100%;
max-width: 80rem;
background-color: var(--background-color);
}
}
@media screen and (min-width: 1440px) {
body {
background-color: initial;
}
main.single {
width: 144rem;
max-width: 144rem;
}
}
.single-post {
width: 100%;
margin: 0 auto;
}    .single-post__header {
padding: var(--single-header-padding-top) var(--single-header-padding-left-n-right) var(--single-header-padding-bottom) var(--single-header-padding-left-n-right);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.4rem;
background-color: var(--primary-color--dark)!important;
}
.single-post__header .post-categories {
margin-left: -4.5rem; 
}
.single-post__header .post-categories a {
color: var(--secondary-color);
display: inline-block;
}
.single-post__header .post-categories a:active {
color: var(--secondary-color--dark);
border-bottom: initial;
}
.single-post-title {
text-shadow: var(--text-shadow) ;
padding-bottom: 0.5rem;
}
.single-post-series,
.single-post-info {
font-size: 1.2rem
}
.single-post__header .post-tag a {
color: var(--primary-color--light);
}
.single-post__header .post-tag a:hover,
.single-post__header .post-tag a:focus-visible {
border-bottom-color: var(--primary-color--light);
}
.single-post__header .post-tag a:active {
color: var(--primary-color);
}
@media screen and (min-width: 768px) {
.single-post__header {
gap: 1.4rem;
}
.single-post-series,
.single-post-info {
font-size: 1.4rem
}
}
@media screen and (min-width: 1440px) {
.single-post__header {
gap: 3.4rem;
margin-bottom: 3rem;
}
.single-post-series,
.single-post-info {
font-size: 1.6rem
}
}   .single-post__content {
display: flex;
flex-direction: column;
gap: 3.2rem;
margin-top: 0;
padding: var(--single-content-padding-top) var(--single-content-padding-left-n-right) var(--single-content-padding-bottom) var(--single-content-padding-left-n-right); 
background-color: var(--background-color--post);
color: var(--text-color--dark);
}
.post-introduction {
padding-bottom: 3.2rem;
}
.single-post__content h2 {
padding: 3.2rem 0 0.2rem 0;
}
.post-conclusion
{ 
font-size: 1.4rem;
}
.single-post__content h6 {
color: var(--primary-color--dark);
}
.single-post__content a,
.post-sources a,
.post-series a {
font-weight: bold;
}
.single-post__content h3,
.single-post__content h4,
.single-post__content h5,
.single-post__content h6 {
padding: 1.4rem 0 0.2rem 0;
}
.post-conclusion {
padding-top: 3.2rem;
}
.single-post__content p,
.single-post__content ul,
.single-post__content ol {
margin: 0rem;
width: 100%
}
.single-post__content p {
padding-bottom: 0.5rem;
}
.single-post__content ul,
.single-post__content ol {
padding-bottom: 2.5rem;
}
.single-post__content hr{
color: var(--primary-color);
}
.single-post__content a,
.post-sources a,
.post-series a {
color: var(--primary-color--dark);
}
.single-post__content a:hover,
.single-post__content a:focus-visible {
text-decoration: underline;
color: var(--primary-color);
}
.single-post__content a:active {
text-decoration: initial;
color: var(--primary-color--dark);
}
.single-post__content code {
background-color: var(--background-color--summary);
color: var(--primary-color--dark);
}
@media screen and (min-width: 768px) {
main.single-post__content {
gap: 4rem;
}
.single-post__content h2 {
padding-top: 4rem;
}
.post-conclusion {
font-size: 1.6rem;
}
.single-post__content h3,
.post-conclusion {
padding-top: 2.1rem;
}
.single-post__content h4 {
padding-top: 1.8rem;
}
.single-post__content h5 {
padding-top: 1.6rem;
}
.single-post__content h6 {
padding-top: 1.4rem;
}
}
@media screen and (min-width: 1440px) {
.single-post__container {
display: flex;
justify-content: space-between;
margin: 0 var(--single-header-padding-left-n-right);
}
.single-post__content,
.post-sources,
.post-series,
.site__navigation,
.comments-section {
width: 85.8rem;
}
.post-conclusion {
font-size: 1.8rem;
}
.post-conclusion {
padding-top: 3.2rem;
}
}   .single-post__content div[id*="attachment"],
.single-post__content iframe  {
width: calc( 100% - (var(--single-inserted-element-spacing-left-n-right) * 2) ) !important; }
.single-post__content div[id*="attachment"]  {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 var(--single-inserted-element-spacing-left-n-right);
}
.single-post__content div > img,
.single-post__content p > img {
display:block;
width: 100%;
height: auto;
}
.single-post__content div > img {
padding: var(--single-inserted-element-spacing) 0 0.5rem 0;
}  .single-post__content p[id*="attachment"].wp-caption-text {
text-align: center;
font-size: 1rem;
padding-bottom: var(--single-inserted-element-spacing);
}
.single-post__content p > img {
padding: var(--single-inserted-element-spacing) var(--single-inserted-element-spacing-left-n-right) calc( var(--single-inserted-element-spacing) + 0.5rem ) var(--single-inserted-element-spacing-left-n-right);
}
.single-post__content iframe {
margin: var(--single-inserted-element-spacing) var(--single-inserted-element-spacing-left-n-right) calc( var(--single-inserted-element-spacing) + 0.5rem ) var(--single-inserted-element-spacing-left-n-right) !important;
}
@media screen and (min-width: 768px) {   
.single-post__content p[id*="attachment"].wp-caption-text {
font-size: 1.2rem;
}
} .single-post__content blockquote,
.single-post__content figure > blockquote,
.single-post__content blockquote + figcaption {
width: 70%;
}
.single-post__content blockquote,
.single-post__content blockquote + figcaption {
margin: 0 auto 3rem 5.2rem;
}
.single-post__content figure > blockquote {
margin: 0 auto 1rem 5.2rem;
}
.single-post__content blockquote,
.single-post__content figure > blockquote {
position: relative;
padding-top: 3.2rem;
}
.single-post__content blockquote::before,
.single-post__content blockquote::after {
font-size: 22rem;
font-weight: bold;
font-style: italic;
color: var(--background-color--summary);
position: absolute;
}
.single-post__content blockquote::before {
content: '\201C';
top: -6.5rem;
left: -4.5rem;
}
.single-post__content blockquote::after {
content: '\201D';
bottom: -20rem;
right: 0rem;
}
.single-post__content blockquote::before,
.single-post__content blockquote::after,
.single-post__content blockquote p {
font-weight: bold;
font-style: italic;
}
.single-post__content blockquote p {
font-size: 1.8rem;
color: var(--primary-color);
}
.single-post__content blockquote + figcaption {
font-size: 1rem;
font-weight: bold;
}
.single-post__content blockquote + figcaption cite {
font-weight: normal;
font-style: normal;
}
@media screen and (min-width: 768px) {
.single-post__content blockquote,
.single-post__content figure > blockquote,
.single-post__content blockquote + figcaption {
width: 50%;
}
.single-post__content blockquote,
.single-post__content blockquote + figcaption {
margin: 0 auto 3rem 9rem;
}
.single-post__content figure > blockquote {
margin: 0 auto 1rem 9rem;
}
.single-post__content blockquote {
padding-top: 4.5rem;
}
}
@media screen and (min-width: 1440px) { 
.single-post__content blockquote,
.single-post__content figure > blockquote,
.single-post__content blockquote + figcaption {
width: 55rem;
}
} .single-post__content div.code {
background-color: var(--background-color--summary);
color: var(--primary-color--dark);
font-size: 1.4rem; margin: calc(var(--single-inserted-element-spacing-left-n-right) / 2) var(--single-inserted-element-spacing-left-n-right);
padding: 1.5rem;
}
.single-post__content ul + div.code {
margin: calc( -2.5rem + (var(--single-inserted-element-spacing-left-n-right) / 2)) var(--single-inserted-element-spacing-left-n-right) calc(var(--single-inserted-element-spacing-left-n-right) / 2) var(--single-inserted-element-spacing-left-n-right);
}
@media screen and (min-width: 768px) {
.single-post__content div.code {
font-size: 1.6rem;
}
} .post-summary {
position: relative;
margin: 0 1rem;
padding: 1.5rem 2rem 2rem 2rem;
background-color: var(--background-color--summary);
color: var(--text-color--dark);
}
.post-summary-heading {
font-size: 1.4rem;
font-weight: bold;
display: inline-block;
padding-bottom: 0.8rem;
}
.toggle-summary-input + .toggle-summary-label .span-nochecked,
.toggle-summary-input:checked + .toggle-summary-label .span-checked { display: block; }
.toggle-summary-input + .toggle-summary-label .span-checked,
.toggle-summary-input:checked + .toggle-summary-label .span-nochecked { display: none; }
.toggle-summary-label {
display: block;
width: 4.8rem;
height: 4.8rem;
position: absolute;
right: 2rem;
top: 3rem;
transform: translateY(-33%);
-o-transform: translateY(-33%);
-ms-transform: translateY(-33%);
-moz-transform: translateY(-33%);
-webkit-transform: translateY(-33%);
font-size: 1.4rem;
text-align: right;
cursor: pointer;  
}
.toggle-summary-label i {
color: var(--primary-color);   
}
.toggle-summary-label i:hover {
color: var(--primary-color--light);
}
.toggle-summary-label i:active {
color: var(--primary-color--dark);
}
.post-summary__nav { 
max-height: 0;
overflow: hidden;
transition: max-height 0.8s;
display: block;
position: relative;
}
.toggle-summary-input:checked ~ .post-summary__nav {
max-height: 1000rem;
}
.post-summary .summary {
list-style: none; margin-left: -3rem;
padding-bottom: 0;  }
.summary__level--3{
margin-left: 0.7rem;
}
.summary__level--4 {
margin-left: 2rem;
}
.summary a {
color: var(--text-color--dark);
font-weight: normal;
display: block;
padding: 0.8rem 0;
transform: scale(1);
transition: font-size 0.2s ease-in;
}
.summary a:hover {
color: var(--primary-color);
font-size: 1.4rem;
font-weight: bold;
}
.summary a:active {
color: var(--primary-color);
font-size: 0.8rem;
font-weight: initial;
}
.single h2, 
.single h3,
.single h4 {
scroll-margin-top: calc(var(--header-height) + 4rem);
}
@media screen and (min-width: 768px) {
.post-summary {
margin: 0 2rem;
}
.summary a {
font-size: 1.4rem;
}
.summary a:hover {
font-size: 1.6rem;
}
.summary a:active {
font-size: 1rem;
}
}
@media screen and (min-width: 1440px) {
.post-summary-heading {
font-size: 1.6rem;
}
.summary a {
padding: 0.3rem 0;
}
} .post-sources,
.post-series {
padding: 0 var(--single-content-padding-left-n-right) var(--single-content-padding-bottom) var(--single-content-padding-left-n-right); 
background-color: var(--background-color--post);
color: var(--text-color--dark);
}
.post-sources__block,
.post-series__block {
color: var(--text-color--dark);
margin: 0 1rem;
padding: 1.5rem 2rem 3rem 2rem;
}
.post-sources__block {
background-color: var(--background-color--sources);
}
.post-series__block {
background-color: var(--background-color--summary);
}
.post-sources__block-heading,
.post-series__block-heading {
font-size: 1.4rem;
font-weight: bold;
padding-bottom: 0.8rem;
}
.post-series-name {
font-style: italic;
}
.post-sources__block ul,
.post-series__block ul {
margin: 0 0 0 -2rem;
padding-bottom: 0; font-size: 1.2rem;
line-height: 150%;
}
.post-sources__block a:hover,
.post-sources__block a:focus-visible,
.post-series__block a:hover,
.post-series__block a:focus-visible {
text-decoration: underline;
}
.post-sources__block a:active,
.post-series__block a:active {
text-decoration: initial;
color: var(--primary-color--dark);
}
@media screen and (min-width: 768px) {   
.post-sources__block-heading,
.post-series__block-heading {
font-size: 1.6rem;
}
.post-sources__block ul,
.post-series__block ul {
font-size:1.4rem;
}
}
@media screen and (min-width: 1440px) {
.post-sources__block,
.post-series__block {
margin: 0 2rem
}
} .site__navigation {
padding: 1rem 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.4rem;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: var(--text-color--dark);
background-color: var(--background-color--post);
}
.site__navigation__next {
align-self: flex-end;
text-align: right;
}
.site__navigation__prev a,
.site__navigation__next a {
color: var(--primary-color);
font-size: 1.2rem;
text-transform: initial;
}
.site__navigation__prev a:hover,
.site__navigation__next a:hover,
.site__navigation__prev a:focus-visible,
.site__navigation__next a:focus-visible {
text-decoration:underline ;
}
.site__navigation__prev a:active,
.site__navigation__next a:active {
color: var(--primary-color--dark);
text-decoration:initial ;
}
@media screen and (min-width: 768px) {
.site__navigation {
padding: 3rem 4rem 1.5rem 4rem;
flex-direction: row;
gap: auto;
font-size: 1.2rem;
}
.site__navigation__prev a,
.site__navigation__next a {
font-size: 1.4rem;
}
}
@media screen and (min-width: 1440px) {
.site__navigation {
padding: 3rem 5rem;
font-size: 1.4rem;
}
.site__navigation__prev a,
.site__navigation__next a {
font-size: 1.8rem;
}
} .comments-section {
width: 100%;
}
.comments-show-hide {
background-color: var(--background-color--post);
padding: 2.5rem 1.5rem;
}
.comments-show-hide .load-comments,
.comments-show-hide .show-comments,
.comments-show-hide .hide-comments {
color: var(--text-color);
}
.comments,
.hide-comments, 
.show-comments {
display: none;
}
.comments {  flex-direction: column;
gap: 3.6rem;
width: 100%;
background-color: var(--background-color);
color: var(--text-color);
padding: 3rem 1.5rem;
}
.comments__title,
.coments__none,
.must-log-in,
.comment-reply-title {
font-weight: bold;
text-align: center;
}
.comments__title {
font-size: 1.4rem;
text-transform: uppercase;
}
.coments__none,
.must-log-in {
font-size: 1.2rem;  
}
.coments__none {
color: var(--primary-color--light);
}
.comments__list,
.comment.parent .children,
.comment-form {
display: flex;
flex-direction: column;
}
.comments__list {
list-style: none;
margin-left: -4rem;
gap: 4rem;
font-weight: normal;
}
.comments__list,
.comment-notes,
.logged-in-as {
font-size: 1.2rem;
}
.comment-author.vcard > img {
display: none;
}
.comment-author.vcard .url {
text-transform: uppercase;
font-weight: bold;
font-style: normal;
}
.comment-author.vcard .url:hover,
.comment-author.vcard .url:focus-visible {
color: var(--primary-color--light);
text-decoration: underline;
}
.comment-author.vcard .url:active {
color: var(--primary-color--dark);
text-decoration: initial;
}
.comment-author.vcard .says,
.comment-meta {
font-size: 1rem;
}
.comment-meta {
padding-bottom: 1rem;
}
.comment-edit-link,
.comment-reply-link,
.comment-reply-login,
.must-log-in a,
#cancel-comment-reply-link,
.logged-in-as a,
.signup-link,
.login-link {
color: var(--primary-color--light)
}
.comment-edit-link:hover,
.comment-reply-link:hover,
.comment-reply-login:hover,
.must-log-in a:hover
.comment-edit-link:focus-visible,
.comment-reply-link:focus-visible,
.comment-reply-login:focus-visible,
.must-log-in a:focus-visible,
#cancel-comment-reply-link:hover,
#cancel-comment-reply-link:focus-visible,
.logged-in-as a:hover,
.logged-in-as a:focus-visible,
.signup-link:hover,
.signup-link:focus-visible,
.login-link:hover,
.login-link:focus-visible {
text-decoration: underline;
}
.comment-edit-link:active,
.comment-reply-link:active,
.comment-reply-login:active,
.must-log-in a:active,
#cancel-comment-reply-link:active,
.logged-in-as a:active,
.signup-link:active,
.login-link:active {
color: var(--primary-color--dark);
text-decoration: initial;
}
.comment-body + .children {
margin-top: 1.5rem;
list-style: none;
}
.comment.parent .children {
gap: 2.5rem;
}
.comment-reply-title {
font-size: 1.4rem;
padding-bottom: 2.5rem;
}
.comment-form {
gap: 1rem;
}
.comment-form .required {
color: var(--primary-color--light);
}
.email-notes,
.required-field-message {
display: block;
}
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
position: relative;
}
.comment-form-comment > label,
.comment-form-author > label,
.comment-form-email > label,
.comment-form-url > label {
display: block;
width: calc(100% - 0.2rem);
height: 2rem;
color: var(--text-color);
padding: 0rem 1.5rem 0.3rem 1rem;
font-weight: normal;
font-size: 1.2rem;
opacity: 0.75;
position: absolute;
top: 0.2rem;
left: 0.1rem;
transition-duration: 300ms;
}
.comment-form-comment:hover > label,
.comment-form-author:hover > label,
.comment-form-email:hover > label,
.comment-form-url:hover > label {
color: var(--text-color--dark);
opacity: 1;
font-weight: bold;
}
.comment-form-comment:hover > label .required,
.comment-form-author:hover > label .required,
.comment-form-email:hover > label .required,
.comment-form-url:hover > label .required {
color: var(--secondary-color);
}
.comment-form-comment:focus-within > label,
.comment-form-author:focus-within > label,
.comment-form-email:focus-within > label,
.comment-form-url:focus-within > label
{
color: var(--text-color);
opacity: 0.75;
font-weight: normal;
}
.comment-form-comment > textarea,
.comment-form-author > input,
.comment-form-email > input,
.comment-form-url > input {
display: block;
width: 100%;
height: 4.8rem;
border-radius: 0.5rem;
border-width: 0.1rem;
border-color: var(--text-color);
background-color: var(--background-color);
padding: 1.9rem 1.5rem 0.9rem 1rem;
font-size: 1.4rem;
font-weight: bold;
color: var(--text-color);
appearance: none;
}
.comment-form-comment > textarea {
height: 14.8rem;
resize: none;
}
.comment-form-comment > textarea:hover,
.comment-form-author > input:hover,
.comment-form-email > input:hover,
.comment-form-url > input:hover {
background-color: var(--primary-color--light);
color: var(--text-color--dark);
}
.comment-form-comment > textarea:focus,
.comment-form-author > input:focus,
.comment-form-email > input:focus,
.comment-form-url > input:focus    {
border-color: var(--primary-color--light);
background-color: initial;
color: var(--text-color);
}
.form-submit {
align-self: flex-end;
padding: 0.6rem 0;
}
.form-submit .submit {
display: block;
padding: 0.9rem 2.2rem;
border-radius: 1.8rem;
border-width: 0;
font-size: 1.4rem;
line-height: 0%;
font-weight: 700;
text-transform: uppercase;
text-align: center;
height: 3.6rem;
color: var(--text-color);
background-color: var(--primary-color);
cursor: pointer;
transform: scale(1);
transition: transform 0.01s ease-in; 
}
.comments .signup-login-links {
text-align: center;
font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
.comments-show-hide {
padding: 2.5rem 3rem 5rem 3rem;
}
.comments {
width: 43rem;
margin: 0 auto;
padding: 5rem 0;
gap: 6.3rem;
}
.comments__title,
.comment-reply-title {
font-size: 1.6rem;
}
.comments__list,
.comment-notes,
.logged-in-as {
font-size: 1.4rem;
}
.comment-author.vcard .says,
.comment-meta {
font-size: 1.2rem;
}
}
@media screen and (min-width: 1440px) {    
.comments-show-hide {
padding: 2.5rem 5rem 5rem 5rem;
}
.comments__title,
.comment-reply-title {
font-size: 1.8rem;
}
.comments__list {
font-size: 1.6rem;
}
} .single__sidebar {
display: flex;
flex-direction: column;
gap: 3rem;
width: 100%;
padding: 5.2rem 1.5rem 6.5rem 1.5rem;
background-color: var(--background-color--post);
}
.single__sidebar__widget__title {
font-size: 1.4rem;
font-weight: bold;
align-self: flex-start;
}
@media screen and (min-width: 768px) {
.single__sidebar {
padding: 2.7rem 3rem 4.7rem 3rem;
}
}
@media screen and (min-width: 1440px) {    
.single__sidebar {
width: 30rem;
padding: 0;
background-color: var(--background-color);
}  
}