:root {
    --bg-primary: #007d3c;
    --bg-primary-subtle: rgb(77, 192, 133);
    --bg-primary-subtle: hsl(149, 48%, 43%);
    --bg-primary-subtle: hsl(149, 100%, 30%);
    --bg-body: hsl(149, 48%, 88%);
    --text-color-light: #ddffde;
    --text-color-light: #fff;
    --text-color-light-subtle: hsl(122, 100%, 93%);
    --text-color-light-subtle: hsl(141, 73%, 95%);

    --breakpoint-sm: 576px;
    --breakpoint-md: 768;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    text-wrap: balance;
    box-sizing: border-box;
    line-height: 1.25;
}

body {
    overflow-x: hidden;
    background-color: var(--bg-body);
}

h1 {
    font-size: 2rem;
}

hr {
    border-width: 0.5px;
    height: 0.5px;
    opacity: 0.5;
}

a {
    transition: 0.3s;
}

a:hover {
    opacity: 0.7;
}

svg {
    width: 8%;
    margin-right: 5px;
    vertical-align: text-top;
}

/* span svg {
    width: 30px;
} */

.icon-holder {
    width: 30px;
    margin-right: 5px;
}

.icon-holder svg {
    width: 100%;
}

.header+hr {
    border: solid;
    border-width: 1px;
    height: 0;
    opacity: 0.5;
}

.bg-primary {
    background-color: var(--bg-primary);
    color: var(--text-color-light);
}

.bg-primary-subtle {
    background-color: var(--bg-primary-subtle);
    color: var(--text-color-light);
}

.bg-primary-subtle p,
.bg-primary-subtle li {
    color: var(--text-color-light-subtle);
}

.bg-primary p {
    color: var(--text-color-light-subtle);
}

.bg-white {
    background-color: #fff;
}

.container {
    display: flex;
    position: relative;
}

.container-child {
    padding: 1rem;
}

.container-main {
    width: 1320px;
    margin: 0 auto;
    /*TODO - convert to mx-auto*/
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-items-center {
    align-items: center;
}

.alig-items-start {
    align-items: start;
}

.align-items-flex-start {
    align-items: flex-start;
}

.gap-05 {
    gap: 0.5rem;
}

.d-none {
    display: none;
}

.lh-125 {
    line-height: 1.25;
}

.link-subtle {
    color: var(--text-color-light-subtle);
}

/* .link-subtle:hover {
    opacity: 0.7;
} */

.visibility-hidden {
    visibility: hidden;
}

.visibility-collapse {
    visibility: collapse;
}

#titles .titles-item {
    position: relative;
}

/* Add dot after each title, but hide the dot on the last item */
#titles .titles-item:not(:last-child)::after {
    content: var(--dot, "•");
    position: absolute;
    right: 0;
    color: var(--text-color-light-subtle);
}

/* text-align classes */
.text-align-center {
    text-align: center;
}

.text-align-start {
    text-align: start;
}

.text-align-end {
    text-align: end;
}

/*  */

/* list-style-type classes */
* {
    .list-type-none {
        list-style-type: none;
    }

    .list-type-disc {
        list-style-type: disc;
    }

    .list-type-circle {
        list-style-type: circle;
    }
}

/*  */

/* justify-content classes */
* {
    .justify-content-center {
        justify-content: center;
    }

    .justify-content-space-between {
        justify-content: space-between;
    }

    .justify-content-space-evenly {
        justify-content: space-evenly;
    }

    .justify-content-space-around {
        justify-content: space-around;
    }
}

/*  */

/* flex-direction classes */
* {
    .flex-col {
        flex-direction: column;
    }

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

/*  */

/* margin classes */
* {
    .m-0 {
        margin: 0;
    }

    .m-1 {
        margin: 1rem;
    }

    .m-2 {
        margin: 2rem;
    }

    .m-3 {
        margin: 3rem;
    }

    .m-4 {
        margin: 4rem;
    }

    /* margin-x classes */
    * {
        .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .mx-0 {
            margin-left: 0;
            margin-right: 0;
        }

        .mx-1 {
            margin-left: 1rem;
            margin-right: 1rem;
        }

        .mx-2 {
            margin-left: 2rem;
            margin-right: 2rem;
        }

        .mx-3 {
            margin-left: 3rem;
            margin-right: 3rem;
        }

        .mx-4 {
            margin-left: 4rem;
            margin-right: 4rem;
        }
    }

    /*  */
    /* margin-y classes */
    * {
        .my-0 {
            margin-top: 0;
            margin-bottom: 0;
        }

        .my-1 {
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        .my-2 {
            margin-top: 2rem;
            margin-bottom: 2rem;
        }

        .my-3 {
            margin-top: 3rem;
            margin-bottom: 3rem;
        }

        .my-4 {
            margin-top: 4rem;
            margin-bottom: 4rem;
        }
    }

    /*  */
    /* margin-left classes */
    * {
        .ms-0 {
            margin-left: 0;
        }

        .ms-auto {
            margin-left: auto;
        }

        .ms-05 {
            margin-left: 0.5rem;
        }

        .ms-1 {
            margin-left: 1rem;
        }

        .ms-2 {
            margin-left: 2rem;
        }

        .ms-3 {
            margin-left: 3rem;
        }

        .ms-4 {
            margin-left: 4rem;
        }

        /* margin-left-px classes */
        * {
            .ms-01px {
                margin-left: 1px;
            }

            .ms-02px {
                margin-left: 2px;
            }

            .ms-03px {
                margin-left: 3px;
            }

            .ms-04px {
                margin-left: 4px;
            }

            .ms-05px {
                margin-left: 5px;
            }

            .ms-06px {
                margin-left: 6px;
            }

            .ms-07px {
                margin-left: 7px;
            }

            .ms-08px {
                margin-left: 8px;
            }

            .ms-09px {
                margin-left: 9px;
            }

            .ms-10px {
                margin-left: 10px;
            }
        }

        /*  */
    }

    /*  */
    /* margin-right classes */
    * {
        .me-0 {
            margin-right: 0;
        }

        .me-auto {
            margin-right: auto;
        }

        .me-1 {
            margin-right: 1rem;
        }

        .me-2 {
            margin-right: 2rem;
        }

        .me-3 {
            margin-right: 3rem;
        }

        .me-4 {
            margin-right: 4rem;
        }

        /* margin-right-px classes */
        * {
            .me-01px {
                margin-right: 1px;
            }

            .me-02px {
                margin-right: 2px;
            }

            .me-03px {
                margin-right: 3px;
            }

            .me-04px {
                margin-right: 4px;
            }

            .me-05px {
                margin-right: 5px;
            }

            .me-06px {
                margin-right: 6px;
            }

            .me-07px {
                margin-right: 7px;
            }

            .me-08px {
                margin-right: 8px;
            }

            .me-09px {
                margin-right: 9px;
            }

            .me-10px {
                margin-right: 10px;
            }
        }

        /*  */
    }

    /*  */
    /* margin-top classes */
    * {
        .mt-0 {
            margin-top: 0;
        }

        .mt-03 {
            margin-top: 0.3rem;
        }

        .mt-1 {
            margin-top: 1rem;
        }

        .mt-2 {
            margin-top: 2rem;
        }

        .mt-3 {
            margin-top: 3rem;
        }

        .mt-4 {
            margin-top: 4rem;
        }
    }

    /*  */
    /* margin-bottom classes */
    * {
        .mb-0 {
            margin-bottom: 0;
        }

        .mb-02 {
            margin-bottom: 0.2rem;
        }

        .mb-03 {
            margin-bottom: 0.3rem;
        }

        .mb-04 {
            margin-bottom: 0.4rem;
        }

        .mb-05 {
            margin-bottom: 0.5rem;
        }

        .mb-1 {
            margin-bottom: 1rem;
        }

        .mb-2 {
            margin-bottom: 2rem;
        }

        .mb-3 {
            margin-bottom: 3rem;
        }

        .mb-4 {
            margin-bottom: 4rem;
        }
    }

    /*  */
}

/*  */

/* order classes */
* {
    .order-1 {
        order: 1;
    }

    .order-2 {
        order: 2;
    }

    .order-3 {
        order: 3;
    }
}

/*  */

/* padding classes */
* {
    .p-0 {
        padding: 0;
    }

    .p-1 {
        padding: 1rem;
    }

    .p-2 {
        padding: 2rem;
    }

    .p-3 {
        padding: 3rem;
    }

    /* padding-x classes */
    * {
        .px-0 {
            padding-left: 0;
            padding-right: 0;
        }

        .px-1 {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .px-2 {
            padding-left: 2rem;
            padding-right: 2rem;
        }

        .px-3 {
            padding-left: 3rem;
            padding-right: 3rem;
        }
    }

    /*  */

    /* padding-y classes */
    * {
        .py-0 {
            padding-top: 0;
            padding-bottom: 0;
        }

        .py-1 {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .py-2 {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }

        .py-3 {
            padding-top: 3rem;
            padding-bottom: 3rem;
        }
    }

    /*  */

    /* padding-left classes */
    * {
        .ps-07 {
            padding-left: 0.7rem;
        }

        .ps-1 {
            padding-left: 1rem;
        }

        .ps-2 {
            padding-left: 2rem;
        }

        .ps-3 {
            padding-left: 3rem;
        }
    }

    /*  */

    /* padding-right classes */
    * {
        .pe-1 {
            padding-right: 1rem;
        }

        .pe-2 {
            padding-right: 2rem;
        }

        .pe-3 {
            padding-right: 3rem;
        }
    }

    /*  */

    /* padding-top classes */
    * {
        .pt-0 {
            padding-top: 0;
        }

        .pt-1 {
            padding-top: 1rem;
        }

        .pt-2 {
            padding-top: 2rem;
        }

        .pt-3 {
            padding-top: 3rem;
        }
    }

    /*  */

    /* padding-bottom classes */
    * {
        .pb-0 {
            padding-bottom: 0;
        }

        .pb-1 {
            padding-bottom: 1rem;
        }

        .pb-2 {
            padding-bottom: 2rem;
        }

        .pb-3 {
            padding-bottom: 3rem;
        }
    }

    /*  */
}

/*  */

/* text-color classes */
.text-color-light {
    color: var(--text-color-light);
}

.text-color-light-subtle {
    color: var(--text-color-light-subtle);
}

/*  */

/* width classes */
* {
    .w-0 {
        width: 0;
    }

    .w-auto {
        width: auto;
    }

    .w-max-content {
        width: max-content;
    }

    /* width % classes */
    * {
        .w-10 {
            width: 10%;
        }

        .w-20 {
            width: 20%;
        }

        .w-25 {
            width: 25%;
        }

        .w-33 {
            width: 33.33%;
        }

        .w-50 {
            width: 50%;
        }

        .w-66 {
            width: 66.66%;
        }

        .w-75 {
            width: 75%;
        }

        .w-80 {
            width: 80%;
        }

        .w-90 {
            width: 90%;
        }

        .w-100 {
            width: 100%;
        }
    }

    /*  */

    /* width px classes */
    * {
        .w-250px {
            width: 250px;
        }

        .w-279px {
            width: 279px;
        }

        .w-330px {
            width: 330px;
        }

        .w-1 {
            width: 540px;
        }

        .w-2 {
            width: 720px;
        }

        .w-3 {
            width: 960px;
        }

        .w-4 {
            width: 1140px;
        }

        .w-5 {
            width: 1320px;
        }
    }

    /*  */
    /* max-width classes */
    * {

        /* max-width-vw classes */
        * {
            .max-w-10vw {
                max-width: 10vw;
            }

            .max-w-20vw {
                max-width: 20vw;
            }

            .max-w-25vw {
                max-width: 25vw;
            }

            .max-w-33vw {
                max-width: 33.33vw;
            }

            .max-w-50vw {
                max-width: 50vw;
            }

            .max-w-66vw {
                max-width: 66.66vw;
            }

            .max-w-75vw {
                max-width: 75vw;
            }

            .max-w-80vw {
                max-width: 80vw;
            }

            .max-w-90vw {
                max-width: 90vw;
            }

            .max-w-100vw {
                max-width: 100vw;
            }
        }

        /*  */
        /* max-width-percent classes */
        * {
            .max-w-10 {
                max-width: 10%;
            }

            .max-w-20 {
                max-width: 20%;
            }

            .max-w-25 {
                max-width: 25%;
            }

            .max-w-33 {
                max-width: 33.33%;
            }

            .max-w-50 {
                max-width: 50%;
            }

            .max-w-66 {
                max-width: 66.66%;
            }

            .max-w-75 {
                max-width: 75%;
            }

            .max-w-80 {
                max-width: 80%;
            }

            .max-w-90 {
                max-width: 90%;
            }

            .max-w-100 {
                max-width: 100%;
            }
        }

        /*  */

        /* max-width-content classes */
        * {
            .max-w-min-content {
                max-width: min-content;
            }

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

        /*  */
    }

    /*  */

    /* min-width classes */
    * {

        /* min-width-content classes */
        * {
            .min-w-min-content {
                min-width: min-content;
            }

            .min-w-max-content {
                min-width: max-content;
            }
        }

        /*  */
    }

    /*  */
}

/*  */

@media screen and (max-width: 1400px) {
    .container-main {
        width: 1140px;
    }

    .flex-col-xxl {
        flex-direction: column;
    }

    .flex-row-xxl {
        flex-direction: row;
    }
}

@media screen and (max-width: 1200px) {
    .container-main {
        width: 960px;
    }

    .flex-col-xl {
        flex-direction: column;
    }

    .flex-row-xl {
        flex-direction: row;
    }
}

@media screen and (max-width: 992px) {
    .container-main {
        width: 720px;
    }

    .flex-col-lg {
        flex-direction: column;
    }

    .flex-row-lg {
        flex-direction: row;
    }
}

@media screen and (max-width: 768px) {
    svg {
        width: 10%;
        vertical-align: middle;
    }

    .container-main {
        width: 540px;
    }

    .container-md {
        display: flex;
    }

    .justify-content-space-evenly-md {
        justify-content: space-evenly;
    }

    .order-1-md {
        order: 1;
    }

    .order-2-md {
        order: 2;
    }

    .flex-col-md {
        flex-direction: column;
    }

    .flex-row-md {
        flex-direction: row;
    }

    .ms-0-md {
        margin-left: 0;
    }

    .mt-0-md {
        margin-top: 0;
    }

    .mt-1-md {
        margin-top: 1rem;
    }

    .mb-0-md {
        margin-bottom: 0;
    }

    .w-100-md {
        width: 100%;
    }

    .max-w-min-content-md {
        max-width: min-content;
    }

    /* This section ensures enough spacing to the list-dots */
    #techniques-section {
        min-width: calc(50% - 2rem) !important;
        padding-left: 1.5rem;
        padding-right: 0.5rem;
    }

    #contact-and-platforms-section {
        padding: 0 0.5rem;
    }

    #languages-section {
        padding: 0 0.5rem;
    }
}

@media screen and (max-width: 576px) {
    .container-main {
        width: 100%;
    }

    .d-none-sm {
        display: none;
    }

    .flex-col-sm {
        flex-direction: column;
    }

    .flex-row-sm {
        flex-direction: row;
    }

    .mt-0-sm {
        margin-top: 0;
    }
}

@media screen and (max-width: 426px) {
    .d-none-xs {
        display: none;
    }

    .flex-col-xs {
        flex-direction: column;
    }

    .flex-row-xs {
        flex-direction: row;
    }

    .mt-1-xs {
        margin-top: 1rem;
    }

    .mx-auto-xs {
        margin-left: auto;
        margin-right: auto;
    }
}