.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
  }

  .poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
  }

  .poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
  }

  .poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
  }

  .poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
  }

  .poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  .poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
  }

  .poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
  }

  .poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
  }

  .poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
  }

  .poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
  }

  .poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
  }

  .poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
  }

  .poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
  }

  .poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
  }

  .poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
  }

  .poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
  }

:root {

    --size-080: .563rem;
    --size-090: .75rem;
    --size-100: 1rem;
    --size-200: 1.333rem;
    --size-300: 1.777rem;
    --size-400: 2.369rem;
    --size-500: 3.157rem;
    --size-600: 4.209rem;
    --size-700: 5.61rem;

    @media screen and (min-width: 400px) {
        font-size: 1.05rem;
    }
    @media screen and (min-width: 600px) {
        font-size: 1.1rem;
    }
    @media screen and (min-width: 800px) {
        font-size: 1.2rem;
    }
    @media screen and (min-width: 1000px) {
        font-size: 1.25rem;
    }
    @media screen and (min-width: 1200px) {
        font-size: 1.3rem;
    }
    @media screen and (min-width: 1400px) {
        font-size: 1.4rem;
    }
}
    :root {
        --color-box-bg: #2F4F4F;
        --color-page-bg: #fff9e6;
        --color-text: #262626;
        --color-text-secondary: #490000;
        --color-text-reversed: #fff9e6;
        --color-text-reversed-secondary: #fff9e6;
        --color-highlight: #fbc32d;
        --txt:#36454F;
        --title:#0A0A0A;
        --off:#9CA3AF;
        --muted:#6B7280;
        --pill-bg:#efefef;
        --pill-text:#5d5d5d;
        --shimmer-1: #0A0A0A;
        --shimmer-2: #5E5E5E;
        --shimmer-3: #8C8C8C;
        --name-accent: #000ec9;
    }

body{
    margin: 0;
}
.body-dark{
    background-color: #090502;

    --txt: rgba(255, 255, 255, 1);
    --off: rgba(255, 255, 255, 0.55);
    --title: #FFFFFF;
    --muted: rgba(255, 255, 255, 0.62);
    --pill-bg: rgba(255, 255, 255, 0.12);
    --pill-text: rgba(255, 255, 255, 0.82);
    --shimmer-1: #FFFFFF;
    --shimmer-2: rgba(255, 255, 255, 0.78);
    --shimmer-3: rgba(255, 255, 255, 0.55);
    --name-accent: #4D5CFF;

    a:not(.header-link):not(.magical-text):not(.magical-nav), h1:not(.magical-text), h2:not(.magical-text), h3, h4, p, li{
        color: white !important;
    }
    h5{
        color: var(--txt);
    }
}

.body-home{
    background-color: var(--color-text);
    h1, h2, h3, h4, h5, p, li{
        color: var(--color-page-bg) !important;
    }
}

.no-overflow{
    overflow: hidden;
}

/* ---------------------------------------------------------------
   Text effects.
   Touch devices get a plain solid colour. There is no hover there,
   so a gradient whose resting state is the dim colour would strand
   the nav links at low contrast permanently.
   --------------------------------------------------------------- */

.magical-text{
    color: var(--title);
    font-kerning: normal;
    font-feature-settings: "kern" 1;
}

.magical-nav{
    color: var(--title);
}

@media (hover: hover) and (pointer: fine){

    .magical-text{
        background: linear-gradient(
            90deg,
            var(--shimmer-1) 0%,
            var(--shimmer-1) 30%,
            var(--shimmer-2) 40%,
            var(--shimmer-3) 50%,
            var(--shimmer-2) 60%,
            var(--shimmer-1) 70%,
            var(--shimmer-1) 100%
        );
        background-size: 400% auto;
        background-position: 0% center;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        transition: background-position 1300ms ease-out;
    }

    .magical-text:hover, .magical-text:focus-visible{
        background-position: 100% center;
    }

    .magical-nav{
        background: linear-gradient(
            90deg,
            var(--off) 0%,
            var(--off) 38%,
            var(--shimmer-2) 50%,
            var(--title) 62%,
            var(--title) 100%
        );
        background-size: 400% auto;
        background-position: 0% center;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        transition: background-position 900ms ease-out;
    }


    .magical-nav:hover, .magical-nav:focus-visible{
        background-position: 100% center;
    }

    .magical-nav[aria-current="page"]{
        background: none;
        color: var(--title);
    }
}

@media (prefers-reduced-motion: reduce){
    .magical-text, .magical-nav{
        transition: none;
    }
}

header{

    margin-top: 2rem;

    width: 100%;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    padding: 0rem 1rem;
    @media screen and (min-width: 600px) {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        margin-top: 2rem;
        width: 100%;
        z-index: 999;
        background-color: transparent;
        padding-right: 1rem;
        padding-left: 1rem;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    /* This is for the home page */
    .intro{

        @media screen and (min-width: 600px){
           width: 60%;
        }
        h1{
            font-family: "Poppins", sans-serif;
            font-weight: 700;
            margin-bottom: 1rem;
            font-size: 1rem;
            @media screen and (min-width: 600px){
                font-family: "Poppins", sans-serif;
                margin-bottom: 0.75rem;
                font-size: 1.5rem;
                letter-spacing: 0.01rem;
                font-weight: 700;
                color: #000ec9;
            }
        }
        p{
            font-family: "Poppins", sans-serif;
            font-weight: 300;
            display: none;
            @media screen and (min-width: 600px){
                font-family: "Poppins", sans-serif;
                font-size: 0.75rem;
                color: var(--title);
                font-weight: 400;
                display: block;
            }
        }
    }

    /* This is for inside pages */
    h1{
        color: var(--title);
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 1rem;
        width: 100%;
        color: #0046FF;

        @media screen and (min-width: 600px) {
            color: var(--title);
            font-family: "Poppins", sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size: 0.8rem;
            width: 55%;
            color: #0046FF;
        }
        a{
            font-weight: 700 !important;
            text-decoration: none;
            color: var(--title);
        }
    }

    ul{

        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 1rem;

        @media screen and (min-width: 600px) {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
            li{
                margin-right: 1rem;

                @media screen and (min-width: 600px) {
                    margin-right: 1rem;
                }
                a{
                width: auto;

                @media screen and (min-width: 600px) {
                    width: auto;
                }

                img{
                    background-color: white;
                    border-radius: 0.25rem;
                    }
                }
            }
            li:last-child{
                margin-right: 0;

                @media screen and (min-width: 600px) {
                    margin-right: 0;
                }
            }
        }
        ul .header-link{
            font-size: 1rem;
            font-family: "Poppins", sans-serif;
            text-decoration: none;
            font-weight: 400;
            @media screen and (min-width: 600px) {
                font-family: "Poppins", sans-serif;
                font-weight: 300;
                font-style: normal;
                font-size: 0.8rem;
                border-radius: 0.25rem;
                height: fit-content;
            }
        }

}

.section{
    width: 90%;
    max-width: 400px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 0rem;
    z-index: 9;

    @media screen and (min-width: 600px) {
        width: 100%;
        max-width: 1600px;
        margin: 0 auto;

        display: flex;
        flex-direction: column;
        margin-top: 0;
        margin-bottom: 3rem;
    }

    .intro, .project{
        background-color: transparent !important;
        height: auto;
        margin-top: 2rem !important;
        margin-bottom: 0rem;

        @media screen and (min-width: 600px) {
            height: auto;
            margin-top: 3rem;
            margin-bottom: 2rem !important;
        }

        h2{
            color: var(--title);
            width: 90%;
            max-width: 400px;
            margin: 0 auto;
            margin-top: 0rem;
            text-align: left;
            font-size: 1.2rem;
            line-height: 1.7rem;
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            font-style: normal;

            @media screen and (min-width: 600px) {
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
                margin-left: 0;
                margin-top: 0rem;
                text-align: left;
                font-size: 1.2rem;
                font-family: "Poppins", sans-serif;
                font-weight: 400;
                font-style: normal;
            }
        }

        h3{
            color: var(--title);
            font-family: "Poppins", sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
            line-height: 1.9rem;
            margin-bottom: 1.75rem;
            width: 100%;

            @media screen and (min-width: 600px) {
                width: 50%;
                font-family: "Poppins", sans-serif;
                font-weight: 700;
                font-size: 1.5rem;
                line-height: 2rem;
                margin-bottom: 2rem;
            }
        }

        h4{
            font-family: "Poppins", sans-serif;
            font-weight: 900;
            font-size: 16px;
            margin-bottom: 0.2rem;
            color: var(--title);

        }

        .specs{

            display: flex;
            flex-direction: column;
            margin-bottom: 2rem;

            @media screen and (min-width: 600px) {
                flex-direction: column;
                margin-bottom: 1rem;
            }
            div{
                margin-right: 3rem;
            }
            h5{
                font-family: "Poppins", sans-serif;
                font-weight: 300;
                font-size: 15px;
                margin-bottom: 0.2rem;
                color: var(--txt);
            }
            p{
                font-family: "Poppins", sans-serif;
                font-weight: 400;
                font-size: 16px;
                color: var(--title);
            }
            ul{
                margin-top: 0.2rem;
                @media screen and (min-width: 600px) {
                margin-top: 0.2rem;
                }

                li{
                    font-family: "Poppins", sans-serif;
                    font-weight: 400;
                    font-size: 16px;
                    color: var(--title);
                }
            }
        }
        .about{

            display: flex;
            flex-direction: row;
            justify-content: end;
            align-items: end;

            @media screen and (min-width: 600px) {
                width: 1000px !important;
                display: flex;
                flex-direction: column;
                justify-content: end;
                align-items: end;
            }

            div{

                width: 100%;
                display: flex;
                flex-direction: column;

                @media screen and (min-width: 600px) {
                    width: 60%;
                    display: flex;
                    flex-direction: column;
                }
                h4{
                    font-family: "Poppins", sans-serif;
                    font-weight: 400;
                    font-size: 20px;
                    margin-bottom: 0.5rem;
                    color: var(--title);
                    @media screen and (min-width: 600px) {
                        font-size: 15px;
                        margin-bottom: 0.2rem;
                        color: var(--txt);
                    }
                }
                p{
                    font-family: "Poppins", sans-serif;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 1.5rem;
                    @media screen and (min-width: 600px) {
                    font-size: 16px;
                    line-height: 1.1rem;
                    font-weight: 400;
                    }
                }
                .intro_text{
                    font-family: "Poppins", sans-serif;
                    font-weight: 200;
                    font-size: 15px;
                    color: rgb(70, 21, 21);
                }
            }

        }

        span{
            color: var(--txt);
            font-size: 0.5rem;
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            margin-bottom: 1rem;

            @media screen and (min-width: 600px) {
                font-size: 0.5rem;
                font-family: "Poppins", sans-serif;
                font-weight: 400;
                margin-bottom: 1rem;
            }
        }
        .p-details{
            font-size: 0.7rem;
            line-height: 1.1rem;
            @media screen and (min-width: 600px) {
                font-size: 0.7rem;
                line-height: 1.1rem;
            }
        }
        p{
            color: var(--txt);
            font-size: 1rem;
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            margin-bottom: 1rem;

            @media screen and (min-width: 600px) {
                font-size: 0.85rem;
                line-height: 1.25rem;
                font-family: "Poppins", sans-serif;
                font-weight: 400;
                margin-bottom: 0.75rem;
            }
        }
        }
    }

        .specs_about{
            width: 100%;
            height: auto;
            margin: 0 auto;
            height: auto;
            margin-bottom: 2rem;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom: 0rem !important;

            @media screen and (min-width: 600px) {
                width: 100%;
                height: auto;
                margin: 0 auto;

                height: auto;
                margin-bottom: 0rem;
                overflow: hidden;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start;
            }
        }

    .div_top{
        margin-top: 4rem !important;

        @media screen and (min-width: 600px) {
            margin-top: 4rem !important;
        }
    }

    .div-horizontal{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 0rem !important;

        @media screen and (min-width: 600px) {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: self-start;
        }
    }

    .div-vertical{
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        @media screen and (min-width: 600px) {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }
    }

    .full_bleed{
        width: 100%;
        height: auto;
        margin: 0 auto;
        height: auto;
        margin-bottom: 1rem;
        overflow: hidden;

        @media screen and (min-width: 600px) {
            width: 100%;
            height: auto;
            margin: 0 auto;

            height: auto;
            margin-bottom: 1.25rem !important;
            overflow: hidden;
        }
        img{
            width: 100%;
            height: auto;

            @media screen and (min-width: 600px) {
                width: 100%;
                height: auto;
            }
        }
        video{
            width: 100%;
            height: fit-content !important;

            @media screen and (min-width: 600px) {
                width: 100%;
                max-width: 100%;
                height: fit-content !important;
            }
        }

    }

    .div_content_row{
        width: 100%;
        height: auto;
        margin: 0 auto;
        height: auto;
        margin-bottom: 1rem;
        overflow: hidden;

        @media screen and (min-width: 600px) {
            width: 100%;
            max-width: 1400px;
            height: auto;
            margin: 0 auto;
            padding-right: 1rem;
            padding-left: 1rem;

            height: auto;
            margin-bottom: 1.25rem !important;
            overflow: hidden;
        }

        .a_img_row{
            justify-content: right;
            align-items: start;
            display: flex;
            flex-direction: column;
            text-decoration: none;

            @media screen and (min-width: 600px) {
                justify-content: right;
                align-items: start;
                display: flex;
                flex-direction: column;
                text-decoration: none;
            }
        }
            .h3_link{
                color: var(--title);
                width: 100% !important;
                margin: 0 auto;
                margin-bottom: 0.75rem;
                text-align: left;
                height: fit-content;
                font-family: "Poppins", sans-serif;
                font-weight: 400;
                font-style: normal;
                background-color: transparent;
                align-content: center;

                @media screen and (min-width: 600px) {
                    width: 70% !important;
                    text-align: left;
                    height: 40px;
                    font-family: "Poppins", sans-serif;
                    font-weight: 500;
                    font-style: normal;
                    align-content: center;
                    justify-content: center;
                    margin-top: 0.2rem;
                    font-size: 0.8rem;
                    margin-bottom: 0.2rem;
                }
            }

            .h3_center{
                color: var(--title);
                text-align: left;
                margin-left: 0;
                @media screen and (min-width: 600px) {
                    text-align: left;
                }
            }
            .skills-home{
                display: flex;
                flex-direction: row;
                margin-left: 0;
                li{
                    margin-bottom: 1rem;
                    text-align: left;
                    font-size: 0.65rem;
                    font-family: "Poppins", sans-serif;
                    color: var(--pill-text);
                    background-color: var(--pill-bg);
                    padding: 0.15rem 0.2rem;
                    border-radius: 0.2rem;
                    margin-right: 0.5rem;
                    padding: 0.15rem 0.75rem !important;
                    border-radius: 1rem !important;
                    font-size: 0.625rem !important;
                }
            }
            .caption{
                color: var(--muted);
                margin: 0 auto;
                margin-left: 0;
                margin-bottom: 1rem;
                text-align: center;
                font-size: 0.65rem;
                font-family: "Poppins", sans-serif;
                font-style: italic;
                background-color: transparent;
                padding: 0.25rem 0rem;
                border-radius: 1rem;

            }
            .a-img{
                text-decoration: none;

                @media screen and (min-width: 600px) {
                    text-decoration: none;
                }
                img{
                    margin-bottom: 1.1rem;
                    overflow: hidden;

                    @media screen and (min-width: 600px) {
                        margin-bottom: 1rem;
                        overflow: hidden;
                 }
            }

        }

    }

    .middle_text{

        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: end;

        @media screen and (min-width: 600px) {
            display: flex;
            flex-direction: column;
            justify-content: end;
            align-items: end;
            padding: 3rem 0rem 2rem;
        }

        div{

            width: 100%;
            display: flex;
            flex-direction: column;

            @media screen and (min-width: 600px) {
                width: 40%;
                display: flex;
                flex-direction: column;
                margin-right: 3rem;
            }
            h4{
                font-family: "Poppins", sans-serif;
                font-weight: 400;
                font-size: 20px;
                margin-bottom: 0.5rem;
                color: var(--title);
                @media screen and (min-width: 600px) {
                    font-size: 20px;
                    margin-bottom: 0.8rem;
                }
            }
            p{
                font-family: "Poppins", sans-serif;
                font-weight: 300;
                font-size: 16px;
                line-height: 1.5rem;
                @media screen and (min-width: 600px) {
                    font-size: 16px;
                    line-height: 1.1rem;
                }
            }
            .intro_text{
                font-family: "Poppins", sans-serif;
                font-weight: 200;
                font-size: 15px;
                color: rgb(70, 21, 21);
            }
        }

    }

        .a-horizontal{
            width: 100%;
            max-width: 400px;
            height: auto;
            align-items: start;

            @media screen and (min-width: 600px) {
                width: 100%;
                max-width: 1400px;
                height: auto;
                align-items: start;
            }
            div{
                width: 100%;
                max-width: 400px;
                height: auto;

                @media screen and (min-width: 600px) {
                    max-width: 1400px;
                    height: auto;
                }
            }
            .a-video{
                width: 100%;
                height: fit-content !important;

                @media screen and (min-width: 600px) {
                    width: 100%;
                    max-width: 1400px;
                    height: fit-content !important;
                }
            }
            img{
                width: 100%;
                max-width: 400px;
                height: fit-content !important;

                @media screen and (min-width: 600px) {
                    width: 100%;
                    max-width: 1400px;
                    height: fit-content !important;
                }
            }
            iframe{
                width: 100%;
                max-width: 400px;
                height: 350px;

                @media screen and (min-width: 600px) {
                    width: 100%;
                    max-width: 1400px;
                    height: 700px;
                }
            }
        }

        .a-vertical{
            width: 100%;
            max-width: 400px;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 1rem;

            @media screen and (min-width: 600px) {
                width: 49%;
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                max-width: 1400px;
                margin-bottom: 0;
            }
            div{
                width: 100%;
                max-width: 400px;
                height: auto;

                @media screen and (min-width: 600px) {

                    width: 100%;
                    max-width: 1400px;
                    height: auto;
                }
            }
            .a-video{
                width: 100%;
                height: fit-content !important;

                @media screen and (min-width: 600px) {

                    width: 100%;
                    max-width: 1400px;
                    height: fit-content !important;
                }
            }
            img, video{
                width: 100%;
                max-width: 400px;
                height: fit-content !important;

                @media screen and (min-width: 600px) {

                    width: 100%;
                    max-width: 1400px;
                    height: fit-content !important;
                }
            }
            .a-video{
                width: 100%;
                height: fit-content !important;

                @media screen and (min-width: 600px) {

                    width: 100%;
                    max-width: 1400px;
                    height: fit-content !important;
                    background-color: transparent;
                }
            }

        }

        .a-vertical-three{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 1rem;

            @media screen and (min-width: 600px) {
                width: 32%;
            }
            img{
                width: 100%;
                max-width: 400px;
                height: auto;

                @media screen and (min-width: 600px) {
                    width: 100%;
                    max-width: 1400px;
                    height: auto;
                }
            }
            .a-video{
                width: 100%;

                height: auto;

                @media screen and (min-width: 600px) {
                    width: 550px;
                    max-width: 1400px;
                    height: auto;
                    background-color: transparent;
                }
            }

        }

        .avt-poster{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 4rem;

            @media screen and (min-width: 600px) {
                width: auto;
                margin-right: 1rem;
                margin-bottom: 0rem;
            }
            img{
                width: 100%;
                max-width: 400px;
                height: auto;

                @media screen and (min-width: 600px) {
                    width: 100%;
                    max-width: 1400px;
                    height: auto;
                }
            }
            h3{
                font-weight: 500 !important;
            }

        }
        .avt-poster:last-child{
            margin-right: 0;

            @media screen and (min-width: 600px) {
                margin-right: 0;
            }

        }

    .a_ux{

        .div_profile{
            width: 150px !important;
            height: 150px !important;
            border-radius: 50%;
            background-color: #262626;
            margin-bottom: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            @media screen and (min-width: 600px) {
                width: 150px !important;
                height: 150px !important;
                border-radius: 50%;
                background-color: #262626;
                margin-bottom: 1rem;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            img{
                width: 120px;
                height: 120px;
            }
        }

        div{

            @media screen and (min-width: 600px) {
                width: 60% !important;
            }
            ul{
                font-family: "Poppins", sans-serif;
                @media screen and (min-width: 600px) {
                    font-family: "Poppins", sans-serif;
                    font-size: 0.8rem;
                    width: fit-content;
                    margin-bottom: 2rem;
                }
            }
            p{
                color: var(--txt);
                padding-top: 1rem !important;
                font-family: "Poppins", sans-serif;
                @media screen and (min-width: 600px) {
                    margin-left: 0 !important;
                    padding-left: 0 !important;
                    padding-top: 1rem !important;
                    text-align: left !important;
                    width: fit-content !important;
                    font-family: "Poppins", sans-serif;
                    font-size: 0.8rem;
                    padding: 0 !important;
                }
            }
        }
    }

    .h5-row{
        color: var(--title);
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        margin: 0 auto;
        font-size: 1.6rem;
        width: fit-content;
        max-width: 1400px;
        height: auto;
        padding: 0.5rem 0.8rem;
        margin-bottom: 0.5rem;
        @media screen and (min-width: 600px) {
        font-size: 1.4rem;
        }
    }
    .title_left{
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
        @media screen and (min-width: 600px) {
            margin-left: 0 !important;
            padding-left: 0 !important;
            text-align: left !important;
        }
    }
    .p_left{
        color: var(--txt);
        margin-left: 0 !important;
        padding-left: 0 !important;
        @media screen and (min-width: 600px) {
            margin-left: 0 !important;
            padding-left: 0 !important;
        }
    }

    .click{
         padding: 0.4rem 0.6rem;
                border: 1px solid var(--txt);
                border-radius: 1rem;
                width: fit-content;
                cursor: pointer;
                text-decoration: none;
                background-color: white;
                color: var(--title);
                font-family: "Poppins", sans-serif;
                font-weight: 400;
                margin: 0 auto;
                @media screen and (min-width: 600px) {
                    padding: 0.2rem 0.5rem;
                    border: 1px solid var(--title);
                    border-radius: 1rem;

                    width: fit-content;
                    cursor: pointer;
                    z-index: 999;
                    text-decoration: none;
                    font-size: 0.8rem;
                }
    }
    .click:hover{
                background-color: var(--title);
                color: white;
    }

.footer{

    width: 100%;
    margin-top: 0;
    height: auto;
    padding: 0rem 1rem;

    @media screen and (min-width: 600px) {
        width: 100%;
        margin-top: 0;
        height: auto;
        padding: 0rem 0rem 1.5rem;
    }
    div{
        width: 90%;
        max-width: 400px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        @media screen and (min-width: 600px) {
            width: 90%;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        p{
            color: var(--muted);
            font-family: "Poppins", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 0.7rem;
            text-align: center;

            @media screen and (min-width: 600px) {
                font-family: "Poppins", sans-serif;
                font-weight: 400;
                font-style: italic;
                font-size: 0.8rem;
            }
        }
        ul{

        display: flex;
        flex-direction: row;
        align-items: center;

        @media screen and (min-width: 600px) {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
            li{
                margin-right: 1rem;

                @media screen and (min-width: 600px) {
                    margin-right: 1rem;
                }
                a{
                width: auto;

                @media screen and (min-width: 600px) {
                    width: auto;
                }

                }
            }
            li:last-child{
                margin-right: 0;

                @media screen and (min-width: 600px) {
                    margin-right: 0;
                }
            }
        }
    }
}

.hide_on_mobile{
    display: none;
    @media screen and (min-width: 600px) {
        display: block;
    }
}

/* ---------------------------------------------------------------
   Thumbnail focus on hover. Desktop only by design: on touch the
   whole block is skipped, so every thumbnail stays at full
   brightness and nothing depends on a hover that can't happen.
   --------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine){
    .a_img_row .a-video,
    .a_img_row .a-img,
    .a_img_row img,
    .a_img_row video{
        transition: filter 500ms ease-out;
    }

    .a_img_row .h3_link,
    .a_img_row .skills-home{
        transition: opacity 500ms ease-out;
    }

    .a_img_row .skills-home li{
        transition: background-color 500ms ease-out, color 500ms ease-out;
    }

    .section.is-dimming .a_img_row .a-video,
    .section.is-dimming .a_img_row .a-img,
    .section.is-dimming .a_img_row img,
    .section.is-dimming .a_img_row video{
        filter: brightness(0.45);
    }

    .section.is-dimming .a_img_row .h3_link,
    .section.is-dimming .a_img_row .skills-home{
        opacity: 0.3;
    }

    .section.is-dimming .a_img_row:hover .a-video,
    .section.is-dimming .a_img_row:hover .a-img,
    .section.is-dimming .a_img_row:hover img,
    .section.is-dimming .a_img_row:hover video{
        filter: brightness(1);
    }

    .section.is-dimming .a_img_row:hover .h3_link,
    .section.is-dimming .a_img_row:hover .skills-home{
        opacity: 1;
    }

    .section.is-dimming .a_img_row:hover .skills-home li{
        background-color: #FFF3C4;
        color: #6B5A14;
    }
}