.container-index {
    display: flex;
    /* background-color: green; */
    flex-direction: column;
    padding: 2vw 6vw; 
    color: white;
}
.info {
    margin-top: 2vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /* background-color: red; */
}

.personal-info {
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 2vw 3vh;
    width: 50vw;
    /* background-color: yellow; */
}

.personal-pic {
    display: flex;
    width: 30vw; 
    height: fit-content;
    max-height: 60vh;
    justify-content: center;
    /* background-color: blue; */
    justify-items: center;
}

.personal-pic img{
    width: 23vw;
    border-radius: 2em;
}

.introduction {
    margin-top: 0;
    font-size: 1.25rem;
    /* font-weight: bold; */
    color: #cad4df;
    /* background-color: beige; */
}

.hello {
    /* margin-top: 20px; */
    display: flex;
    font-size: 3vw;
    font-weight: bold;
    color: white;
    justify-content: center;
    justify-items: center;
    /* background-color: aquamarine; */
}

.name {
    font-size: 3vw;
    font-weight: bold;
    color: #FF6600;
}

.buttons button {
    position: relative;
    margin-top: 2vh;
    padding: 1.2vh .5vw;
    font-size: .9rem;
    background-color: #FF6600;
    border-radius: 1rem;
    transition: background-color 0.3s ease;
}

.buttons button:hover {
    background-color: white;
    color: #FF6600;
}

@media (max-width: 768px) {

.container-index {
    /* background-color: green; */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    /* padding: 1vw 1vw;  */
    color: white;
}
.info {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 90vh;
    align-items: center;
    justify-content: flex-start;
    /* justify-content: space-around; */
    /* background-color: yellow; */
}

.hello {
    font-size: 7vw;
    font-weight: bold;
    color: white;
    /* background-color: orange; */
}
.name {
    font-size: 7vw;
}
.personal-info {
    padding: 3vw 3vh;
    width: 90vw;
    /* background-color: red; */
}

.introduction {
    font-size: 1rem;
}

.buttons button {
    margin-top: 1.2vh;
    padding: .4vh .7vw;
    font-size: .8rem;
    background-color: #FF6600;
    border-radius: .5rem;
}

.personal-pic {
    margin-top: 1.5vh;
    width: 100vw;
    /* background-color: blue; */
}

.personal-pic img{
    width: 60vw;
    border-radius: 1em;
}

}