@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Love+Ya+Like+A+Sister&display=swap');

/* =========================================================
   RESET / BASE
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
}


/* =========================================================
   CSS VARIABLES (DESIGN TOKENS)
   ========================================================= */
:root {
    /* Colors */
    --color-primary: #3e6387;
    --color-secondary: #6c757d;
    --color-dark: #212529;
    --color-light: #f8f9fa;
    --color-purple: #b14ce3;
    --color-hover: #ce830d;

    /* Typography */

    /*--font-base: "Eurostile", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;*/
    --font-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /*--font-heading: var(--font-base);*/
    --font-heading: "Archivo Black", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;


    /* Spacing */
    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;

    /* Radius */
    --radius-sm: .25rem;
    --radius-md: .5rem;
    --radius-lg: 1rem;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */


body {
    font-family: var(--font-base);
    color: var(--color-dark);
    /*line-height: 1.6;*/
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    font-weight: 400;
}
.lead{
    font-size: 1.55rem!important;
}
p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LAYOUT
   ========================================================= */
.section {
    padding: var(--space-lg) 0;
}

.container-narrow {
    max-width: 960px;
}


/* =========================================================
   SECTIONS (order-based styling)
   ========================================================= */

/* All sections */
main > section {
    padding: var(--space-lg) 0;
}

/* Section 1 – Hero */
main > section:nth-of-type(1) {
    /*padding: calc(var(--space-lg) + 2rem) 0;*/
    padding:0;
}

/* Section 2 – About */
main > section:nth-of-type(2) {
    background-color: var(--color-primary);
    color: var(--color-light);
}

/* Section 3 – About Card boxes */
main > section:nth-of-type(3) {
    transition: transform .2s ease, box-shadow .2s ease;
    margin-top:-9rem;
}

main > section:nth-of-type(3) article:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.05);
}

/* Section 4 – Contact */
main > section:nth-of-type(4) {
    background-color: var(--color-light);
}

/* =========================================================
   TYPING GUY
   ========================================================= */

.typing-guy {
    transform: scale(0.75);
    transform-origin: left center;
    max-width: 100%;
    position:relative;
    top:-60px;
}

.typing-guy pre {
    margin: 0;
    font-size: 1rem;
    line-height: 1.1;
}



/* =========================================================
   COMPONENTS
   ========================================================= */
.card-clean {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    background-color: #fff;
    box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.06),
            0 2px 6px rgba(0, 0, 0, 0.04);
    transition: box-shadow .25s ease, transform .25s ease;
}
.feature-icon {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
    display: inline-block;
}

.project.card-clean{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 55px;
    border-top-left-radius: 0;
    border-top-right-radius: 55px;

}


/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    border-radius: var(--radius-md);
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    filter: brightness(0.95);
    background-color: var(--color-hover);

}
.btn-outline-primary{
    border-color: var(--color-primary);
    --bs-btn-color: var(--color-primary);
}
.btn-outline-primary:hover{
    background-color: var(--color-hover);
    border-color: var(--color-primary);
    --bs-btn-color: var(--color-primary);
}


/* =========================================================
   FORMS
   ========================================================= */
.form-control {
    border-radius: var(--radius-sm);
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--color-primary);
}
/* =========================================================
   FORMS – LARGE VARIANT
   ========================================================= */

.form-lg .form-label {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: .5rem;
}

.form-lg .form-control {
    font-size: 1.05rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-md);
}

.form-lg textarea.form-control {
    padding: .75rem 1rem;
}

.form-lg .form-control::placeholder {
    font-size: 1rem;
}


/* =========================================================
   IMAGES / MEDIA
   ========================================================= */
img {
    max-width: 100%;
    height: auto;
}

.img-rounded {
    border-radius: var(--radius-lg);
}

.img-shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}


/* =========================================================
   UTILITIES / HELPERS
   ========================================================= */
.text-muted-light {
    color: rgba(0,0,0,.55);
}

.bg-light-soft {
    background-color: #fdfdfe;
}

.mt-section {
    margin-top: var(--space-lg);
}

.mb-section {
    margin-bottom: var(--space-lg);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */
.fade-in {
    animation: fadeIn .4s ease-in-out both;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   BOOTSTRAP OVERRIDES
   ========================================================= */
.bg-body-tertiary {
    background-color: #f3f5f7 !important;
}

/* ===============================
   Typing Guy
   =============================== */

withanes {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 48px;
    height: 64px;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: bold;

}
.withanes:before, .withanes:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 44px 60px 0;
}
.withanes:after {
    box-shadow: 12px 0 #795f41, 16px 0 #795f41, 20px 0 #795f41, 24px 0 #795f41, 28px 0 #795f41, 32px 0 #795f41, 8px 4px #795f41, 12px 4px #795f41, 16px 4px #795f41, 20px 4px #795f41, 24px 4px #795f41, 28px 4px #795f41, 32px 4px #795f41, 36px 4px #795f41, 4px 8px #795f41, 8px 8px #795f41, 12px 8px #e9d8bc, 16px 8px #795f41, 20px 8px #795f41, 24px 8px #795f41, 28px 8px #795f41, 32px 8px #cbb490, 36px 8px #795f41, 40px 8px #795f41, 4px 12px #795f41, 8px 12px #e9d8bc, 12px 12px #e0c9a4, 16px 12px #e0c9a4, 20px 12px #e0c9a4, 24px 12px #e0c9a4, 28px 12px #e0c9a4, 32px 12px #cbb490, 36px 12px #cbb490, 40px 12px #795f41, 0 16px #7e6f5d, 4px 16px #e9d8bc, 8px 16px #e0c9a4, 12px 16px #e0c9a4, 16px 16px #e0c9a4, 20px 16px #e0c9a4, 24px 16px #e0c9a4, 28px 16px #e0c9a4, 32px 16px #e0c9a4, 36px 16px #cbb490, 40px 16px #cbb490, 44px 16px #7e6f5d, 0 20px #7e6f5d, 4px 20px #e9d8bc, 8px 20px #e0c9a4, 12px 20px #e0c9a4, 16px 20px #e0c9a4, 20px 20px #e0c9a4, 24px 20px #e0c9a4, 28px 20px #e0c9a4, 32px 20px #e0c9a4, 36px 20px #e0c9a4, 40px 20px #cbb490, 44px 20px #7e6f5d, 0 24px #7e6f5d, 4px 24px #e9d8bc, 8px 24px #e0c9a4, 12px 24px #cbb490, 16px 24px #cbb490, 20px 24px #e0c9a4, 24px 24px #e0c9a4, 28px 24px #cbb490, 32px 24px #cbb490, 36px 24px #e0c9a4, 40px 24px #cbb490, 44px 24px #7e6f5d, 0 28px #b6a281, 4px 28px #e9d8bc, 8px 28px #e0c9a4, 12px 28px #000, 16px 28px #000, 20px 28px #e9d8bc, 24px 28px #e0c9a4, 28px 28px #000, 32px 28px #000, 36px 28px #e0c9a4, 40px 28px #cbb490, 44px 28px #b6a281, 0 32px #cbb490, 4px 32px #e9d8bc, 8px 32px #e0c9a4, 12px 32px #e0c9a4, 16px 32px #e0c9a4, 20px 32px #e9d8bc, 24px 32px #e0c9a4, 28px 32px #e0c9a4, 32px 32px #e0c9a4, 36px 32px #e0c9a4, 40px 32px #cbb490, 44px 32px #b6a281, 4px 36px #795f41, 8px 36px #e0c9a4, 12px 36px #e0c9a4, 16px 36px #e0c9a4, 20px 36px #e9d8bc, 24px 36px #e0c9a4, 28px 36px #e0c9a4, 32px 36px #e0c9a4, 36px 36px #e0c9a4, 40px 36px #795f41, 4px 40px #795f41, 8px 40px #e0c9a4, 12px 40px #e0c9a4, 16px 40px #e0c9a4, 20px 40px #cbb490, 24px 40px #cbb490, 28px 40px #e0c9a4, 32px 40px #e0c9a4, 36px 40px #e0c9a4, 40px 40px #795f41, 4px 44px #795f41, 8px 44px #795f41, 12px 44px #795f41, 16px 44px #795f41, 20px 44px #795f41, 24px 44px #795f41, 28px 44px #795f41, 32px 44px #795f41, 36px 44px #795f41, 40px 44px #795f41, 8px 48px #795f41, 12px 48px #795f41, 16px 48px #e0c9a4, 20px 48px #e0c9a4, 24px 48px #e0c9a4, 28px 48px #e0c9a4, 32px 48px #795f41, 36px 48px #795f41, 12px 52px #7e6f5d, 16px 52px #cbb490, 20px 52px #7e6f5d, 24px 52px #7e6f5d, 28px 52px #cbb490, 32px 52px #7e6f5d, 12px 56px #7e6f5d, 16px 56px #795f41, 20px 56px #7e6f5d, 24px 56px #7e6f5d, 28px 56px #795f41, 32px 56px #7e6f5d, 16px 60px #7e6f5d, 20px 60px #7e6f5d, 24px 60px #7e6f5d, 28px 60px #7e6f5d;
}
.withanes .withanes-name {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    right: 16px;
    padding: 8px 12px;
    width: 0;
    background-color: white;
    opacity: 0;
    transform: translateX(0);
    border-radius: 12px;
    color: black;
    overflow: hidden;
    transition: opacity 250ms ease-in-out, width 0s linear 250ms;

}
.withanes .withanes-name:after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    z-index: 2;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid white;
    position: absolute;
    top: calc(50% - 5px);
    right: -8px;
}
.withanes:hover:before {
    box-shadow: 20px 48px #000000, 24px 48px #000000;
    z-index: 10;
}
.withanes:hover .withanes-name {
    width: auto;
    overflow: visible;
    opacity: 1;
    transform: translateX(-38px) rotate(0deg);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.33);
    transition: opacity 125ms ease-in-out 100ms;
}

.grid {
    display: block;
    /* IE9 fallback for Flex */
    display: flex;
    /* Using Flex for equal height containers */
    flex-wrap: wrap;
    /* Children need to wrap */
    margin-top: -20px;
    margin-left: -20px;
    align-items: stretch;
    /* For equal height */
    font-size: 0;
    /* Horiontal gap fix for inline-block fallback */
}

.grid + .grid {
    margin-top: 0;
    /* reset margin on stacked grids */
}

.grid-col {
    box-sizing: border-box;
    /* Using box-sizing so padding doesn't affect width */
    display: inline-block;
    /* IE9 fallback */
    width: 100%;
    padding-top: 20px;
    padding-left: 20px;
    vertical-align: top;
    font-size: 16px;
    /* Resetting font-size for horizontal gap fix */
}

.grid-col_1of12 {
    width: 8.33333%;
}

.grid-col_2of12 {
    width: 16.66667%;
}

.grid-col_3of12 {
    width: 25%;
}

.grid-col_4of12 {
    width: 33.33333%;
}

.grid-col_5of12 {
    width: 41.66667%;
}

.grid-col_6of12 {
    width: 50%;
}

.grid-col_7of12 {
    width: 58.33333%;
}

.grid-col_8of12 {
    width: 66.66667%;
}

.grid-col_9of12 {
    width: 75%;
}

.grid-col_10of12 {
    width: 83.33333%;
}

.grid-col_11of12 {
    width: 91.66667%;
}

.grid-col_12of12 {
    width: 100%;
}

@media (min-width: 768px) {
    .grid-col_1of12SM {
        width: 8.33333%;
    }

    .grid-col_2of12SM {
        width: 16.66667%;
    }

    .grid-col_3of12SM {
        width: 25%;
    }

    .grid-col_4of12SM {
        width: 33.33333%;
    }

    .grid-col_5of12SM {
        width: 41.66667%;
    }

    .grid-col_6of12SM {
        width: 50%;
    }

    .grid-col_7of12SM {
        width: 58.33333%;
    }

    .grid-col_8of12SM {
        width: 66.66667%;
    }

    .grid-col_9of12SM {
        width: 75%;
    }

    .grid-col_10of12SM {
        width: 83.33333%;
    }

    .grid-col_11of12SM {
        width: 91.66667%;
    }

    .grid-col_12of12SM {
        width: 100%;
    }
}
@media (min-width: 960px) {
    .grid-col_1of12MD {
        width: 8.33333%;
    }

    .grid-col_2of12MD {
        width: 16.66667%;
    }

    .grid-col_3of12MD {
        width: 25%;
    }

    .grid-col_4of12MD {
        width: 33.33333%;
    }

    .grid-col_5of12MD {
        width: 41.66667%;
    }

    .grid-col_6of12MD {
        width: 50%;
    }

    .grid-col_7of12MD {
        width: 58.33333%;
    }

    .grid-col_8of12MD {
        width: 66.66667%;
    }

    .grid-col_9of12MD {
        width: 75%;
    }

    .grid-col_10of12MD {
        width: 83.33333%;
    }

    .grid-col_11of12MD {
        width: 91.66667%;
    }

    .grid-col_12of12MD {
        width: 100%;
    }
}
.u-srOnly {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    position: absolute;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
}

.hidden {
    display: none;
}

.u-isVisuallyHidden {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    position: absolute;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

body {
    background-color: white;
}

.typing-guy-box {
    height: 600px;


}

.body404, .head404, .eyes404, .leftarm404, .rightarm404, .chair404, .leftshoe404, .rightshoe404, .legs404, .laptop404 {
    background: url("../img/theNerd/typing_guy5.png") 0 0 no-repeat;
    width: 200px;
    height: 200px;
    /*border:1px solid red;*/
}

.newcharacter404, .torso404, .body404, .head404, .eyes404, .leftarm404, .rightarm404, .chair404, .leftshoe404, .rightshoe404, .legs404, .laptop404 {
    background-size: 750px;
    position: absolute;
    display: block;

}

.newcharacter404 {
    width: 400px;
    height: 800px;
    left: 50%;
    top: 20px;
    margin-left: -200px;

}

.torso404 {
    position: absolute;
    display: block;
    top: 138px;
    left: 0px;
    width: 389px;
    height: 252px;
    animation: sway 20s ease infinite;
    transform-origin: 50% 100%;
}

.body404 {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 389px;
    height: 253px;

}

.head404 {

    position: absolute;
    top: -108px;
    left: 106px;
    width: 160px;
    height: 194px;
    background-position: 0px -265px;
    transform-origin: 50% 85%;
    animation: headTilt 20s ease infinite;

}

.eyes404 {
    position: absolute;
    top: 92px;
    left: 34px;
    width: 73px;
    height: 18px;
    background-position: -162px -350px;
    animation: blink404 10s steps(1) infinite, pan 10s ease-in-out infinite;

}

.leftarm404 {
    position: absolute;
    top: 159px;
    left: 0;
    width: 165px;
    height: 73px;
    background-position: -265px -341px;
    transform-origin: 9% 35%;
    transform: rotateZ(0deg);
    animation: typeLeft 0.4s linear infinite;
}

.rightarm404 {
    position: absolute;
    top: 148px;
    left: 231px;
    width: 157px;
    height: 91px;
    background-position: -442px -323px;
    transform-origin: 90% 25%;
    animation: typeLeft 0.4s linear infinite;
}

.chair404 {
    position: absolute;
    top: 430px;
    left: 55px;
    width: 260px;
    height: 365px;
    background-position: -12px -697px;
}

.legs404 {
    position: absolute;
    top: 378px;
    left: 4px;
    width: 370px;
    height: 247px;
    background-position: -381px -443px;
}

.leftshoe404 {
    position: absolute;
    top: 591px;
    left: 54px;
    width: 130px;
    height: 92px;
    background-position: -315px -749px;
}

.rightshoe404 {
    position: absolute;
    top: 594px;
    left: 187px;
    width: 135px;
    height: 81px;
    background-position: -453px -749px;
    transform-origin: 35% 12%;
    animation: tapRight 1s linear infinite;
}

.laptop404 {
    position: absolute;
    top: 186px;
    left: 9px;
    width: 365px;
    height: 216px;
    background-position: -2px -466px;
    transform-origin: 50% 100%;
    animation: tapWobble 0.4s linear infinite;
}

@keyframes sway {
    0% {
        transform: rotateZ(0deg);
    }
    20% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(4deg);
    }
    45% {
        transform: rotateZ(4deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    70% {
        transform: rotateZ(0deg);
    }
    75% {
        transform: rotateZ(-4deg);
    }
    90% {
        transform: rotateZ(-4deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
@keyframes headTilt {
    0% {
        transform: rotateZ(0deg);
    }
    20% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(-4deg);
    }
    35% {
        transform: rotateZ(-4deg);
    }
    38% {
        transform: rotateZ(2deg);
    }
    42% {
        transform: rotateZ(2deg);
    }
    45% {
        transform: rotateZ(-4deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    70% {
        transform: rotateZ(0deg);
    }
    82% {
        transform: rotateZ(0deg);
    }
    85% {
        transform: rotateZ(4deg);
    }
    90% {
        transform: rotateZ(4deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
@keyframes typeLeft {
    0% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(7deg);
    }
    75% {
        transform: rotateZ(-6deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
@keyframes typeRight {
    0% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(-6deg);
    }
    75% {
        transform: rotateZ(7deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
@keyframes tapWobble {
    0% {
        transform: rotateZ(-0.2deg);
    }
    50% {
        transform: rotateZ(0.2deg);
    }
    100% {
        transform: rotateZ(-0.2deg);
    }
}
@keyframes tapRight {
    0% {
        transform: rotateZ(0deg);
    }
    90% {
        transform: rotateZ(-6deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
@keyframes blink404 {
    0% {
        background-position: -162px -350px;
    }
    94% {
        background-position: -162px -350px;
    }
    98% {
        background-position: -162px -368px;
    }
    100% {
        background-position: -162px -350px;
    }
}
@keyframes pan {
    0% {
        transform: translateX(-2px);
    }
    49% {
        transform: translateX(-2px);
    }
    50% {
        transform: translateX(2px);
    }
    99% {
        transform: translateX(2px);
    }
    100% {
        transform: translateX(-2px);
    }
}