@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.name {
    font-weight: 700;
}

.full-stop {
    position: relative;
    left: 85px;
    bottom: 41px;
    color: rgb(110, 6, 242);
}

.pages p {
    cursor: pointer;
}

.pages #home {
    font-size: 18px;
    font-weight: 600;
    color: rgb(110, 6, 242);
    text-align: center;
    position: relative;
    bottom: 90px;
    right: 70px;
}

.pages #projects {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    position: relative;
    bottom: 135px;
    left: 15px;
}

.pages #about {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    position: relative;
    bottom: 180px;
    left: 100px;
}

.introduction #hey {
    color: rgb(78, 82, 90);
    font-size: 24px;
    position: relative;
    bottom: 100px;
    left: 20px;
}

.introduction #role {
    font-size: 90px;
    font-weight: bolder;
    line-height: 1;
    position: relative;
    bottom: 200px;
    left: 20px;
}

.introduction #role span {
    color: #6E06F2;
}

.introduction #small-intro {
    color: rgb(78, 82, 90);
    font-size: 24px;
    position: relative;
    bottom: 250px;
    left: 20px;
}

.buttons {
    position: relative;
    bottom: 650px;
    left: 20px;
}


.get-in {
    background-color: #6E06F2;
    width: 120px;
    height: 40px;
    border-radius: 10px;
    position: relative;
    bottom: 300px;
    cursor: pointer;
}

.get-in #get-in-p {
    color: white;
    font-weight: 500;
    position: relative;
    left: 8px;
    top: 8px;
}

.browse {
    width: 142px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid black;
    position: relative;
    bottom: 340px;
    left: 140px;
    cursor: pointer;
}


.browse #browse-p {
    color: black;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    left: 14px;
    bottom: 5px;
} 

.image-border {
    border: 0.5px solid #6E06F2;
    height: 400px;
    width: 400px;
    border-radius: 50%;
    position: relative;
    left: 900px;
    bottom: 600px;
}

.image img{
    height: 320px;
    width: 320px;
    border-radius: 50%;
}

.image {
    position: relative;
    left: 940px;
    bottom: 960px;
}


.contact img {
    width: 35px;
    height: 35px;
    cursor: pointer;
}

.contact {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
    bottom: 235px;
}