@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
    --bg-color: #E8AA42 ;
    --bg-sec-color: #025464;
    --h1-font: "Ubuntu";
    --p-font: "Noto Sans";
}

body {
    background-color: var(--bg-sec-color);
    margin: 0;
    padding: 0;

    overflow-x: hidden;
}

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

h1 {
    font-family: var(--h1-font);
    color: var(--bg-color);
}


h1.titles {
    font-size: clamp(1.5rem, 2.2rem, 3rem);
    text-align: center;
    
}

p {
    font-family: var(--p-font);
}

@media screen and (max-width: 900px) {
    /* Portrait and small screens */
    .banner_text {
        font-family: Noto Sans;
        font-weight: 900;
        font-size: 3.5rem;
        margin: 0 1dvw 2dvw 1dvw;
        padding: 0;
        text-align: center;
    }
    
    div.spacer {
        display: block;
        background-color: var(--bg-sec-color);
        width: auto;
        height: 100dvh;
        overflow-x: hidden;
    }

    div.intro_banner {
        margin: 2dvh;
        display: block;
    }

    div.svg_wrap {
        display: block;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    div.svg_wrap.nudge {
        transform: translateY(-5%);
    }
    
    .banner_text:nth-child(2) {
        color:#4fbed4;
        font-size: 4rem;
        line-height: .1rem;
    }

    .wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin: 2rem 0;
    }

    .wrap_2 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: var(--bg-color);
        margin: 0;
        overflow: hidden;
        transform: translateY(-5px);
    }

    p.titles {
        color: aliceblue;
        font-family: Roboto;
        font-size:1rem;
        text-align: center;
        margin: 1dvh 0;
    }

    .content {
        margin: 10px 10px;
        padding: 0 3px;
        font-optical-sizing: var(--bg-sec-color);
        color: #025464;
        text-align: center;
        font-size: clamp(1rem, 1.3rem, 1.5rem);
        margin-inline: 10px;
    }

    .context {
        font-size: clamp(.5rem, .85rem, 1.2rem);
        color: black;
        margin: 5px 20px 5px 20px;
    
    }
    p.content {
        text-align: center;
        font-family: Noto Sans;
    }

    .box_divider {
        width: auto;
        height: 5px;
        border-radius: 10px;
        margin: 0;
        padding: 0;
        background-color: rgba(83, 83, 83, 0.534);

    }

    .carousel {
        display: grid;
        gap: .7rem;
        grid-auto-flow: column;
        grid-auto-columns: 40%;

        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        
        margin-block: 1rem;

        margin: 0 3rem 5rem 3rem;
    }

    .float_wrapper {
        display: grid;
        grid-template-rows: min-content;

        padding: .5rem;
        background-color: #0254644d;
        border-radius: .25rem;

    }
    .float_wrapper > .float_img {
        inline-size: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        border-radius: 2px;
    }

    .float_wrapper > p {
        font-family: 'Roboto';
        color: black;
        font-weight: 400;
        font-size: clamp(.65rem, .85rem, 1rem);
        text-align: left;
        text-wrap: balance;
    }

    .inline-snap {
        scroll-snap-type: inline mandatory;
    }

    .inline-snap > * {
        scroll-snap-align: start;
    }

    .spacer {
        height: 40dvh;
    }

    .spacer > dotlottie-player {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -100%);
    }

    p > a {
        text-decoration: none;
        color:var(--bg-sec-color);
        font-weight: bold;
    }

    .add_margin {
        margin-top: 3rem;
    }

    .work_experience {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin: 2rem 10dvw;


    }

    .exp {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        max-height: 120px;
        justify-content: center;
        align-items: center;
        background-color: #00313b;
        padding: 1.5rem;
        border-radius: 10px;

    }

    .exp > * {
        flex: 1;
    }

    .exp > h1 {
        font-family: "Noto Serif";
        text-align: center;
        font-size: clamp(0.75rem, 0.95rem, 1.2rem);
    }


    .exp_card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 50%;
    }

    .exp_card > img {
        max-width: 50%;
        height: auto;
        margin: auto;
        background-color: var(--bg-color);
        border-radius: 50%;
        object-fit: cover;
    }

    .exp_card > p {
        font-family: Roboto;
        text-align: center;
        color: var(--bg-color);
        margin: 0;
        font-size: clamp(0.55rem, 0.75rem, 1rem);
    }

    .prog_experience {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        align-items: center;
        gap: 0.5rem; 
        margin: 2rem 10dvw;
       }

    .tech { 
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        background-color: #00313b;
        border-radius: 10px;
        padding: 1rem;

    }

    .tech > h1 {
        font-family: "Noto Serif";
        text-align: center;
        font-size: clamp(0.95rem, 1.1rem, 1.5rem);
    }


    .tech_card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 120px;

    }

    .tech_card > img {
        max-width: 50%;
        border-radius: 25%;
        object-fit: cover;

    }

    .tech_card > p {
        font-family: Roboto;
        text-align: center;
        color: var(--bg-color);
        margin: 0;
        text-wrap: balance;
        font-size: clamp(0.55rem, 0.75rem, 1rem);

    }

    .space_divider {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-block: 1rem;

    }
    .line_divide {
        height: 4px;
        width: 30vw;
        background-color: var(--bg-color);
        border-radius: 2px;

    }

    .circles {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: .3rem;

        margin-block: 3rem ;


    }

    .small_circle {
        width: .4rem;
        height: .4rem;
        border-radius: .2rem;
        background-color: #E8AA42;
        margin-inline: .5rem;
    }

    .large_circle {
        width: 1rem;
        height: 1rem;
        border-radius: .5rem;
        background-color: #E8AA42;
        margin-inline: .5rem;
    }
    
    footer {
        display: flex;
        flex-direction: row;
        max-height: 6rem;
        margin-top: 5rem;
        padding: 0;
        background-color: var(--bg-sec-color);
        box-shadow: 0px -5px 5px #f4f4f470;
        justify-content: space-between;
        align-items: center;
        gap: 10dvw;
    }

    footer > h1{
        font-size: 1.2rem;
        font-family: "Roboto";
        color: aliceblue;
        text-align: left;
        font-weight: 400;
        margin: 1rem;
        padding: 1rem;
    }

    
    .flex_menu { 
        flex: 1;

        max-width: 50%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-content: center;
        align-items: center;
        margin-left: 1rem;
        
    }


    .menu_item {
        text-align: center;
        max-width: 100%;
    }
    .menu_item  > a > img {
        width: 50%;
        max-width: 30px;
        margin: 0;
        background-color: white;
        border-radius: 50%;
        padding: .2rem;
        margin: .2rem;
    }
}

@media screen and (min-width: 901px) {
    /* Landscape and larger screens */
    .header {
        background-color: #00313b;
    }
    dotlottie-player {
        display: none;
    }

    .title-wrapper > .titles {
        display: none;
    }

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

    .c1, .c2, .c3 {
        color: white;
        font-size: 2.5rem;
    }

    .context {
        color: var(--bg-color);
        font-size: 1.5rem;
        font-weight: 300;
        margin-inline: 20dvw;
        text-align: justify;
    
    }
    .intro_banner {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-transform: lowercase;
        background-color: #00313b;
        height: calc(102dvh - 15vh);
    }

    .intro_banner > * {
        font-family: "Inter";
        font-weight: 900;
        font-size: clamp(6rem, 7rem, 10rem);
        color: rgb(7, 244, 244);
        margin: 0;
    }

    div.intro_banner > h1 > span {
        font-size: clamp(4rem,6rem,10rem);
        position: relative;
        text-shadow:
            0 0 .05em rgba(255, 255, 255, 0.505) ,
            0 0 .09em azure ;

        animation: pulsing-effect-font 5s ease infinite ;
    }

    div.intro_banner > h1 > span::before {
        content: '';
        position: absolute;
        background-color: rgb(186, 255, 255);
        top: 100%;
        bottom: 0;
        width: 100%;
        height: 100%;

        transform: perspective(1em) rotateX(40deg) scale(1, 0.14);
        filter: blur(2em);

        animation: pulsing-shadow 5s ease infinite;
    }

    
    .wrapper > * {
        margin: 0;
    }


    .svg_wrap {
        display: none;
    }

    .carousel {
        display: grid;
        gap: .7rem;
        grid-auto-flow: column;
        grid-auto-columns: 25%;

        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        
        margin-block: 1rem;

        margin: 2rem 20dvw;
    }

    .float_wrapper {
        display: grid;
        grid-template-rows: min-content;

        padding: .5rem;
        background-color: #00d5ffa9;
        border-radius: 1rem;

        margin: 2rem 1rem;

    }
    .float_wrapper > .float_img {
        inline-size: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        border-radius: 1rem;
    }

    .float_wrapper > p {
        font-family: 'Roboto';
        color: black;
        font-weight: 400;
        font-size: clamp(.8rem, 1rem, 1.25rem);
        text-align: left;
        text-wrap: balance;
    }

    .inline-snap {
        scroll-snap-type: inline mandatory;
    }

    .inline-snap > * {
        scroll-snap-align: start;
    }

    .work_experience {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        flex-direction: row;
        gap: 2rem;
        margin: 2rem 20dvw;

    }

    .exp {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        background-color: #00313b;
        padding: 1rem;
        border-radius: 10px;
    }

    .exp > h1 {
        font-family: "Noto Serif";
        text-align: center;
        margin: 1rem 0;
    }


    .exp_card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 30%;

    }

    .exp_card > img {
        max-width: 45%;
        height: auto;
        margin: auto;
        background-color: var(--bg-color);
        border-radius: 50%;
        object-fit: cover;
        margin: 1rem;
    }

    .exp_card > p {
        font-family: Roboto;
        text-align: center;
        color: var(--bg-color);
        margin: 0;
    }

    .prog_experience {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        gap: 1rem;
        margin: 2rem 20dvw;

    }

    .tech {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        background-color: #00313b;
        border-radius: 10px;
        padding: 10px;

    }


    .tech > h1 {
        font-family: "Noto Serif";
        text-align: center;
    }


    .tech_card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 120px;
        gap: 1rem;
    }

    .tech_card > img {
        max-width: 50%;
        border-radius: 25%;
        object-fit: cover;

    }

    .tech_card > p {
        font-family: Roboto;
        text-align: center;
        color: var(--bg-color);
        margin: 0;
        text-wrap: balance;
    }

    .space_divider {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-block: 1rem;

    }
    .line_divide {
        height: 4px;
        width: 30vw;
        background-color: var(--bg-color);
        border-radius: 2px;

    }

    .circles {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: .3rem;

        margin-block: 3rem ;


    }

    .small_circle {
        width: .4rem;
        height: .4rem;
        border-radius: .2rem;
        background-color: #E8AA42;
        margin-inline: .5rem;
    }

    .large_circle {
        width: 1rem;
        height: 1rem;
        border-radius: .5rem;
        background-color: #E8AA42;
        margin-inline: .5rem;
    }
    
    footer {
        display: flex;
        flex-direction: row;
        max-height: 6rem;
        margin-top: 5rem;
        padding: 0;
        background-color: var(--bg-sec-color);
        box-shadow: 0px -5px 5px #f4f4f470;
        justify-content: space-between;
        align-items: center;
        gap: 10dvw;
    }

    footer > h1{
        font-size: 1.2rem;
        font-family: "Roboto";
        color: aliceblue;
        text-align: left;
        font-weight: 400;
        margin: 1rem;
        padding: 1rem;
    }

    
    .flex_menu { 
        flex: 1;

        max-width: 20%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-content: center;
        align-items: center;
        margin-left: 1rem;
        
    }


    .menu_item {
        text-align: center;
        max-width: 100%;
    }
    .menu_item  > a > img {
        width: 50%;
        max-width: 40px;
        margin: 0;
        background-color: white;
        border-radius: 50%;
        padding: .2rem;
        margin: .2rem;
    }
}

@keyframes pulsing-effect-font {
    0%, 100% {
        text-shadow: none
    }

    50% {
        text-shadow:
        .01em .05em .05em hsla(0, 0%, 100%, 0.5) ,
        0 0 .09em hsla(180, 100%, 97%, 0.8) ;
    }
}

@keyframes pulsing-shadow {
    0%,100% {
        background-color: rgba(186, 255, 255, 0);
    }

    50% {

        background-color: rgb(186, 255, 255);
    }
}