@media (max-width: 900px) {
      header > .input-toggle-menu, header > .bg-mobile {
            box-shadow: var(--button-box-shadow);
      }
}









footer {
    margin-top: 64px;
}

section > h2 {
    text-align: center;
}

#introduction {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
}

#introduction > *:first-child {
    flex-grow: 1;
    justify-content: center;
}

#introduction .corners-effect {
    width: 100%;
    position: relative;
}

#introduction .corners-effect {
    margin: 32px 0;
    padding: 32px 42px 18px 42px;
    position: 0;
}

#introduction .corners-effect > * {
    z-index: 2;
    position: relative;
}

#introduction .corners-effect:after, #introduction .corners-effect:before {
    z-index: 1;
    position: absolute;
    transition: width 0.8s cubic-bezier(0.175, 1.5, 0.32, 1.01), height 0.8s cubic-bezier(0.175, 1.5, 0.32, 1.01), border-width 0.2s ease-in-out;

    
    height: 12%;
    width: 22%;
    --border: 3px var(--accent-color) solid;
}

#introduction .corners-effect:after {
    content: "";
    border-top: var(--border);
    border-right: var(--border);
    top: 0;
    right: 0;
    border-top-right-radius: 12px;
}

#introduction .corners-effect:before {
    content: "";
    border-bottom: var(--border);
    border-left: var(--border);
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 12px;
}

#introduction .corners-effect:hover:after, #introduction .corners-effect:hover:before {
    /* height: 24%; */
    /* width: 32%; */
    /* border-width: 3px; */
}

.arrow-more {
    height: 104px;
    padding: 16px;
    width: auto !important;
    margin-top: 16px !important;
    transition: opacity 0.3s ease-in-out 0.1s;
    transition: all 0.2s;
    cursor: pointer;
}

.arrow-more > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arrow-more > * {
    margin: 0 auto;
}
.arrow-more img {
    height: 48px;
    width: 48px;
    scale: 1;
}

.arrow-more:hover {
    transform: scale(1.1) translateY(8px);
}

.projects {
    margin-top: 32px;
    min-height: 100vh;
    width: 100%;
}

.projects h2 {
    margin: 16px 0 8px 0;
    padding: 0;
}

.projects > .grid {
    margin-top: 2px;
    /* column-gap: 48px; */
    /* row-gap: 44px; */
}

.projects article .material-symbols-outlined {
    font-size:  1.16em;
}

.projects article .links > * {
    margin-right: 18px;
}

.projects article {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 12px 32px;
    /* box-shadow: var(--box-shadow); */
    border-radius: 28px;
    margin: 20px 0;
    font-size: 0.95em;
}

.projects h3 {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 16px;
    font-size: 1.6em;
}

.projects h4 {
    font-size: 0.9em;
    margin-bottom: 8px;
    margin-top: 12px;
}

.projects article > *:first-child {
    flex: 1;
    padding-right: 24px;
    padding-top: 10px;
    padding-bottom: 12px;
}

.projects article > *:nth-child(2) {
    padding: 0 8px 0 10px;
}

.projects article {
    margin-bottom: 32px;
    padding-bottom: 12px;
}

.projects article p, .projects article ul {
    margin-top: 4px;
}

.projects article > * {
    z-index: 2;
    flex: 2;
}

/* .projects article:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 28px;
    background-color: var(--accent-color);
    z-index: 1;
    opacity: 0.04;
} */

#input-toggle-theme:checked ~ * .projects article:before {
    opacity: 0.06;
}

.projects article > h3 {
    font-size: 1.10em;
}

.projects article img {
    max-width: 100%;
}

.projects article ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 !important;
    padding: 0;
    padding-bottom: 8px;
}

.projects article ul > li{
    margin: 2px 4px 2px 0;
    padding: 1px 10px;
    border-radius: 14px;
    border: 1px var(--text-color) solid;
    font-size: 0.62em;
}

.projects article > .space {
    flex-grow: 1;
    min-height: 8px;
}

.projects article p {
    margin: 8px 0;
    font-size: 0.78em;
}

.projects .underline {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

.projects .underline > .material-symbols-outlined {
    margin-left: 4px;
}

.projects article button, .projects article a, .projects article .button-text {
    position: relative;
    z-index: 2;
    font-size: 0.80em;
    font-weight: 600;
    margin-left: 0;
    margin-right: 0;
    padding: 6px 0;
}

#contact > .container {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: center;
}

#contact > .container > form {
    flex: 4 1 auto;
    padding: 16px 0 16px 0;
}

#contact > .container > address {
    flex: 1 1 auto;
    list-style: none;
    width: fit-content;
    padding-top: 24px;
}

#contact > .container > address ul, #contact > .container > address li {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#contact > .container > address > ul {
    list-style: none;
    padding-inline-start: 0;
    display: flex;
    justify-content: space-around;
}

#contact > .container > address .underline:before {
    --horizontal-padding: 2px !important;
}

#contact > .container ul > li {
    margin-top: 4px;
    margin-bottom: 18px;
    width: 100%;
}

#contact > .container ul > li > a {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: 500;
    font-size: 0.8em;
    width: 100%;
}

#contact > .container ul > li > a > div {
    display: flex;
/*    margin-right: 8px;*/
}

/*
#contact > .container > ul > li:hover .rounded-icon {
	background-color: #CCC;
}

#input-toggle-theme:checked ~ #main #contact > .container > ul > li:hover .rounded-icon {
	background-color: #333;
}
*/

#contact > .container ul > li img {
	width: 100%;
	height: 100%;
	filter: invert(0.7);
	transition: all 0.2s;
}

#input-toggle-theme:checked ~ #main #contact > .container > ul > li img {
	filter: invert(0.2);
}

/*
#contact > .container > ul > li:hover img {
	filter: invert(0.8);
	transform: scale(1.1);
}
*/

/*
#input-toggle-theme:checked ~ #main #contact > .container > ul > li:hover img {
	filter: invert(0);
}
*/



@keyframes grid-item-hide {
    0% {
        position: relative;
        position: block;
        opacity: 1;
    }
    99% {
        position: relative;
        display: block;
        width: auto;
        height: auto;
    }
    100% {
        position: absolute;
        display: none;
        opacity: 0;
        width: 0;
        height: 0;
    }
}
@keyframes grid-item-show {
    0% {
        position: relative;
        display: none;
        opacity: 0;
    }
    1% {
        position: relative;
        display: block;
    }
    100% {
        position: relative;
        display: block;
        opacity: 1;
    }
}
.filter {
    --hover-box-shadow: 1px 0 12px 1px #777;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 24px 0 18px 0;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 16px;
    row-gap: 4px;
}

.filter .category-box {
    margin: 6px 0;
    border-radius: 28px;
    padding: 8px 16px;
    border: 2px var(--text-color) solid;
    font-size: 0.70em;
    transition: all 0.2s ease-in-out;
    opacity: 0.6;
}

.filter .category-box {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.filter input {
    width: 1.1em;
    display: none;
}

.filter .category-box:hover {
    box-shadow: var(--hover-box-shadow);
}

.filter input:checked + .category-box {
    border-color: var(--accent-color) !important;
    background-color: var(--accent-color-alpha) !important;
    opacity: 1;
}

.filter input:checked + .category-box > img {
    opacity: 1;
}

.projects {
    padding-top: 0;
}

.projects > .grid > article {
/*                        display: none;*/
    /* animation-name: grid-item-hide; */
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

.projects > .grid > article > *:nth-child(2) {
    /* --width: 94%; */
    /* max-width: var(--width); */
    /* min-width: var(--width); */
    /* width: var(--width); */
    margin: 0 auto;
}

.confidential {
    width: 100%;
    padding: 36px 0;
    justify-content: center;
    align-items: center;
    background-color: #6960db00;
    border: none;
}

.confidential > img {
    width: 42px;
}

.no-animations > * {
    animation-duration: 0s !important;
}

.filter > * img {
    width: 24px;
    filter: invert(0.8);
    margin-right: 4px;
    transition: opacity 0.2s ease-in-out;
    opacity: 0.3;
}

/* #input-toggle-theme:checked ~ * .filter > * img {
    filter: none;
    opacity: 1;
}

input.category-mobile-apps:checked ~ .grid .category-mobile-apps {
    animation-name: grid-item-show;
}

input.category-mobile-apps:checked ~ .filter > .category-mobile-apps img {
    opacity: 1;
}

input.category-mobile-apps:checked ~ .filter > .category-mobile-apps {
    border-color: var(--accent-color) !important;
    background-color: var(--accent-color-alpha) !important;
    opacity: 1;
}

input.category-web-apps:checked ~ .grid .category-web-apps {
    animation-name: grid-item-show;
}

input.category-web-apps:checked ~ .filter > .category-web-apps img {
    opacity: 1;
}

input.category-web-apps:checked ~ .filter > .category-web-apps {
    border-color: var(--accent-color) !important;
    background-color: var(--accent-color-alpha) !important;
    opacity: 1;
}

input.category-games:checked ~ .grid .category-games {
    animation-name: grid-item-show;
}

input.category-games:checked ~ .filter > .category-games img {
    opacity: 1;
}

input.category-games:checked ~ .filter > .category-games {
    border-color: var(--accent-color) !important;
    background-color: var(--accent-color-alpha) !important;
    opacity: 1;
} */

#introduction .links {
    margin-top: 64px;
    width: 100%;
    justify-content: flex-end;
    margin-bottom: 16px;
    gap: 24px;
}

#introduction .links > * {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    font-size: 0.86em;
    font-weight: normal;
}

#introduction .links > * img {
    margin-right: 6px;
}

#about > p > br {
    margin-bottom: 10px;
}

.skills {
    font-size: 0.96em;
}

.menu-dots, .menu-dots a {
	--menu-dots-left: calc((var(--page-margin) + var(--page-content-margin)) / 2);
	--menu-dots-left: 16px;
}
.menu-dots {
	z-index: 16;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: var(--menu-dots-left);
}

.menu-dots .mlist a {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 4px 8px 4px 4px;
	margin: 6px 0;
	transition: transform 0.4s cubic-bezier(0.175, 1.5, 0.32, 1.01);
	position: relative;
}

.menu-dots:hover .mlist a {
	padding-right: 64px;
}

.menu-dots .mlist .item {
	display: block;
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 16px;
	background-color: black;
	transition: all 0.2s ease-out;
	opacity: 0.5;
	z-index: 1;
}

.menu-dots .mlist a:hover .item {
	background-color: #222;
	opacity: 1 !important;
}

.menu-dots .mlist a.active .item {
	background-color: var(--accent-color) !important;
}

.menu-dots.hidden * {
	pointer-events: none;
}

.menu-dots.hidden .mlist a {
	/* --menu-dots-left: calc((var(--page-margin) + var(--page-content-margin)) / 2); */
	transform: translateX(calc(var(--menu-dots-left) * -1 - 100%));
}

.menu-dots .mlist a:nth-child(1) {
	transition-delay: 0s;
}

.menu-dots .mlist a:nth-child(2) {
	transition-delay: 0.04s;
}

.menu-dots .mlist a:nth-child(3) {
	transition-delay: 0.08s;
}

.menu-dots .mlist a:nth-child(4) {
	transition-delay: 0.12s;
}

.menu-dots .mlist a:nth-child(5) {
	transition-delay: 0.16s;
}

.menu-dots .mlist a > .label {
	pointer-events: none;
	opacity: 0;
	font-size: 0.6em;
	position: absolute;
	left: 24px;
	width: max-content;
	transition: opacity 0.15s ease-out, transform 0.15s cubic-bezier(0.175, 1.5, 0.32, 1.01);
	background-color: var(--accent-color-2);
	padding: 8px;
	border-radius: 12px;
	transform: translateX(-24px);
    box-shadow: 0 0 3px 1px var(--accent-color-2);
}

.menu-dots .mlist a:hover > .label {
	opacity: 1;
	pointer-events: all;
	transform: translateX(0);
}

.menu-dots.hidden a > .label{
	opacity: 0;
	pointer-events: none;
}

#input-toggle-theme:checked ~ .menu-dots a .item {
    background-color: white;
}

#input-toggle-theme:checked ~ .menu-dots a.active .item {
    opacity: 0.75;
}

#input-toggle-theme:checked ~ .menu-dots a {
    color: black;
}

#about h3 {
    text-align: center;
}

#about h4 {
    font-size: 1em;
}

#about h5 {
    font-size: 0.85em;
}

#about h4, #about h5 {
    margin-bottom: 0;
}

#about p {
    margin-top: 12px;
}

@media (max-width: 900px) {
    header > .input-toggle-menu, header > .theme-toggle {
        z-index: 11;
        background-color: var(--second-bg-color);
        border-radius: 14px;
        box-shadow: var(--button-box-shadow);
        padding: 4px;
        margin-top: 16px;
    }
    
    header > .input-toggle-menu, header > .bg-mobile {
        z-index: 11;
        background-color: var(--second-bg-color);
        border-radius: 14px;
        box-shadow: var(--button-box-shadow);
        padding: 2px;
        margin-top: 16px;
        
    }
    
    header {
        position: sticky;
    }
    
    header > menu {
        transform: scale(1);
        display: flex;
        position: fixed;
        opacity: 0;
        pointer-events: none;
        left: 0;
        height: 100vh;
        width: 100%;
        background-color: var(--bg-color);
        z-index: 10;
        transition: opacity 0.2s ease-in-out;
        width: 100%;
        flex-direction: column;
        justify-content: safe center;
        align-items: center;
        font-size: 1.8em;
        padding: 4px 0;
        overflow-y: scroll;
    }
    
    #input-toggle-menu:checked ~ header menu {
        opacity: 1;
        pointer-events: auto;
    }
    
    .input-toggle-menu {
        display: block;
    }
    #contact > .container {
        flex-direction: column-reverse !important;
    }
    #contact > .container > address {
        padding-left: 0;
        width: 100%;
    }
    
    .filter {
        margin-top: calc(var(--header-height) + 16px);
    }

    .filter > * {
        /* font-size: 0.64em; */
    }
    
    .filter > * > img {
        width: 2em;
    }

    
    .filter button {
        margin-top: 0;
        margin-bottom: 0;
    }

    .projects article > h3 {
        font-size: 1.56em;
    }

    .projects article > p {
        font-size: 1.16em;
    }

    .projects article > ul > li {
        font-size: 0.86em;
    }

    .projects article button, .projects article a, .projects article .button-text {
        font-size: 1.06em;
    }
    
    .menu-icon {
        display: block;
        height: 34px;
        width: 34px;
    }
    
    .menu-icon {
        transform: scale(0.75);
    }
    
    .language-picker .icon-adjust-theme {
        transform: scale(0.85);
    }
    
    .language-picker {
        font-size: 0.8em !important;
    }
    
    .theme-toggle svg {
        transform: scale(0.95);
    }
    
    #introduction .links {
        justify-content: center;
    }
    
    #introduction .links > * {
        font-size: 1.16em;
    }
    
    #introduction .corners-effect:after {
        display: none;
        border-top-right-radius: 24px;
    }
    
    #introduction .corners-effect:before {
        display: none;
        border-bottom-left-radius: 24px;
    }

    #contact > .container ul > li > a {
        justify-content: start;
    }
}

@media (max-width: 1200px) {

    .projects article {
        padding: 24px 0;
    }
}

@media (max-width: 900px) {

    .projects article {
        flex-direction: column;
        padding: 16px 0;
    }

    .projects article > * {
        padding: 0 !important;
    }

    .projects article > *:first-child {
        padding: 0 !important;
        margin-bottom: 16px;
    }

	.menu-dots {
		display: none;
	}
}


#about p {
    line-height: 1.8;
}
#about p > br {
    margin-bottom: 20px;
}

#technologies {
    padding-top: 0;
}
h2 {
    padding: 16px 0 18px 0;
}

#input-toggle-theme[type="checkbox"]:checked ~ * .technologies .icon-adjust-theme {
    filter: invert(0.9)
}

#input-toggle-theme[type="checkbox"]:checked ~ * .technologies-container {
    --accent-color-alpha: #9f7f34;
    --accent-color-2: #c58a03;
}

.technologies-container {
    margin-top: 24px;
}

.tech-desc-container {
    --accent-color-alpha: #FFF3D7;
}

#input-toggle-theme[type="checkbox"]:checked ~ * .technologies-container .tech-desc-container {
    --accent-color-2: #b99643;
    --accent-color-alpha: #d49604;
    --accent-color-2: #b68a24;
    --accent-color-alpha: #a37f2b;
}

.technologies {
    padding-left: 0;
    display: grid;
    grid-gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    grid-auto-rows: 1fr;
    grid-auto-flow: dense;
    transition: all 0.2s linear;
}

.technologies-container .content .tiles li {    
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 24px;
    width: 80px;
}

.technologies-container .content .tiles li .icon {
    width: 42px;
}

.technologies-container .content .tiles li .title {
    font-size: 0.7em;
}

.technologies-container .content li {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 12px 4px;
}

.technologies-container .content .list-style-none > li:before {
    display: none;
}

.technologies-container .content li:before {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    border-radius: 50%;
    left: -24px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
}

.technologies-container .content li::marker {
    color: var(--accent-color);
}

.technologies > li {
    background-color: var(--accent-color-alpha);
    display: flex;
    list-style-type: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px 4px;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.4s cubic-bezier(0.175, 1.5, 0.32, 1.01);
    position: relative;
    z-index: 1;
    border-radius: 12px;
    box-shadow: 0 0 2px 1px var(--accent-color-alpha);
}

.technologies > li:hover {
    transform: scale(1.10);
}

.technologies > li.interaction:hover {
    cursor: pointer;
    background-color: var(--accent-color-2);
    transform: scale(1.16);
    box-shadow: 0 0 2px 1px var(--accent-color-2);
}

.technologies > li.interaction::after {
    content: "";
    background-color: #D9D9D9;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 9px;
    right: 9px;
    border-radius: 100%;
    transition: background-color 0.2s ease-in-out;
    box-sizing: border-box;
}

.technologies > li.interaction:hover::after {
    background-color: white;
}

#input-toggle-theme:checked ~ * .technologies > li.interaction::after {
    background-color: var(--second-bg-color);
}

#input-toggle-theme:checked ~ * .technologies > li.interaction:hover::after {
    background-color: var(--bg-color);
}

.technologies > li.item.interaction.selected {
    background-color: var(--accent-color-2);
    transform: scale(1.0);
}

.technologies > li.item.interaction.selected:hover {
    background-color: #ffdf95;
    transform: scale(1.05);
}

.technologies-container li * {
    pointer-events: none;
}

.technologies-container li .icon {
    width: 42px;
}

.technologies-container li .title {
    text-align: center;
    font-size: 0.7em;
}

.technologies li .title {
    margin-top: 8px;
}

.technologies > li {
    max-height: 100px;
    box-sizing: content-box;
}

.technologies > .item {
    z-index: 1;
}

.technologies > .description {
    background-color: var(--accent-color-2);
    grid-column: 1 / -1;
    cursor: auto;
    display: none;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.technologies > .description.selected {
    transform: none;
    display: flex;
}

.tech-desc-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 0;
    background-color: var(--accent-color-2);
    border-radius: 12px;
    opacity: 0;
    transition: background-color 0.2s ease-in-out, opacity 0.15s ease-in-out, transform 0.4s cubic-bezier(0.175, 1.5, 0.32, 1.01);
    transform: scale(0.9);
    transition-delay: 0s;
    display: flex;
    flex-direction: row;
    pointer-events: none;
}

.tech-desc-container.selected {
    z-index: 2;
    opacity: 1;
    transition: background-color 0.2s ease-in-out, opacity 0.15s ease-in-out, transform 0.4s cubic-bezier(0.175, 1.5, 0.32, 1.01);
    transition-delay: 0.05s;
    transform: scale(1);
    pointer-events: all;
}

.technologies > li {
    transition: background-color 0.2s ease-in-out, opacity 0.15s ease-in-out, transform 0.4s cubic-bezier(0.175, 1.5, 0.32, 1.01);
}

.technologies.hidden > li {
    transform: scale(0);
    opacity: 0;
}

.tech-desc-container > button {
    /* background-color: var(--accent-color-alpha); */
    transition: background-color 0.2s ease-in-out, opacity 0.15s ease-in-out, transform 0.4s cubic-bezier(0.175, 1.5, 0.32, 1.01);
    border-radius: 12px;
    overflow: hidden;
    margin: 8px 6px;
    flex-shrink: 0;
}

.tech-desc-container > button:hover {
    background-color: var(--accent-color-alpha);
}

.tech-desc-container > button img {
    transition: background-color 0.2s ease-in-out, opacity 0.15s ease-in-out, transform 0.4s cubic-bezier(0.175, 1.5, 0.32, 1.01);
    transform: rotateZ(90deg) scale(0.8);
    opacity: 0.8;
}

.tech-desc-container > button:hover img {
    transform: rotateZ(90deg) scale(1);
    opacity: 1;
}

.tech-desc-container > .content {
    flex-grow: 1;
    margin: 8px 6px;
    display: none;
}

.tech-desc-container > .content.selected {
    display: flex;
    padding-right: 60px;
    min-height: 0;
}

.flex-auto {
    display: flex;
    flex-direction: row;
}

@media (max-width: 900px) {
    .tech-desc-container {
        flex-direction: column;
    }

    .tech-desc-container > button {
        margin: 6px;
        width: calc(100% - 12px);
    }

    .flex-auto {
        flex-direction: column !important;
    }

    .tech-desc-container .content {
        justify-content: center !important;
    }

    .tech-desc-container .content ul {   
        padding: 0;
        margin: 0;
    }
    
    .tech-desc-container .content li {
        width: 100%;
        text-align: center;
        padding: 4px;
    }

    .tech-desc-container .content li::before {
        display: none;
    }

    .tech-desc-container > .content.selected {
        padding-right: 0;
    }
    
    #contact > .container ul {
        row-gap: 32px;
    }
    
    .right-panel > *:hover {
        box-shadow: none !important;
    }
}

.technologies-container .content {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    max-height: 100%;
}

.technologies-container .content ul {
    padding-left: 0;
    padding-left: -16px;
    display: flex;
    flex-direction: column!important;
    flex-wrap: wrap;
    padding: 0 10%;
    justify-content: flex-start;
    align-content: center;
    max-height: 100%;
}

.technologies-container .content li {
    font-size: 1em;
    padding: 8px 0;
}

.list-style-none, .list-style-none li {
    list-style-type: none;
    row-gap: 12px;
    column-gap: 12px;
}

#input-toggle-theme:checked ~ * .technologies-container .content {
    color: #EEE;
}

#input-toggle-theme:checked ~ * .technologies-container .content li:before {
    background-color: #EEE;
}
#input-toggle-theme:checked ~ * .technologies-container .content .tiles li .icon {
    filter: invert(1);
}

.technologies-container li a {
    pointer-events: all;
}

#input-toggle-theme:checked ~ * .tech-desc-container > button img {
    filter: invert(1.0);
}

.right-panel > * {
    border-radius: 12px;
    width: 38px;
    height: 38px;
    transition: box-shadow 0.3s ease-in-out, background 0.3s ease-in-out;
}

.right-panel > *:hover {
    box-shadow: var(--hover-box-shadow);
}

.right-panel > *:nth-of-type(2) {
    font-size: 18px;
    padding: 2px;
}

.projects article {
    display: none;
}
.projects article.category-main {
    display: flex;
}