#title-card{
    height: 100vh;
}
#title-card-image{
    height: 100%;
    object-position: 90% bottom;
    width: 40%;
}
#title-card-text-container{
    width: 60%;
}
#title-card-text-main{
    font-size: 500%;
    font-weight: lighter;
    line-height: 0.8em;
    font-family:Brush Script MT;

}
#title-card-text-supplement{
    font-weight: normal;
    font-size: 175%;
    width: 80%;
    margin-left: 10%;
    margin-top: -1em;
}

#welcome-bar{
    height: fit-content;
    padding: 3% 0% 3% 0%;
    font-size: larger;
    /* background: linear-gradient(330deg, rgb(251, 223, 131) 0%, rgb(203, 157, 6) 40%, rgb(203, 157, 6) 60%, rgb(251, 223, 131)); */
    /* background: radial-gradient(rgb(203, 157, 6), rgb(251, 223, 131)); */
    filter: drop-shadow(0px 0px 10px);
}
#welcome-bar-title{
    font-size: x-large;
}
#welcome-bar-supplement-text{
    text-align: center;
    width: 60vw;
    font-size: larger;
}

#why-me-block{
    padding-left: 1em;
    height: 500px;
    font-size: larger
}

@media (width <= 1300px) {
    #title-card-image{
        object-position: center;
    }
}

@media (width <= 800px){
    .nav-text{
        font-size: smaller;
        flex-shrink: none;
    }
    #nav-header-start{
        font-size: medium;
    }
    #nav-header-middle{
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        column-gap: 1rem;
        row-gap: 1em;
    }
    
    #title-card{
        height: 100%;
        align-items: center;
    }
    #title-card-text-main{
        font-size: 250%;
        line-height: 1em;
        
        font-family: Brush Script MT, Brush Script std, cursive;
        font-style: italic;
    }
    #title-card-text-supplement{
        font-size: 100%;
    }
    #title-card-text-container{
        height: fit-content;
        margin-top: -1em;
        width: fit-content;
        padding: 1em 1em 1em 1em;
    }
    #title-card-image{
        object-position: 90% bottom;
        width: 100%;
        height: inherit;
    }

    #welcome-bar-supplement-text{
        padding: 1em;
        font-size: 112.5%;
        width: calc(100% - 2em);
    }

    #why-me-text-container{
        width: calc(100% - 1em);
        padding-right: 1em;
    }
    #why-me-block-image{
        display: none;
    }

    .container{
        flex-direction: column;
    }
    
}