:root {
    --side-pad: 200px;

    --very-sml-pad: 5px;
    --sml-pad: 10px;
    --mid-pad: 20px;
    --big-pad: 40px;
    --huge-pad: 130px;
}

.bg,.bg-2,.bg-3,.fg,.fg-2,.fg-3,.relative {position: relative}
.root {background-color: var(--root)}
.bg {background-color: var(--bg)}
.bg-2 {background-color: var(--bg-2)}
.bg-3 {background-color: var(--bg-3)}
.fg {background-color: var(--fg)}
.fg-2 {background-color: var(--fg-2)}
.fg-3 {background-color: var(--fg-3)}
.accent {color: var(--accent)}
.accent-2 {color: var(--accent-2)}
.accent-3 {color: var(--accent-3)}
.side-by-side, .stacked {display: flex}
.stacked {flex-direction: column}
.invert {color: var(--bg)}
.side-pad {padding: 0 var(--side-pad)}
.title-font {font-family: var(--title)}
.head-font {font-family: var(--head)}
.writing-font {font-family: var(--writing)}
.relative {position: relative}

.bold, h1, h2, h3, h4, h5, h6 {font-weight: var(--bold)}
.thin {font-weight: normal}

.width {
    width: 100%;
    flex: 1 1 auto;
}

.fit-content {
    width: fit-content;
}

.center {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.right {
    text-align: right;
}

.align-center {align-items: center}

.vs {gap: var(--very-sml-pad)}
.s {gap: var(--sml-pad)}
.m {gap: var(--mid-pad)}
.b {gap: var(--big-pad)}
.h {gap: var(--huge-pad)}

.pls {padding-left: var(--sml-pad)}
.prs {padding-right: var(--sml-pad)}
.pts {padding-top: var(--sml-pad)}
.pbs {padding-bottom: var(--sml-pad)}

.plm {padding-left: var(--mid-pad)}
.prm {padding-right: var(--mid-pad)}
.ptm {padding-top: var(--mid-pad)}
.pbm {padding-bottom: var(--mid-pad)}

.plb {padding-left: var(--big-pad)}
.prb {padding-right: var(--big-pad)}
.ptb {padding-top: var(--big-pad)}
.pbb {padding-bottom: var(--big-pad)}

.plh {padding-left: var(--huge-pad)}
.prh {padding-right: var(--huge-pad)}
.pth {padding-top: var(--huge-pad)}
.pbh {padding-bottom: var(--huge-pad)}

.mls {margin-left: var(--sml-pad)}
.mrs {margin-right: var(--sml-pad)}
.mts {margin-top: var(--sml-pad)}
.mbs {margin-bottom: var(--sml-pad)}

.mlm {margin-left: var(--mid-pad)}
.mrm {margin-right: var(--mid-pad)}
.mtm {margin-top: var(--mid-pad)}
.mbm {margin-bottom: var(--mid-pad)}

.mlb {margin-left: var(--big-pad)}
.mrb {margin-right: var(--big-pad)}
.mtb {margin-top: var(--big-pad)}
.mbb {margin-bottom: var(--big-pad)}

.mlh {margin-left: var(--huge-pad)}
.mrh {margin-right: var(--huge-pad)}
.mth {margin-top: var(--huge-pad)}
.mbh {margin-bottom: var(--huge-pad)}

@media screen and (max-width: 1150px) {
    .img-card {
        max-width: 200px;
        min-width: 0;
    }

    .service > .side-by-side {
        flex-direction: column-reverse;
        align-items: center;
    }

    .service > .side-by-side h2 {
        text-align: center;
    }

    .service .side-by-side .side-by-side {
        width: 100%;
        flex-direction: row;
        justify-content: space-evenly;
        position: relative;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --side-pad: 150px
    }
}

@media screen and (max-width: 950px) {
    :root {
        --side-pad: 100px
    }
}

@media screen and (max-width: 800px) {
    :root {
        --side-pad: 50px
    }

    footer .deco {
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 150%;
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 700px) {
    :root {
        --h1: 40px
    }

    .hero-cover svg {
        height: 100px;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --side-pad: 30px
    }

    .hero-cover {
        flex-direction: column;
    }

    #title-hold {
        display: none;
    }

    .nav-links, .nav-buttons, .nav-button-hold, .nav-button {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    footer .deco {
        width: 200%;
    }

    footer > .side-by-side {
        flex-direction: column-reverse;
        gap: 25px
    }

    footer .side-by-side div, footer .side-by-side a, footer .icons {
        justify-content: center;
        text-align: center;
    }

    footer .icons {
        margin-top: 10px;
    }

    .hero-cover > div:first-child {
        flex: 1 0 auto;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        padding: 20px;
        background-color: #fff;
    }

    .service .side-by-side .side-by-side img {
        width: 100%;
        height: 150px;
    }
}

@media screen and (max-width: 550px) {
    .profile {
        width: 100%;
        height: 300px;
        float: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .profile + .stacked {
        align-items: center;
        text-align: center;
        padding-top: 20px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 400px) {
    .service .side-by-side .side-by-side img {
        width: auto;
        height: 150px;
        min-width: 0;
        max-width: 100%;
    }

    footer .deco {
        width: 300%;
    }

    .service .side-by-side .side-by-side {
        flex-direction: column;
    }

    #pricing-list .side-by-side {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media screen and (max-width: 350px) {
    :root {
        --side-pad: 10px
    }
}