: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.legal {
gap: 0;
padding-top: 3.8rem;
}
.legal h1 {
color: var(--primary-color--light);
padding-bottom: calc( var(--spacing-height) / 2 );
}
.legal h2, .legal h3 {
margin-top: calc( var(--spacing-height) / 2 );
padding-bottom: calc( var(--spacing-height) / 4 );
}
.legal address {
font-size: 1.4rem;
}
.legal p {
line-height: 143%;
padding-bottom: calc( var(--spacing-height) / 2 );
}
.legal address {
padding-left: var(--spacing-height);
}
.legal ul {
list-style: none;
}
.legal a {
text-decoration: none;
}
.legal a:hover {
color: var(--primary-color--light);
text-decoration: underline;
}
.legal a:active {
color: var(--primary-color);
text-decoration: none;
}
@media screen and (min-width: 768px) {
main.legal {
padding-top: 4.8rem;
}
.legal address {
font-size: 1.6rem;
}
}
@media screen and(min-width: 1440px) {
.legal address {
font-size: 1.8rem;
}
}