@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


* {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
}

p {
    color: rgb(104, 123, 159);
}

body {
    background: rgb(104, 123, 159);
}

.container {
    background: rgb(245, 245, 220);
    width: 70%;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    margin: auto;
}

header {
    display: flex;
    align-items: center;
    gap: 40px;
}

.head-left {
    padding: 5px;
    display: contents;
}

.head-left img {
    max-width: 50vh;
    width: 1080px;
}

.head-right {
    padding: 5px;
}

.head-right .info h1 {
    font-size: 45px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 6px;
}

.head-right .info p {
    font-size: 30px;
    font-weight: 500;
}

.head-right .contact {
    margin-top: 10px;
    font-weight: 400;
}

.contact {
    padding: 10px;
}

.contact-container {
    display: block;
}

.contact .title {
    font-weight: 600;
}

.contact-container span {
    font-weight: 500;
}

.contact-container .text {
    padding-left: 23px;
    font-size: 13px;
    font-weight: 400;
}

.about-me {
    transform: translateY(30px);
    padding: 20px;
    padding-bottom: 35px;
    border: 5px solid rgb(104, 123, 159);
}

h2 {
    font-weight: 500;
    padding-bottom: 10px;
}

p {
    font-weight: 400;
    font-size: 15px;
}

.hero {
    padding-top: 40px;
    display: flex;
}

.margin-left {
    color: rgb(104, 123, 159);
}

.hero-left img {
    max-width: 55.5vh;
    background: rgb(104, 123, 159);
}

.hero-right {
    /* margin-top: 40px; */
    padding: 20px;
    padding-top: 60px;
    transform: translateY(-50px);
    margin: 0px 50px;
    border: 5px solid rgb(104, 123, 159);
    padding-right: 447px;
}

.years {
    color: rgb(104, 123, 159);
}

.project {
    margin-top: 40px;
    display: flex;
    padding-bottom: 40px;
}

.project-left {
    width: 55vh;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgb(104, 123, 159);
}

.project-left h2 {
    text-align: center;
    font-size: 30px;
    color: white;
}

.project-left .project-img img {
    max-width: 25vh;
}

.project-right {
    padding-left: 20px;
    
}

.education {
    padding: 40px 0px;
    margin-bottom: 20px;
    border: 5px solid rgb(104, 123, 159);
}

.education .margin-left {
    margin-left: 20px;
}

.education p {
    padding-left: 20px;
    padding-bottom: 13px;
}

.interest {
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 5px solid rgb(104, 123, 159);
}

.interest p {
    text-align: center;
    font-size: 40px;
}

.interest img {
    max-width: 50vh;
    padding: 50px 0;
}