html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(to bottom, rgb(81, 41, 48) 10%, rgb(199, 95, 113) 50%, rgb(87, 37, 46) 100%);
    color: black;
    text-align: justify;
    min-height: 100vh;
    position: relative;
}

.header {
    font-size: 12px;
    background: linear-gradient(to right, rgb(61, 61, 61) 0%, gray 15%, gray 45%, rgb(61, 61, 61) 100%);
}

button {
    border: 1px solid blue;
    padding: 1%;
}




.page-top {

    background: linear-gradient(to bottom, rgb(63, 63, 63) 10%, gray 35%, gray 65%, rgb(63, 63, 63) 100%);
    min-height: 40vh;
    display: flex;
    align-items: center;

    box-shadow: 0 0 10px black;

    border-radius: 8px;

    margin: 10px 0;

}


.brief-description {
    padding: 5%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    column-gap: 10px;
    width: 100%;

}

.for-text {

    flex: 2;
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

.occupationDesc {

    display: flex;
    flex-direction: column;

}


.for-image {
    flex: 2;
    align-content: center;

}

.for-image img {

    box-shadow: 0 0 10px black;

}

@media (width > 1500px) {

    .for-text {

        display: flex;
        text-align: center;
        align-items: center;
    }

}

@media (width < 570px) {

    .for-image {
        flex: 3;
        align-content: center;
    }
}




@media (width < 415px) {


    .for-image {
        flex: 2;
        align-content: center;

    }


}


img {
    width: 100%;
    border-radius: 8px;
}



.page-middle {
    background-image: url('../images-personal-website/office-picture.jpg');
    background-repeat: no-repeat;
    min-height: 60vh;
    background-size: cover;
    box-shadow: 0 0 10px rgba(199, 95, 113);
    display: flex;
    align-items: center;
    padding: 8px 10px;

    box-shadow: 0 0 10px black;
    border-radius: 8px;

}

.for-text-middle {

    background-color: #f8f9fa;
    opacity: 0.9;
    padding: 2%;
    box-shadow: 0 0 16px gray;
    border-radius: 8px;
    margin-left: 2%;

}

.section-three-text {

    background: linear-gradient(to bottom, rgb(72, 72, 72) 10%, gray 45%, gray 55%, rgb(75, 74, 74) 100%);

    box-shadow: 0 0 10px black;

    padding: 8px 10px;

    margin: 10px 0;

    border-radius: 8px;

    transform: rotate(10deg);
}

.section-three-image {

    box-shadow: 0 0 10px black;

    border-radius: 8px;
}

.fourth-section {

    /* box-shadow: 0 0 10px black; */

    border-radius: 8px;

    padding: 0 4px;

    /* background: linear-gradient(to bottom, rgb(63, 63, 63) 10%, gray 45%, gray 55%, rgb(63, 63, 63) 100%); */

    text-align: center;

}

.fourth-section-header {

    margin-bottom: 10px;

    font-size: 24px;

    font-weight: bold;

    box-shadow: 0 0 10px black;

    border-radius: 8px;

}

.project1,
.project2 {

    display: flex;

    flex-direction: column;

    overflow-x: scroll;

    background: linear-gradient(to bottom, rgb(63, 63, 63) 10%, gray 45%, gray 55%, rgb(63, 63, 63) 100%);

    margin: 10px 0;

    border-radius: 8px;
}

.project1-text,
.project2-text {

    padding: 8px 10px;

}

.project1-image,
.project2-image {

    display: flex;

    flex-direction: row;

    gap: 15px;

    width: 300%;

    overflow-x: scroll;

    padding: 8px 10px
}