body {
    margin: 0;
    padding: 0;
    background-color: #1C1C1A;
    font-family: 'Lexend Deca', sans-serif;
    color: #F5F5F5;
    text-align: right;
}

.hero {
    height: 950px;
    width: 100%; /* Use 100% width for responsiveness */
    position: relative;
    background-color: #1C1C1A;
}

.text-content {
    position: absolute;
    top: 150px;
    right: 20px; /* Align to the right */
    width: 40%; /* Adjust width as necessary */
    font-size: 20px;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 300;
    text-align: left;
}

.hero-image {
    position: absolute;
    top: 480px;
    right: 40px; /* Align to the right */
    height: 700px; /* Adjust height as necessary for better fit */
    width: 550px; /* Adjust width as necessary for better fit */
    object-fit: cover;
}

.vertical-text {
    position: absolute;
    top: 150px; /* Adjust the top value to move elements upwards */
    left: 270px;
    writing-mode: vertical-rl;
    transform: rotate(180deg); /* Rotate the entire container for vertical text */
}

.chan {
    font-family: 'Lexend Peta', sans-serif;
    font-size: 80px;
    margin-bottom: 30px; /* Adjust spacing as necessary */
    text-align: left;
}

.suetyee {
    font-family: 'Lexend Peta', sans-serif;
    font-size: 110px;
    margin-bottom: 30px; /* Adjust spacing as necessary */
}

.uiux-designer {
    font-family: 'Libre Barcode 39 Extended Text', sans-serif;
    font-size: 80px;
    margin: 0;
    padding: 0;
    background-color: #1C1C1A;
    text-align: left;
}
.content-column {
    background-color: #F5F5F5;
    width: 100%;
    height: 1825px;
    padding: 40px;
    box-sizing: border-box;
    color: #1C1C1A;
    font-family: 'Lexend Deca', sans-serif;
}

.content-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.contact, .experience, .education {
    width: 100%;
}

h2 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: bold;
    font-size: 40px;
    margin: 0 0 10px 0;
    text-align: left;
}

h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 35px;
    margin: 20px 0 10px 0;
    text-align: left;
}

.body-text-1 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 25px;
    margin: 0 0 10px 0;
    text-align: left;
}

p {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 300;
    font-size: 25px;
    margin: 0 0 10px 0;
    text-align: left;
}

.image-column {
    width: 100%;
    height: 1425px; /* 1.5 times the height of the hero */
    background-color: #1C1C1A;
    display: flex;
    align-items: center;
    justify-content: center;
}

.additional-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}