@font-face {
    font-family: "Inter";
    src: url('/inter_variable.woff2') format('woff2');
    font-weight: normal bold;
    font-display: swap;
}
:root {
    --realBlack: #000d1a;
    --realWhite: #f4f4f5;
    --black: var(--realBlack);
    --white: var(--realWhite);

    --bg: var(--white);

    --realBlue: #004e9b;
    --realBlueLight: #0065ca;
    --realBlueDark: #002447;
    --blue: var(--realBlue);
    --blueLight: var(--realBlueLight);
    --blueLight0: #5cadff;
    --blueLight2: #8ac4ff;
    --blueLight3: #b8dbff;
    --blueDark: var(--realBlueDark);
    --blueDark2: #0052a3;
    --blueDark3: #003b75;

    --accent: #f26522;
    --accent2: #f37439;
    --accentDark: #d95a1e;
    --accentDark2: #c6460c;
    --accentDark3: #9a3709;

    --almostWhite: rgba(255, 255, 255, 0.66);
    --almostWhite2: rgba(255, 255, 255, 0.6);
    --whiteTransparent: rgba(255, 255, 255, 0.5);
    --whiteTransparent2: rgba(255, 255, 255, 0.33);
    --realSoftWhite: rgba(255, 255, 255, 0.25);
    --softWhite: var(--realSoftWhite);
    --ghostWhite: rgba(255, 255, 255, 0.125);
    --softLight: rgba(255, 255, 255, 0.03125);

    --ghostBlueWhite0: rgba(208, 213, 255, 0.225);
    --ghostBlueWhite: rgba(208, 213, 255, 0.175);
    --ghostBlueWhite2: rgba(208, 213, 255, 0.125);
    --ghostBlueWhite3: rgba(208, 213, 255, 0.075);
    --ghostBlueWhite4: rgba(208, 213, 255, 0.05);
    --ghostBlueWhite5: rgba(208, 213, 255, 0.04);

    --softShadow0: rgba(1, 2, 24, 0.066);
    --softShadow: rgba(1, 2, 24, 0.05);
    --softShadow2: rgba(1, 2, 24, 0.033);
    --shadow: rgba(1, 2, 24, 0.125);
    --shadow2: rgba(1, 2, 24, 0.175);
    --silver: rgba(1, 2, 24, 0.33);
    --realSoftSilver: rgba(1, 2, 24, 0.25);
    --softSilver: var(--realSoftSilver);
    --softSilver2: rgba(1, 2, 24, 0.2);
    --realGray: rgba(1, 2, 24, 0.66);
    --gray: var(--realGray);


    --themeColor0: #ff962e;
    --themeColor: #ffb164;
    --themeColor2:#ffc482;
    --themeColor3:#ffdbb8;

    --color1a: var(--themeColor);
    --color1b: var(--themeColor2);
}
*, ::after, ::before {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    scrollbar-color: var(--accent) var(--accentDark3);
    scrollbar-width: thin;

    font-family: "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;

    font-size: inherit;
    word-spacing: 0.2rem;
    line-height: 1.25;
    accent-color: var(--accent);
    outline: 1px dashed transparent;
    color-scheme: light dark;
}
:active, :focus {
    outline: 1px dashed var(--softSilver2);
    -webkit-tap-highlight-color: transparent;
}
a:focus, button:focus, input:focus { outline-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--blueDark);
    outline-offset: 2px;
}
a *:not(.icon):focus, button *:not(.icon):focus,
a *:not(.icon):active, button *:not(.icon):active { outline: 1px dashed transparent; }
::selection {
    opacity: 1;
    background: var(--accentDark);
    color: var(--white);
}
::placeholder {
    color: var(--black);
    opacity: 0.5;
}
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}
::-webkit-scrollbar-thumb { background: var(--accent); }
::-webkit-scrollbar-track { background: var(--accentDark3); }
html, body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}
body {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    scroll-behavior: smooth;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 99;
}
.skip-link:focus { top: 1rem; }
.bg {
    background: linear-gradient(-45deg, var(--themeColor) 49.9%, var(--themeColor2) 50.1%);
    bottom: 0;
    left: -50%;
    opacity: 0.1;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
    will-change: transform;
    contain: content;
    animation: slide 3s ease-in-out infinite alternate;
}
@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}
.bg-2 {
    animation-direction: alternate-reverse;
    animation-duration: 3.5s;
}
.bg-3 {
    animation-duration: 7s;
}
hr {
    border: 1px solid var(--shadow);
    margin: 1rem 0;
}
h1, h2, h3 { text-shadow: 0 0 0.25rem var(--whiteTransparent2), 0 0 0.5rem var(--whiteTransparent2); }
h1 { color: var(--blue); }
h2 { color: var(--blue); }
h3 { color: var(--blue); }
h4 { color: var(--blueDark); }
a { color: var(--blue); }
a, a * {
    display: inline-block;
    user-select: none;
    transition: all 0.25s;
    text-decoration: none;
}
ul, ol { list-style: none; }
address { font-style: normal; }
.auto-y-padding {
    padding: 0 clamp(1rem, 1vw + 1rem, 3rem);
    font-style: normal;
}
.auto-padding { padding: clamp(1rem, 1vw + 1rem, 3rem); }
.auto-font-size { font-size: clamp(1.25rem, 1vw + 1.25rem, 2rem); }
.auto-font-size-2 { font-size: clamp(1.125rem, 1vw + 1.125rem, 1.5rem); }
.auto-font-size-3 { font-size: clamp(1rem, 1vw + 1rem, 1.25rem); }
@media (prefers-reduced-motion: reduce) and (min-width: 641px) {
    .bg { animation-duration: 17.5s; }
    .bg-2 { animation-duration: 35s; }
    #main aside.desktop { animation-duration: 60s; }
    #main aside.mobile { animation-duration: 50s; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
    .bg { animation-duration: 10.5s; }
    .bg-2 { animation-duration: 21s; }
    #main aside.desktop { animation-duration: 90s; }
    #main aside.mobile { animation-duration: 75s; }
}
a::before,
a::after {
    align-self: center;
    content: "";
    border-left: 0.85rem solid var(--almostWhite);
    border-top: 0.425rem solid transparent;
    border-bottom: 0.425rem solid transparent;
    transition: all 0.25s;
}
a::before { margin-right: 1rem; }
a::after { border-left-color: transparent; }
a:hover::before,
a:active::before,
a:focus::before {
    border-left-color: transparent;
    margin-right: 0;
}
a:hover::after,
a:active::after,
a:focus::after {
    border-left-color: var(--white);
    margin-left: 1rem;
}
.cta-button {
    font-size: 1.125rem;
    padding: 0.5rem 0;
    background: linear-gradient(to right, var(--accentDark2) 50%, var(--accentDark));
    color: var(--white);
    border-radius: 1.125rem;
    box-shadow: 0 0.125rem 0.25rem var(--shadow);
    display: inline-flex;
    justify-content: center;
}
.cta-button:hover,
.cta-button:focus,
.cta-button:active {
    transform: scale(1.0125);
    box-shadow: 0 0.25rem 0.5rem var(--shadow2), inset -2.75rem 0 0.25rem var(--accentDark);
}
.cta-button::before { margin-left: 1rem; }
.cta-button::after { margin-right: 1rem; }
.cta-button > * {
    align-self: center;
}
.cta-button:hover,
.cta-button:active,
.cta-button:focus {
    color: var(--white);
    background: linear-gradient(to right, var(--accentDark2), var(--accentDark2) 50%, var(--accentDark));
}
.cta-blue-button {
    background: linear-gradient(to right, var(--blueDark3) 50%, var(--blue));
}
.cta-blue-button:hover,
.cta-blue-button:active,
.cta-blue-button:focus {
    box-shadow: 0 0.25rem 0.5rem var(--softSilver), inset -2.75rem 0 0.25rem var(--blue);
    background: linear-gradient(to right, var(--blueDark3) 50%, var(--blue));
}
@media screen and (max-width: 640px) {
    a.cta-button {
        border-radius: 1rem;
        font-size: 1rem;
    }
}
.container {
    padding: 0;
    margin: 0;
    display: flex;
}
.container aside.desktop {
    width: 50%;
    height: 100%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}
.container aside.desktop::before {
    background: center no-repeat;
    background-size: auto 100%;
}
.container aside.mobile {
    display: none;
    width: 100%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}
.container aside.mobile::before,
.container aside.mobile::after {
    background: center no-repeat;
    background-size: auto 100%;
}
.container aside {
    display: flex;
    justify-content: center;
    align-self: center;
}
.container aside::before, .container aside::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}
.container aside > .logo {
    align-self: center;
    height: 1rem;
    margin: 0.5rem;
    filter: drop-shadow(0 0 0.25rem var(--bg)) drop-shadow(0 0 0.5rem var(--bg)) drop-shadow(0 0 1rem var(--bg));
}
.container > div {
    width: 50%;
    height: 100%;
    text-align: left;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
@media screen and (min-width: 960px) {
    .container aside > .logo {
        height: 1.125rem;
        margin: 0.625rem;
    }
}
@media screen and (min-width: 1280px) {
    .container aside > .logo {
        height: 1.25rem;
        margin: 0.75rem;
    }
}
@media screen and (min-width: 1720px) {
    .container aside > .logo {
        height: 1.5rem;
        margin: 1rem;
    }
}
@media screen and (max-width: 640px) {
    .container {
        flex-flow: column;
    }
    .container aside.desktop {
        display: none !important;
    }
    .container aside.mobile {
        display: flex !important;
    }
    .container aside.mobile,
    .container aside.mobile::before, 
    .container aside.mobile::after {
        height: 25%;
    }
    .container > div {
        width: 100%;
        height: 50%;
        text-align: center;
    }
    .container aside > .logo {
        height: 0.75rem;
        margin: 0.375rem;
    }
}

main {
    width: 100%;
    display: flex;
    flex-direction: column;
}
#main {
    width: 100%;
    height: 100vh;
    justify-content: flex-end;
    align-items: center;
}
#main p { color: var(--blueDark); }
#main h1 {
    padding-bottom: 1rem;
}
#main div {
    padding-top: 1rem;
    font-weight: bold;
}
#main p i {
    color: var(--blue);
    font-style: normal;
}
#main ul {
    margin-top: 1.25rem;
    display: flex;
    justify-content: flex-start;
    gap: 1.25rem;
}
#main a {
    padding: 0.5rem 0;
    border-radius: 1rem;
    display: flex;
    color: var(--accentDark3);
    background: var(--almostWhite);
}
#main a:hover,
#main a:active,
#main a:focus {
    color: var(--accentDark2);
}
#main a:focus {
    outline-color: var(--accentDark2);
}
#main a:hover::before,
#main a:active::before,
#main a:focus::before {
    border-left-color: transparent;
}
#main a::before {
    border-left-color: var(--accentDark3);
}
#main a:hover::after,
#main a:active::after,
#main a:focus::after {
    border-left-color: var(--accentDark2);
}
#main aside > .big-logo {
    width: 50%;
    filter: drop-shadow(0 0.25rem 0.25rem var(--shadow));
    transition: all 0.25s;
    z-index: 9;
}
#main aside > .big-logo:hover,
#main aside > .big-logo:active,
#main aside > .big-logo:focus{
    transform: scale(1.0125);
    filter: drop-shadow(0 0.5rem 0.5rem var(--shadow));
}
#main aside.desktop,
#main aside.mobile {
    background: radial-gradient(var(--white), transparent), url("code.svg");
}
#main aside.desktop {
    width: 50%;
    height: 100%;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 0 2rem var(--softShadow0);
}
#main aside.mobile {
    padding: 0 2rem;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 -0.5rem 1rem var(--softShadow2);
    background-size: cover, 480px 480px;
    background-position: center, 0 0;
}
#main aside.mobile::before {
    width: 75%;
    z-index: 8;
}
#main aside.mobile::after {
    width: 50%;
    z-index: 7;
}
#main aside.mobile::before,
#main aside.mobile::after {
    border-radius: 50%;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 -1rem 1rem var(--softShadow);
    background: linear-gradient(0deg, transparent, var(--softWhite));
}
@media screen and (max-width: 1280px) {
    #main aside.desktop {
        height: 75%;
    }
}
@media screen and (max-width: 1024px) {
    #main aside.desktop {
        height: 50%;
    }
}
@media screen and (max-width: 640px) {
    #main::before {
        content: '';
        display: flex;
        width: 100%;
        height: 10%;
    }
    #main ul { justify-content: center; }
    #main a::before, #main a::after {
        border-left-width: 0.75rem;
        border-top-width: 0.375rem;
        border-bottom-width: 0.375rem;
    }
    #main > div {
        flex-grow: 1;
    }
    #main aside > .big-logo {
        width: 40%;
    }
}
@media screen and (max-width: 480px) {
    #main aside > .big-logo {
        width: 50%;
    }
    #main aside.mobile {
        width: 100%;
    }
}
@media screen and (max-width: 400px) {
    #main aside > .big-logo {
        width: 60%;
    }
}

.card {
    width: 100%;
    margin: 0;
    background: var(--softWhite);
    border-radius: 2rem;
    contain: style;
}
.card::before, .card::after {
    content: '';
    width: 100%;
    display: block;
    height: 2rem;
    position: relative;
    border-radius: 2rem;
    z-index: 2;
}
.card::before {
    background: linear-gradient(0deg, transparent, var(--ghostWhite));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 -0.25rem 0.25rem var(--softLight);
}
.card::after {
    background: linear-gradient(0deg, var(--softShadow2), transparent);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 0.25rem 0.25rem var(--softShadow);
}
.card section {
    padding: 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 1rem;
}
.card .category {
    padding-top: 1.5rem;
    text-align: center;
}
.card li { color: var(--blueDark); }
.card h3 {
    min-height: 4rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: center;
}
.card h2 { padding: 0; }
.card h2, .card h3, .card > p { text-align: center; }
.card > p {
    margin-top: 1rem;
    padding: 0 1rem;
    color: var(--gray);
}
.category .icon,
.category li {
    transition: all 0.25s;
    cursor: pointer;
}
.list {
    margin: 1rem 0;
}
.category .icon {
    overflow: hidden;
    border-radius: 50%;
    margin-right: 1.5rem;
    background: linear-gradient(to bottom, var(--white), var(--themeColor));
    box-shadow: inset 0 0 1.5rem var(--themeColor2), 0 0.25rem 0.25rem var(--softShadow);
}
.category .icon,
.category .price {
    flex-shrink: 0;
}
.category .price {
    align-self: center;
}
.category .icon img {
    padding: 0.5rem;
    object-fit: cover;
    filter: brightness(66%) drop-shadow(0 0px var(--softShadow)) drop-shadow(0 1px var(--whiteTransparent));
    width: 100%;
    height: 100%;
}
.card li, .card li > a {
    border-radius: 1rem;
}
.card li > a {
    padding: 1rem;
    text-align: left;
    display: flex;
}
.card li > a::before, .card li > a::after { display: none; }
.card li > a:focus {
    background: linear-gradient(90deg, var(--softWhite), var(--almostWhite), var(--softWhite));
    box-shadow: 0 0.25rem 0.25rem var(--softShadow);
}
.card li *:not(a,.icon):focus, .card li *:not(a,.icon):active { outline: 1px dashed transparent; }
.card li .description {
    width: 75%;
}
.card li b {
    margin-bottom: 0.5rem;
    display: block;
}
.card li span {
    color: var(--black);
    display: inline-block;
}
.category li:hover,
.category li:active,
.category li:focus {
    transform: scale(1.0075);
    background: linear-gradient(90deg, var(--softWhite), var(--whiteTransparent), var(--softWhite));
    box-shadow: 0 0.25rem 0.25rem var(--softShadow);
    color: var(--blue);
}
.category li:hover .icon,
.category li:active .icon,
.category li:focus .icon {
    box-shadow: inset 0 -0.25rem 1.5rem var(--themeColor), 0 0.5rem 0.5rem var(--shadow);
}
.category li:hover span,
.category li:active span,
.category li:focus span {
    color: var(--blueDark);
}

#services.card li,
#services.card li a,
#services.card li b,
#services.card li span,
#services.card li .icon/*,
#services.card li .description*/ {
    transition: all 0.5s;
}
/*#services.card li .price {
    transition: all 0.125s;
}*/
#services.card li > a {
    padding: 0.5rem 1rem;
    justify-content: center;
    font-size: 1.125rem;
    color: var(--blueDark);
}
#services.card li > a:not(.cta-button):hover,
#services.card li > a:not(.cta-button):active,
#services.card li > a:not(.cta-button):focus {
    padding: 1rem;
    color: var(--blue);
    flex-wrap: wrap;
}
#services.card li .description {
    width: 50%;
}
#services.card li > a:hover .description,
#services.card li > a:active .description,
#services.card li > a:focus .description {
    width: calc(100% - 6rem);
}
#services.card li .price {
    width: 22.5%;
    height: 3.5rem;
    margin-left: 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: var(--accentDark3);
    overflow: hidden;
    background: var(--almostWhite);
    border-radius: 0.5rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 0.5rem 1rem;
}
#main a, #services.card li .price {
    box-shadow: 0 0.125rem 0.25rem var(--shadow);
}
#services.card li > a:hover .price,
#services.card li > a:active .price,
#services.card li > a:focus .price {
    margin-left: 0rem;
    text-align: center;
    width: 0;
    height: 0;
    opacity: 0;
    padding: 0;
    animation: show 0.25s linear 1 forwards;
    animation-delay: 2s;
}
@keyframes show {
    0% {
        opacity: 0;
    }
    50% {
        width: 50%;
        opacity: 0;
    }
    100% {
        width: 50%;
        height: 2.25rem;
        opacity: 1;
        padding: 0.5rem;
        margin-top: 0.5rem;
    }
}
#services.card li b {
    margin-top: 1.25rem;
    margin-bottom: 0;
}
#services.card a:hover div,
#services.card a:active div,
#services.card a:focus div {
    align-self: flex-start;
}
#services.card a:hover .icon,
#services.card a:active .icon,
#services.card a:focus .icon {
    margin-left: 0rem;
}
#services.card a:hover b,
#services.card a:active b,
#services.card a:focus b {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
#services.card li span {
    display: inline-block;
    max-width: 100%;
    height: 0;
    max-height: 1.25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--black);
    opacity: 0;
    font-size: 1rem;
}
#services.card a:not(.cta-button):hover span,
#services.card a:not(.cta-button):active span,
#services.card a:not(.cta-button):focus span {
    color: var(--blueDark);
    white-space: normal;
    height: auto;
    max-height: 10rem;
    opacity: 1;
}

.category .icon {
    width: 4rem;
    height: 4rem;
}
@media screen and (min-width: 1025px) {
    .card {
        margin: 4rem 1rem;
        width: calc(100% - 2rem);
    }
}
@media screen and (max-width: 1024px) {
    .card {
        margin: 2rem 0;
    }
    .card section {
        padding: 0 0.5rem;
    }
    #services.card li .price {
        width: 30%;
    }
}
@media screen and (max-width: 640px) {
    .card::before {
        background: linear-gradient(0deg, transparent, var(--softWhite));
        box-shadow: 0 -0.25rem 0.25rem var(--softShadow);
    }
    .card {
        margin: 2rem 0 0 0;
    }
    .card:nth-child(even) { margin-top: 0; }
    .card section {
        padding: 0 0.25rem;
    }
    .category .icon {
        width: 3.5rem;
        height: 3.5rem;
        margin-right: 1rem;
    }
    #services.card li > a:hover .description,
    #services.card li > a:active .description,
    #services.card li > a:focus .description {
        width: calc(100% - 4.5rem);
    }
    #services.card li:hover .icon,
    #services.card li:active .icon,
    #services.card li:focus .icon {
        margin-left: 0;
    }
    #services.card li span {
        max-height: 1.25rem;
    }
    #services.card li > a {
        font-size: 1rem;
    }
    #services.card li b {
        margin-top: 1rem;
    }
    #services.card li .price {
        width: 30%;
    }
}
@media screen and (max-width: 480px) {
    .category .icon {
        width: 3rem;
        height: 3rem;
    }
    #services.card li > a:hover .description,
    #services.card li > a:active .description,
    #services.card li > a:focus .description {
        width: calc(100% - 4rem);
    }
    #services.card li b {
        margin-top: 0.75rem;
    }
    #services.card li .price {
        width: 25%;
        margin-left: 0.5rem;
        font-size: 0.85rem;
        padding: 0.5rem;
    }
    #services.card li > a:hover .price,
    #services.card li > a:active .price,
    #services.card li > a:focus .price {
        font-size: 1rem;
    }
}
@media screen and (max-width: 320px) {
    .category .icon {
        width: 2.5rem;
        height: 2.5rem;
    }
    #services.card li > a:hover .description,
    #services.card li > a:active .description,
    #services.card li > a:focus .description {
        width: calc(100% - 3.5rem);
    }
    #services.card li b {
        margin-top: 0.5rem;
    }
    #services.card li .price {
        width: 25%;
        margin-left: 0.5rem;
        font-size: 0.85rem;
        padding: 0.5rem;
    }
    #services.card li > a:hover .price,
    #services.card li > a:active .price,
    #services.card li > a:focus .price {
        font-size: 1rem;
    }
}

#contact {
    width: 100%;
    height: 50vh;
    margin-bottom: 2rem;
    justify-content: flex-start;
}
#contact aside > .logo { align-self: flex-end; }
#contact aside.desktop {
    box-shadow: 0 0 2rem var(--softSilver2);
}
#contact aside.desktop::after {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: 1rem 0 1rem var(--softShadow2);
    width: 50%;
    margin-left: 50%;
    background: linear-gradient(90deg, transparent, var(--almostWhite));
}
#contact aside.desktop::before {
    background-image: url(./elias.png);
    background-size: auto 100%;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
}
#contact aside.mobile {
    display: none;
    height: 50%;
    padding: 0 2rem;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    box-shadow: 0 0.5rem 1rem var(--softShadow);
    background: linear-gradient(180deg, transparent, var(--white));
}
#contact aside.mobile::before {
    width: 75%;
}
#contact aside.mobile::after {
    width: 50%;
}
#contact aside.mobile::before,
#contact aside.mobile::after {
    border-radius: 50%;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: 0 1rem 1rem var(--softShadow0);
}
#contact aside.mobile::after {
    background-image: url(./elias.png);
}
#contact aside img { opacity: 0.66; }
#contact aside::before, #contact aside.mobile::after { opacity: 0.9; }
#contact .auto-y-padding { text-align: left; }
#contact h2 {
    padding: 0;
    margin-bottom: 2rem;
}
#contact address {
   display: flex;
   flex-flow: column;
   align-items: flex-start;
}
#contact .cta-blue-button {
   margin-bottom: 1rem;
}
@media screen and (max-width: 640px) {
    #contact > div { justify-content: flex-end; }
    #contact .auto-y-padding { text-align: center; }
    #contact address { align-items: center; }
    #contact aside.mobile::before,
    #contact aside.mobile::after {
        height: 100%;
    }
}
@media screen and (max-width: 480px) {
    #contact aside.mobile {
        width: 100%;
    }
}

#projects .list {
    margin-top: 0;
}

#projects .list li {
    display: block;
}

#projects a {
    color: var(--accentDark3);
}

#projects a:hover,
#projects a:focus,
#projects a:active {
    color: var(--accentDark2);
}

.relate a {
    justify-content: center;
}
.relate a .cta-text {
    overflow: visible;
    display: block;
    height: 1.75rem;
    position: relative;
    top: -1.75rem;
    padding: 1.75rem 1rem 0 0;
    line-height: 2.25;
    color: var(--blueDark);
    transition: all 0.25s;
    font-weight: bold;
    text-align: right;
    font-style: normal;
}
.relate a .cta-text i {
    font-style: normal;
}
.relate a:hover .cta-text,
.relate a:active .cta-text,
.relate a:focus .cta-text {
    color: var(--blue);
}
@media screen and (max-width: 480px) {
    .relate a span {
        max-height: 7.5rem;
        overflow: hidden;
    }
    .relate a .cta-text {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        height: 2.5rem;
        top: -2rem;
        padding-top: 2.5rem;
        line-height: 2.5;
        background: linear-gradient(to bottom, transparent, var(--whiteTransparent));
    }
}

footer {
    padding: 2rem;
    align-self: center;
    color: var(--gray);
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--black);
        --gray: var(--almostWhite);
        --black: var(--white);
        --blue: var(--blueLight3);
        --blueDark: var(--almostWhite);
        --whiteTransparent2: var(--ghostBlueWhite3);
        --softWhite: var(--ghostBlueWhite2);
        --ghostWhite: var(--ghostBlueWhite5);
        --softShadow2: var(--ghostBlueWhite3);
        --softSilver: var(--white);
    }

    *, ::after, ::before {
        scrollbar-color: var(--realBlue) var(--realBlueDark);
    }

    ::-webkit-scrollbar-thumb { background: var(--realBlue); }
    ::-webkit-scrollbar-track { background: var(--realBlueDark); }

    :active, :focus {
        outline-color: var(--ghostBlueWhite);
    }

    body { background: var(--realBlack); }

    a:focus-visible, button:focus-visible, input:focus-visible { 
        outline-color: var(--white); 
    }

    ::selection {
        opacity: 1;
        background: var(--realBlue);
        color: var(--white);
    }

    ::placeholder {
        color: var(--white);
        opacity: 0.5;
    }

    .bg {
        background: linear-gradient(-45deg, var(--realBlueDark) 49.9%, var(--realBlue) 50.1%);
        opacity: 0.03;
    }

    .card::after { background: linear-gradient(0deg, var(--softShadow), transparent); }

    .card li { 
        color: var(--blueLight2); 
    }

    .card li:hover,
    .card li:active,
    .card li:focus { 
        color: var(--blueLight3); 
    }

    .category .icon img {
        filter: brightness(33%) drop-shadow(0 0px var(--softShadow)) drop-shadow(0 1px var(--whiteTransparent));
    }

    .category li:hover span,
    .category li:active span,
    .category li:focus span {
        color: var(--white);
    }

    #projects a { 
        color: var(--themeColor); 
    }

    #projects a:hover,
    #projects a:focus, 
    #projects a:active {
        color: var(--themeColor2);
    }

    .category li:hover,
    .category li:active,
    .category li:focus,
    #projects a:hover,
    #projects a:focus, 
    #projects a:active {
        background: linear-gradient(90deg, var(--ghostBlueWhite4), var(--ghostBlueWhite2), var(--ghostBlueWhite4));
    }

    #services.card li a:hover,
    #services.card li a:active,
    #services.card li a:focus {
        background: linear-gradient(90deg, var(--ghostBlueWhite4), var(--ghostBlueWhite2), var(--ghostBlueWhite4));
    }

    #projects li:hover,
    #projects li:active,
    #projects li:focus {
        background: none;
    }  

    .relate a .cta-text {
        color: var(--blueLight2);
    }

    .relate a:hover .cta-text,
    .relate a:active .cta-text,
    .relate a:focus .cta-text {
        color: var(--blueLight3);
    }

    @media screen and (max-width: 480px) {
        .relate a .cta-text {
            background: linear-gradient(to bottom, transparent, var(--ghostBlueWhite3));
        }
    }
    
    #main p i { color: var(--white); }

    #main a {
        color: var(--accent2);
        background: var(--realGray);
    }

    #services.card li .price {
        color: var(--accent2);
        background: var(--realBlack);
    }

    #main a::before {
        border-left-color: var(--accent2);
    }

    #main a:hover,
    #main a:active,
    #main a:focus {
        color: var(--themeColor);
    }

    #main a:focus {
        outline-color: var(--themeColor);
    }

    #main a:hover::before,
    #main a:active::before,
    #main a:focus::before {
        border-left-color: transparent;
    }

    #main a:hover::after,
    #main a:active::after,
    #main a:focus::after {
        border-left-color: var(--themeColor);
    }


    #main aside.desktop,
    #main aside.mobile {
        box-shadow: 0 0 3rem var(--ghostBlueWhite2);
    }

    #main aside.desktop { 
        background: radial-gradient(var(--ghostBlueWhite0), transparent), url("code_night.svg"); 
    }
    
    #main aside.mobile {
        background: radial-gradient(var(--ghostBlueWhite), transparent), url("code_night.svg"); 
        background-size: cover, 480px 480px;
        background-position: center, 0 0;
    }

    #main aside.mobile::before,
    #main aside.mobile::after {
        box-shadow: 0 -1rem 1rem var(--ghostBlueWhite4);
        background: linear-gradient(0deg, transparent, var(--ghostBlueWhite));
    }

    #main aside > .big-logo {
        filter: brightness(0) grayscale(1) invert() drop-shadow(0 0.25rem 0.25rem var(--silver));
    }
    
    #main aside > .big-logo:hover,
    #main aside > .big-logo:active,
    #main aside > .big-logo:focus {
        filter: brightness(0) grayscale(1) invert() drop-shadow(0 0.5rem 0.5rem var(--silver));
    }

    .category .icon {
        background: linear-gradient(to bottom, var(--themeColor3), var(--themeColor0));
    }

    #contact aside.desktop::before {
        box-shadow: 0 0 2rem var(--ghostBlueWhite);
    }

    #contact aside.desktop::after {
        background: linear-gradient(90deg, transparent, var(--realSoftWhite));
    }

    #contact aside.mobile {
        background: linear-gradient(180deg, transparent, var(--ghostBlueWhite));
    }
    
    #contact aside.mobile::after,
    #contact aside.mobile::before {
        box-shadow: 0 1rem 1rem var(--ghostBlueWhite3);
    }

    .cta-button {
        background: linear-gradient(to right, var(--accentDark3), var(--accentDark2));
    }

    .cta-button:hover,
    .cta-button:focus,
    .cta-button:active {
        background: linear-gradient(to right, var(--accentDark3), var(--accentDark2) 50%, var(--accentDark));
    }

    .cta-blue-button {
        background: linear-gradient(to right, var(--blueDark3), var(--blueDark2));
    }

    .cta-blue-button:hover,
    .cta-blue-button:active,
    .cta-blue-button:focus {
        background: linear-gradient(to right, var(--blueDark3), var(--blueDark2) 50%, var(--realBlueLight));
        box-shadow: 0 0.25rem 0.5rem var(--realSoftSilver), inset -2.75rem 0 0.25rem var(--realBlueLight);
    }
}
@supports (backdrop-filter: blur(1px)){
    #main aside.desktop,
    #contact aside {
        backdrop-filter: blur(5px);
    }
}