@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("/assets/atkinson_hyperlegible/web/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2"),
        url("/assets/atkinson_hyperlegible/web/WOFF/Atkinson-Hyperlegible-Regular-102.woff") format("woff");
    font-weight: normal;
}
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("/assets/atkinson_hyperlegible/web/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2") format("woff2"),
        url("/assets/atkinson_hyperlegible/web/WOFF/Atkinson-Hyperlegible-Bold-102.woff") format("woff");
    font-weight: bold;
}

:root {
    font-family: "Atkinson Hyperlegible";
    --foundation_col: oklch(0.3942 0 0);
    --foundation_shade: oklch(0.32 0 0);
    --foundation_light: oklch(0.41 0 0);
    --header_bg_col: oklch(0.3942 0 0);
    --title_col: oklch(0.7925 0.1327 73.62);
    --title_col_light: oklch(0.825 0.11 73.62);
    --title_col_shade: oklch(0.6 0.08 73.62);
    --subtitle_col: oklch(0.67 0.02 73.62);
    --subtitle_col_shade: oklch(0.5 0.02 73.62);
    --link_col: oklch(0.7925 0.1327 73.62);
    --link_used_col: oklch(0.7125 0.1127 73.62);
    --text_col: oklch(0.8 0 0);
    background: rgb(0, 0, 0);
    /* used to default to 32px */
    font-size: max(max(1.7vh, 1.7vw), 24px);
    /* used to default to 32px */
    --text_size: max(max(1.7vh, 1.7vw), 24px);
    --debug-border-width: 0px;
    scrollbar-width: 16px;
    scrollbar-gutter: stable;
}

body {
    transform-style: preserve-3d;
    transform: translatez(0px);
}

main {
    padding-top: 16px;
    padding-bottom: 64px;
    background: var(--foundation_col)
}

.nohigh {
    user-select: none;
}

.section {
    padding: 16px;
    padding-top: 64px;
    padding-bottom: 0;
    background: var(--foundation_col);
    display: flex;
    justify-content: center;
    column-gap: 4vw;
    /* max-width: 1024px; */
}

.subsection_vertical {
    justify-content: center;
    max-width: 40vw;
}

h1 {
    text-align: center;
    margin-top: 0;
    width: 100%;
    border-bottom: 4px solid var(--title_col);
}

.email_box {
    display: flex;
    justify-content: center;
    border: var(--debug-border-width) solid var(--title_col);
}

.email_section {
    padding: 0px;
    padding-bottom: 16px;
    background: var(--foundation_col);
    display: flex;
    justify-content: space-evenly;
    column-gap: 16px;
    border: var(--debug-border-width) solid var(--title_col);
}

.email_vertical h1 {
    text-align: center;
    width: 100%;
    border-bottom: 4px solid var(--title_col);
}

.email_vertical {
    justify-content: center;
    flex-direction: column;
    max-width: 75vw
}

.input {
    --hi: oklch(0.25 0 0);
    --lo: oklch(0.45 0 0);
    font-family: "Atkinson Hyperlegible";
    padding: 8px;
    font-size: 20px;
    width: 100%;
    min-width: 10vw;
    resize: both;
    color: var(--text_col);
    border-width: 3px;
    border-style: solid;
    border-left-color: var(--hi);
    border-right-color: var(--lo);
    border-top-color: var(--hi);
    border-bottom-color: var(--lo);
    border-radius: 6px;
    background-color: var(--foundation_shade);
}

.input:focus {
    outline: none;
    border: 3px solid;
    border-color: var(--title_col);
}

@property --c_start {
    syntax: '<color>';
    inherits: false;
    initial-value: oklch(0 0 0);
}
@property --c_mid {
    syntax: '<color>';
    inherits: false;
    initial-value: oklch(0 0 0);
}
@property --c_end {
    syntax: '<color>';
    inherits: false;
    initial-value: oklch(0 0 0);
}
@property --s_col {
    syntax: '<color>';
    inherits: false;
    initial-value: oklch(1 0 0 / 1.0);
}
@property --s_size {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

.email_send {
    --c_start: oklch(1.0 0 0);
    --c_mid: oklch(1.0 0 0);
    --c_end: oklch(0.7 0 0);
    --s_col: oklch(1 0 0 / 0.0);
    --s_size: 12px;
    font-family: "Atkinson Hyperlegible";
    padding: 11px;
    font-size: 20px;
    border: 0px;
    border-radius: 6px;
    color: oklch(0.5 0 0);
    font-weight: bold;
    background: linear-gradient(180deg, var(--c_start), var(--c_mid) 20%, var(--c_end));
    filter: drop-shadow(0 0 var(--s_size) var(--s_col));
    text-align: center;
    display: flex;
}

.email_send:focus {
    outline: 3px solid var(--title_col);
}

:focus {
    outline: 3px solid var(--title_col);
}

.email_send:active {
    animation: 0.2s ease-out pressed;
    outline: none;
}

@keyframes pressed {
    0% {
        --c_start: oklch(0.7 0 0);
        --c_mid: oklch(0.8 0 0);
        --c_end: oklch(0.9 0 0);
        --s_col: oklch(1 0 0 / 1.0);
        --s_size: 64px;
        transform: translatey(2px);
    }
    100% {
        --c_start: oklch(1.0 0 0);
        --c_mid: oklch(1.0 0 0);
        --c_end: oklch(0.7 0 0);
        --s_col: oklch(1 0 0 / 0.0);
        --s_size: 0px;
        transform: translatey(0px);
    }
}

.email_body {
    height: 10vh;
}

/* .subsection_image { */
/*     --hi: oklch(0.25 0 0); */
/*     --lo: oklch(0.45 0 0); */
/*     border-width: 3px; */
/*     border-style: solid; */
/*     border-left-color: var(--hi); */
/*     border-right-color: var(--lo); */
/*     border-top-color: var(--hi); */
/*     border-bottom-color: var(--lo); */
/*     border-radius: 6px; */
/*     background-color: var(--foundation_col); */
/*     box-shadow: inset 0 0 64px oklch(0 0 0 / 0.5); */
/* } */
/**/
/* .subsection_image_wrapper { */
/*     --hi: oklch(0.25 0 0); */
/*     --lo: oklch(0.45 0 0); */
/*     border-width: 3px; */
/*     border-style: solid; */
/*     border-left-color: var(--hi); */
/*     border-right-color: var(--lo); */
/*     border-top-color: var(--hi); */
/*     border-bottom-color: var(--lo); */
/*     border-radius: 6px; */
/*     background-color: var(--foundation); */
/*     box-shadow: inset 0 0 24px oklch(0 0 0 / 0.4); */
/* } */


.subsection_image {
    margin: auto;
    padding: 4px;
    width: 100%;
    flex-basis: 31vw;
    flex-grow: 1;
    text-align: center;
}

.subsection_image img {
    border: 4px solid var(--text_col);
    padding: 4px;
    max-width: 100%;
    width: 100%;
}

.caption {
    --margin: 8px;
    text-align: center;
    font-size: 24px;
    font-style: italic;
    color: var(--subtitle_col);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--margin);
    width: max-content;
}

.subsection_subtext {
    color: var(--subtitle_col);
}

.headertext {
    color: var(--title_col);
}

.normaltext {
    /* font-size: 24px; */
    font-size: var(--text_size);
    color: var(--text_col);
    text-align: justify;
    border: var(--debug-border-width) solid var(--title_col);
}

.paratext {
    /* font-size: 24px; */
    color: var(--text_col);
    font-size: var(--text_size);
    text-align: justify;
}

footer {
    --title_col: var(--title_col_shade);
    --subtitle_col: var(--subtitle_col_shade);
    background: var(--foundation_shade);
}

.footer_bar {
    display: flex;
    min-width: stretch;
    justify-content: space-between;
    color: var(--title_col);
    font-weight: bold;
    margin: 0;
    padding: 10px;
    padding-left: 12px;
    padding-right: 12px;
    vertical-align: text-top;
    border: var(--debug-border-width) solid var(--title_col);
    flex-wrap: wrap;
    transform: translatez(2px);
}


header {
    background: var(--foundation_col);
}

.header_bar {
    display: flex;
    min-width: stretch;
    justify-content: space-between;
    color: var(--title_col);
    font-weight: bold;
    margin: 0;
    padding: 10px;
    padding-left: 12px;
    padding-right: 12px;
    vertical-align: text-top;
    border: var(--debug-border-width) solid var(--title_col);
    /* height: 128px; */
    flex-wrap: wrap;
    transform: translatez(2px);
}

.title_bar {
    display: flex;
    min-width: 128px;
    border: var(--debug-border-width) solid var(--title_col);
}

.title_line_thing {
    background: var(--title_col);
    width: 16px;
    min-height: stretch;
    margin-right: 10px;
}

.title_text {
    font-size: 64px;
    height: 48px;
    transform: translatey(-13px);
}

.subtitle_bar {
    display: flex;
    text-align: justify;
    color: var(--subtitle_col);
    border: var(--debug-border-width) solid var(--title_col);
    height: 90px;
    transform: translatey(12px);
}

.subtitle {
    /* font-size: var(--text_size); */
    font-size: 32px;
    text-align: justify;
}

.andpersand {
    font-size: 64px;
    margin-left: 10px;
    margin-right: 10px;
}

.navbar {
    --text_size: 32px;
    contain: layout;
    min-width: stretch;
    color: var(--title_col);
    background: linear-gradient(180deg, var(--foundation_col), var(--foundation_col) 20%, var(--foundation_shade));
    display: flex;
    justify-items: stretch;
    padding-bottom: 10px;
    transform-style: preserve-3d;
    transform: translatez(2px);
}

.nav_element {
    font-size: var(--text_size);
    color: var(--title_col);
    background: 0;
    margin: auto;
    border-radius: 16px;
    padding-left: 16px;
    padding-right: 16px;
}

.nav_selected {
    font-size: var(--text_size);
    color: var(--title_col);
    background: var(--foundation_shade);
    border-radius: 16px;
    margin: auto;
    padding-left: 16px;
    padding-right: 16px;
}

.nav_empty_bar {
    color: rgba(0, 0, 0, 0);
    background: var(--foundation_shade);
    border-radius: 16px;
    margin: auto;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 16px;
    margin-right: 1.2vw;
    width: 100%
}

.contactinfo {
    text-align: right;
    font-weight: normal;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: var(--debug-border-width) solid var(--title_col);
}

.phone {
    color: var(--link_col);
    font-size: 46px;
    font-weight: bold;
    display: flex;
    justify-content: end;
    border: var(--debug-border-width) solid var(--title_col);
}

.phone_link {
    color: var(--link_col);
    background: var(--foundation_shade);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 2px;
    padding-left: 12px;
    padding-right: 12px;
    box-shadow: inset 0 0 24px oklch(0 0 0 / 0.4);
}

.phone_text {
    transform: translatey(0px);
}

.phone_icon {
    height: stretch;
    width: calc(48px + 10px);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: linear-gradient(180deg, oklch(1 0 0), oklch(1 0 0) 20%, oklch(0.7 0 0));
    text-align: center;
    display: flex;
}

.phone_icon img {
    filter: invert(0.5);
    margin: auto;
    margin-right: 22%;
    width: 50%;
}

.address {
    color: var(--subtitle_col);
    font-size: var(--text_size);
    line-height: 30.5px;
    height: 32px;
    border: var(--debug-border-width) solid var(--title_col);
}

.free_quote {
    color: oklch(0 0 0 / 0);
    background: linear-gradient(var(--title_col_light) 10%, var(--title_col) 20%, var(--title_col_shade) 40%, var(--title_col_light) 50%, var(--title_col_shade) 70%);
    background-clip: text;
    font-size: 32px;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: 32px;
    border: var(--debug-border-width) solid var(--title_col);
}

.generac_ad {
    --round: max(1vh, 1vw);
    position: absolute;
    object-fit: cover;
    top: 48px;
    right: 8px;
    background: linear-gradient(180deg, oklch(1 0 0), oklch(1 0 0) 20%, oklch(0.7 0 0));
    color: oklch(0.5 0 0);
    border: 3px solid white;
    border-top-width: 0;
    border-bottom-left-radius: var(--round);
    border-bottom-right-radius: var(--round);
    visibility: hidden;
    animation: 1.0s ease-out 1s forwards ad_slide;
    transform: translatez(-1px);
}

.generac_ad > .generac_img {
    --size: max(12vh, 15vw);
    vertical-align: middle;
    border-radius: inherit;
    width: var(--size);
}

@keyframes ad_slide {
    0% {
        visibility: visible;
        transform: translatez(-1px) translatey(-120%);
    }
    100% {
        visibility: visible;
        transform: translatez(-1px) translatey(0%);
    }
}

.ad_cover {
    --g_hi: oklch(0.9 0 0);
    --g_mi: oklch(0.95  0 0);
    --g_lo: oklch(0.8  0 0);
    --hi: oklch(0.85 0 0);
    --lo: oklch(0.75  0 0);
    --size: max(2.4vh, 3.0vw);
    border-left-color: var(--hi);
    border-right-color: var(--lo);
    border-top-color: var(--hi);
    border-bottom-color: var(--lo);
    text-align: center;
    background: linear-gradient(90deg, var(--g_hi), var(--g_mi) 40%, var(--g_lo));
    backdrop-filter: blur(2px);
    color: oklch(0.3 0 0 / 0.7);
    animation: 0.8s ease-in 2.2s forwards ad_cover_slide;
    position: absolute;
    top: 0;
    font-weight: bold;
    align-content: center;
    font-size: var(--size);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-style: solid;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 0;
    border-bottom-width: 6px;
    transform: translatex(-6px);
    width: 100%;
    height: 110%;
}

@keyframes ad_cover_slide {
    0% {
        visibility: visible;
        transform: translatez(-1px) translatey(0%) translatex(-6px);
    }
    100% {
        visibility: visible;
        transform: translatez(-1px) translatey(-120%) translatex(-6px);
    }
}

@property --posy {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

.logo_male {
    --posy: 0;
    align-self: center;
    height: 50px;
}

.logo {
}

@keyframes wobble {
    0% {
        --posy: 0;
    }
    100% {
        --posy: calc(3.1415 * 2);
    }
}

.logo_wire {
    --posy: 0;
    --marge: calc(15 * 1.25px);
    width: 100%;
    align-self: center;
    max-width: unset;
    background: black;
    margin-top: var(--marge);
    margin-bottom: var(--marge);
    border-bottom: 14px solid black;
}

.title_logo {
    display: flex;
    width: 100%;
    height: initial;
    margin-bottom: 0px;
    margin-right: auto;
}

.gallery {
    --row-height: max(30vw, 30vh);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 32px;
}

.entry {
    --row-height: inherit;
    container-type: size;
    container-name: entry;
    height: var(--row-height);
    width: calc(var(--row-height) * var(--aspect));
    flex-basis: calc(var(--row-height) * var(--aspect));
    padding: 4px;
    margin: 8px;
    border: solid 4px var(--subtitle_col);
}

.entry img {
    height: 100cqh;
    width: 100cqw;
}

.footer_details {
    font-size: var(--text_size);
}