html {
    scroll-behavior: smooth;
}
html section {
    scroll-margin-top: 4.5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    overflow-wrap: break-word;
}
p,
li,
figcaption {
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.logo {
    width: 2.5rem;
    height: 2.5rem;
}

header nav {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(19, 22.5, 30.5, 0.979);
    box-shadow:
        0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),
        0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),
        0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),
        0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),
        0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
    z-index: 10;
    transition: top 0.75s cubic-bezier(0.23, 1, 0.32, 1);
}

#intro {
    scroll-margin-top: 8rem;
}
#intro hgroup {
    margin-top: 5rem;
}

.tech-grid {
    flex-wrap: wrap;
    column-gap: calc(var(--pico-grid-column-gap) + 0.25rem);
}
.tech-item svg {
    height: 1.25rem;
    width: 1.25rem;
    margin-right: 0.25rem;
}
.tech-item {
    padding: var(--pico-form-element-spacing-vertical)
        var(--pico-form-element-spacing-horizontal);
    box-shadow: var(--pico-box-shadow);
    cursor: default;
    max-width: fit-content;
    max-height: 3rem;
    overflow: hidden;
    background-color: rgba(240, 240, 240, 0.03);
    border-radius: var(--pico-border-radius) !important;
}
.tech-item::after {
    content: " ";
    width: 1rem;
    height: 5rem;
    position: absolute;
    top: -1.5rem;
    left: -1.5rem;
    background-color: #ffffff;
    opacity: 0.2;
    transform: rotate(25deg);
    transition: left 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tech-item:focus::after,
.tech-item:active::after,
.tech-item:hover::after {
    left: 125%;
}

.brand-img {
    height: 4rem;
}

.grid-contact-form {
    row-gap: 0;
}
form textarea {
    min-height: 24ch;
}
input[type="submit"],
.form-input-loading {
    font-weight: 700;
    max-width: 50%;
    margin-left: 50%;
    transform: translateX(-50%);
}
.form-input-loading {
    display: none;
    min-width: 50%;
}
@media (min-width: 768px) {
    input[type="submit"] {
        max-width: 25%;
    }
    .form-input-loading {
        min-width: 25%;
    }
}
.input-req::after {
    content: " *";
    color: red;
}
.deformed-input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}

footer .logo {
    width: 3rem;
    height: 3rem;
}
.logo-footer-mob {
    display: none;
}
footer li:first-of-type {
    width: 100%;
    padding-bottom: var(--pico-nav-element-spacing-vertical);
}
footer li {
    padding: 0 var(--pico-nav-element-spacing-horizontal);
}
@media (max-width: 768px) {
    footer hgroup {
        order: 2;
    }
    footer hgroup svg {
        display: none;
    }
    .logo-footer-mob {
        display: inline-block;
    }
    footer li:last-of-type {
        padding-top: 0.5rem;
    }
}