body {
    background-color: #1b1b1b ;
    color: white;
    font-size: clamp(1vw, 3.2vw, 22px);
}

.header {
    padding-inline: 5vw;
}

.header img {
    max-width: 300px;
    max-height: 500px;
    padding-right: 5vw;
}

.img-bio-container {
    display: flex;
}

.bio-container {
    background-color: #d891ef;
    color: black;
    max-height: 60vw;
    min-width: 50vw;
}

.showcase-card {
    background-color: #d891ef;
    color: black;
    margin: 5vw;
    text-align: center;
    padding-bottom: 30px;
    width: 90vw;
    
}

.showcase-card img {
    width: 700px;
    height: 400px;
    padding: 3vw;
    transition: scale 0.5s ease-in-out;
}

.showcase-card img:hover {
    scale: 1.15;
    transition: scale 0.5s ease-in-out
}

.footer-message {
    margin-left: auto; 
    padding-right: 20px;
    max-width: 20vw;
    background-color: transparent;
}


@media (max-width:850px)
{
    .showcase-card img {
    width: 500px;
    height: 300px;
    }

    .header img {
        max-width: 200px;
    }
}

@media (max-width:600px)
{
    .showcase-card img {
    width: 200px;
    height: 150px;
    }
}


@media (max-width:550px)
{
    .img-bio-container
    {
        display: block;
        text-align: center;
    }

    .header img 
    {
        max-width: 80%;
        padding-inline: 0px;
        padding-bottom: 10px;
    }
}