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

:root {
    --bgcolor: rgb(177, 205, 255);
    --blue: rgba(104, 157, 255, 0.6);
    --fontcolor: rgb(83, 143, 255);
    --hover: rgba(77, 139, 255, 0.800);
    --boldblue: rgb(77, 139, 255);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Josefin Sans;
}

.main-container {
    width: 100%;
    height: 100%;
    background-color: rgb(222, 236, 255);
    scroll-behavior: smooth;
}

/* Navigation Bar */

nav {
    max-width: 100%;
    height: 10vh;
    padding: 2vw 5vw;
    display: flex;
    /* background-color: rgb(35, 35, 35); */
    background-color: var(--blue);
    backdrop-filter: blur(10);
    align-items: center;
    justify-content: space-between;
    /* margin: 0 10px;
    position: sticky;
    top: 10px; */
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#navbar {
    margin: 0 10px;
    position: sticky;
    top: 10px;
}

/* nav .logo,img{
    align-items: center;
    justify-content: center;
    height: 4vw;
    width: 4vw;
} */

nav h1 {
    font-size: 1.80vw;
    font-weight: 700;
    color: rgb(0, 0, 0);
    cursor: pointer;
    text-transform: uppercase;
    /* margin-left: 10vw; */
}

.page-links img {
    display: none;
}

.hamburger img {
    display: none;
}

.page-links ul {
    display: flex;
    gap: 2.5rem;
}

.page-links ul li,
a {
    list-style: none;
    text-decoration: none;
    color: rgb(43, 43, 43);
    font-size: 1.30vw;
    font-weight: 500;
}

.page-links ul li a:hover {
    color: var(--fontcolor);
    transition: ease-in 0.2s;
    -webkit-transition: ease-in 0.2s;
    -moz-transition: ease-in 0.2s;
    -ms-transition: ease-in 0.2s;
    -o-transition: ease-in 0.2s;
}

/* Main Page Code */

.home-page {
    height: 100%;
    width: 100%;
    /* background-color: rgb(126, 159, 188); */
}

.home-content {
    display: flex;
    height: 90vh;
    width: 100%;
    /* background-color: aliceblue; */
}

/* Left Content */

.home-content .left-content {
    width: 50%;
    /* padding: 2rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 2;
    margin-left: 5rem;
}

.home-content .left-content h1 {
    font-size: 4vw;
    color: var(--fontcolor);
}

.home-content .left-content p {
    font-size: 1.25vw;
    color: rgb(54, 54, 54);
    line-height: 1.3;
    width: 80%;
    margin-bottom: 2rem;
}

.home-content .left-content button {
    height: 3rem;
    width: 10rem;
    color: var(--boldblue);
    background-color: var(--bgcolor);
    border: 2px solid var(--blue);
    text-align: center;
    font-size: 1.15rem;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.home-content .left-content button:hover {
    cursor: pointer;
    background-color: var(--hover);
    backdrop-filter: blur(10);
    color: rgba(36, 36, 36, 0.732);
    transition: background-color 0.3s ease-in;
    -webkit-transition: background-color 0.3s ease-in;
    -moz-transition: background-color 0.3s ease-in;
    -ms-transition: background-color 0.3s ease-in;
    -o-transition: background-color 0.3s ease-in;
}

/* Right Content */

.home-content .right-content {
    width: 50%;
    /* padding: 2rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.home-content .right-content img {
    width: 50%;
    height: auto;
    cursor: no-drop;
}

/* Personal Details */

.Personal-details {
    height: 100vh;
    display: flex;
    padding: 5rem;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.Personal-details span {
    font-weight: 500;
    font-size: 1rem;
    color: rgb(61, 113, 255);
}

.Personal-details #span-bold {
    color: rgb(36, 36, 36);
    font-size: 1.35rem;
}

.details {
    height: 60vh;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    line-height: 1rem;
    background-color: var(--blue);
    backdrop-filter: blur(10);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.details h2 {
    font-size: 2rem;
    color: rgb(36, 36, 36);
    text-transform: uppercase;
}

.details ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.details ul li {
    font-size: 1.1rem;
    color: rgb(54, 54, 54);
}

.details hr {
    width: 80%;
    text-align: center;
    padding: 0.5px;
    background-color: rgb(80, 80, 80);
    margin-bottom: 1rem;
}

.Education {
    height: 60vh;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--blue);
    backdrop-filter: blur(10);
    gap: 2rem;
    line-height: 1rem;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.Education h2 {
    font-size: 2rem;
    color: rgb(36, 36, 36);
    text-transform: uppercase;
}

.Education ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.Education ul li {
    font-size: 1.1rem;
    color: rgb(54, 54, 54);
}

/* Skills Section */

.skills {
    width: 100%;
    height: 100vh;
    align-content: center;
    justify-items: center;
}

.skill-bg {
    width: 70%;
    height: 60vh;
    background-color: var(--blue);
    backdrop-filter: blur(10);
    align-content: center;
    justify-items: center;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.skills h2 {
    font-size: 2rem;
    color: rgb(36, 36, 36);
    text-transform: uppercase;
    margin-bottom: 3rem;
}

.skills ul {
    list-style: none;
    gap: 1rem;
}

.skills ul li {
    font-size: 1.1rem;
    color: rgb(54, 54, 54);
    margin-top: 1rem;
}

.skills span {
    font-weight: 500;
    font-size: 1rem;
    color: rgb(61, 113, 255);
}

.skill-bg .download {
    margin-top: 2.5rem;
}

.download a {
    /* height: 3rem;
    width: 10rem; */
    padding: 0.75rem 1.5rem;
    color: rgb(38, 114, 255);
    background-color: var(--bgcolor);
    border: 2px solid var(--blue);
    text-align: center;
    font-size: 1.15rem;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.download a:hover {
    cursor: pointer;
    background-color: var(--blue);
    backdrop-filter: blur(10);
    color: rgba(36, 36, 36, 0.732);
    transition: background-color 0.5s ease-in;
    -webkit-transition: background-color 0.5s ease-in;
    -moz-transition: background-color 0.5s ease-in;
    -ms-transition: background-color 0.5s ease-in;
    -o-transition: background-color 0.5s ease-in;
}

/* Profiles */

.profiles {
    height: 100vh;
    align-content: center;
    justify-items: center;
}

.profiles h1 {
    font-size: 2rem;
    color: var(--boldblue);
    text-transform: uppercase;
    margin-bottom: 3rem;
}

.profiles .social-media {
    color: black;
    font-size: 1rem;
}

.social-media {
    height: 49.6vh;
    width: 50vw;
    line-height: 2rem;
    /* background-color: rgb(141, 172, 255); */
    border: none;
}

.social-media img {
    width: 30px;
    height: auto;
    margin-right: 10px;
}

.social-media img:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

.social-media a {
    width: 100%;
    height: 10.4vh;
    padding: 0 7rem;
    /* border: 1px solid #818181; */
    background-color: var(--blue);
    backdrop-filter: blur(10);
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    text-decoration: none;
    color: black;
    display: flex;
    border-radius: 4px;
}

.social-media a:hover {
    background-color: var(--hover);
    backdrop-filter: blur(15);
    transition: 0.5s ease-in;
    -webkit-transition: 0.5s ease-in;
    -moz-transition: 0.5s ease-in;
    -ms-transition: 0.5s ease-in;
    -o-transition: 0.5s ease-in;
}

.social-media span {
    color: rgb(37, 37, 37);
}

.social-media span:hover {
    color: rgba(38, 114, 255);
    transition: 0.5s ease-in;
    -webkit-transition: 0.5s ease-in;
    -moz-transition: 0.5s ease-in;
    -ms-transition: 0.5s ease-in;
    -o-transition: 0.5s ease-in;
}

/* About Me */

.About-me {
    width: 100%;
    height: 100vh;
    padding: 2rem;
    align-content: center;
    justify-items: center;
}

.top-info {
    width: 70%;
    /* align-content: center; */
    justify-items: center;
    background-color: var(--blue);
    backdrop-filter: blur(10);
    padding: 2vw;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.top-info h1 {
    font-size: 2rem;
    color: var(--boldblue);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.top-info h3 {
    font-size: 1.3rem;
    color: rgb(54, 54, 54);
    margin-bottom: 1rem;
}

.top-info p {
    color: rgb(29, 29, 29);
    font-size: 1.1rem;
    line-height: 1.5;
    /* margin-bottom: 1rem; */
}

.top-info span {
    color: var(--boldblue);
}

.what-i-offer {
    width: 70%;
    /* align-content: center; */
    justify-items: center;
    background-color: var(--blue);
    backdrop-filter: blur(10);
    padding: 2vw;
    border-radius: 4px;
}

.what-i-offer h2 {
    font-size: 1.5rem;
    color: var(--boldblue);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* .About-me .what-i-offer ul{
    gap: 1rem;
} */

.what-i-offer ul li {
    list-style-type: disc;
    font-size: 1.1rem;
    color: rgb(29, 29, 29);
    margin-bottom: 0.5rem;
}

.what-i-offer span {
    color: var(--boldblue);
}

/* Work Together */

.work-together {
    width: 100%;
    height: 100vh;
    padding: 2rem;
    align-content: center;
    justify-items: center;
}

.My-approach {
    width: 70%;
    /* align-content: center; */
    justify-items: center;
    /* margin-top: 1rem; */
    background-color: var(--blue);
    backdrop-filter: blur(10);
    padding: 2vw;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.My-approach h2 {
    font-size: 1.5rem;
    color: rgb(77, 139, 255);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.My-approach p {
    color: rgb(29, 29, 29);
    font-size: 1.1rem;
    line-height: 1.5;
    /* margin-bottom: 1rem; */
}

.My-approach span {
    color: var(--boldblue);
}

.work {
    width: 70%;
    /* align-content: center; */
    justify-items: center;
    /* margin-top: 1rem; */
    background-color: var(--blue);
    backdrop-filter: blur(10);
    padding: 2vw;
    border-radius: 4px;
}

.work h2 {
    font-size: 1.5rem;
    color: var(--boldblue);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.work p {
    color: rgb(29, 29, 29);
    font-size: 1.1rem;
    line-height: 1.5;
    /* margin-bottom: 1rem; */
}

/* Footer */

footer {
    background-color: var(--bgcolor);
    border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
    -moz-border-radius: 4px 4px 0px 0px;
    -ms-border-radius: 4px 4px 0px 0px;
    -o-border-radius: 4px 4px 0px 0px;
}

#bottom {
    margin: 0 1rem;
}

.mark {
    padding: 1vw;
}

.mark p {
    font-size: 0.85rem;
    color: rgb(29, 29, 29);
    line-height: 1.2rem;
}

p {
    color: rgb(29, 29, 29);
    /* font-size: 1rem;
    padding: 1vw; */
    text-align: center;
}

.contact-info {
    line-height: 1.5rem;
}

.contact-info p {
    font-size: 1rem;
}

.contact-info span {
    color: var(--fontcolor);
}

.social-media-footer {
    width: 100%;
    height: 5vh;
    padding: 2vw 1vw;
    text-align: center;
}

.social-media-footer img {
    width: 30px;
    height: auto;
    margin-right: 10px;
}

.description {
    padding: 1vw;
}

.description p {
    font-size: 1rem;
    line-height: 1.5rem;
}

.description span {
    color: var(--fontcolor);
}

/* Responsive */


/* For mobile phones: */

@media only screen and (max-width: 426px) {

    nav {
        max-width: 425px;
        height: 6vh;
    }

    nav h1 {
        font-size: 2.7vw;
    }

    #navbar .page-links ul.nav-open {
        display: flex !important;
    }

    .hamburger:hover {
        background-color: var(--bgcolor);
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
    }

    .close-menu:hover {
        background-color: var(--bgcolor);
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
    }

    .hamburger,
    .close-menu {
        display: none;
    }

    .nav-active {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 130%;
        right: 0;
        width: 50%;
        background-color: var(--blue);
        padding: 1.5rem;
        z-index: 1000;
        border-radius: 4px;
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
    }

    .page-links img {
        display: block;
        width: 100%;
        height: 5vw;
        cursor: pointer;
    }

    .page-links ul {
        gap: 0;
    }

    .page-links ul li {
        padding: 0.75rem 0;
    }

    .page-links ul li a {
        font-size: 3.2vw;
        width: 100%;
    }

    /* Home Content */

    .home-content {
        flex-direction: column-reverse;
    }

    .home-content .left-content {
        width: 100%;
        line-height: 2;
        margin-left: 0;
        padding: 2rem;
    }

    .home-content .left-content h1 {
        font-size: 6vw;
    }

    .home-content .left-content p {
        font-size: 2.5vw;
        color: rgb(54, 54, 54);
        line-height: 1.3;
        width: 80%;
        margin-bottom: 2rem;
    }

    .home-content .left-content button {
        height: 2rem;
        width: 7rem;
        font-size: 0.75rem;
    }

    /* Right Content */

    .home-content .right-content {
        width: 100%;
        padding: 2rem;
    }

    .home-content .right-content img {
        width: 45%;
        height: auto;
        cursor: no-drop;
    }

    /* Personal Details */

    .Personal-details {
        flex-direction: column;
        width: 100%;
        padding: 1rem;
        height: 100%;
    }

    .Personal-details span {
        font-size: 3vw;
    }

    .Personal-details #span-bold {
        font-size: 3.2vw;
        font-weight: 500;
    }

    .details {
        margin-top: 7rem;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        /* gap: 2rem; */
        line-height: 1rem;
        padding: 2rem;
    }

    .details h2 {
        font-size: 5vw;
    }

    .details ul li {
        font-size: 3vw;
    }

    .Education {
        height: 100%;
        width: 100%;
        /* gap: 2rem; */
        line-height: 1rem;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .Education h2 {
        font-size: 5vw;
    }

    .Education ul li {
        font-size: 3vw;
    }

    /* Skills Section */

    .skills {
        width: 100%;
        height: 100%;
        align-content: center;
        justify-items: center;
        padding: 1rem;
    }

    .skill-bg {
        width: 100%;
        height: 60vh;
        align-content: center;
        justify-items: center;
    }

    .skills h2 {
        font-size: 5vw;
        margin-bottom: 0;
        margin-top: 1rem;
    }

    .skills ul {
        padding: 2rem;
    }

    .skills ul li {
        font-size: 3vw;
        margin-top: 1rem;
    }

    .skills span {
        font-size: 3.2vw;
    }

    .skill-bg .download {
        margin-top: 0;
    }

    .download a {
        padding: 0.5rem 1.2rem;
        text-align: center;
        font-size: 3.2vw;
    }

    /* Profiles */

    .profiles {
        padding: 1rem;
    }

    .profiles h1 {
        font-size: 5vw;
        margin-bottom: 3rem;
    }

    .social-media {
        height: 49.6vh;
        width: 100%;
        line-height: 2rem;
        /* background-color: rgb(141, 172, 255); */
        border: none;
    }

    .social-media img {
        width: 5vw;
        height: auto;
        margin-right: 10px;
    }

    .social-media a {
        width: 100%;
        height: 7vh;
        padding: 0 2rem;
        margin-bottom: 10px;
        align-items: center;
        justify-content: space-between;
    }

    .social-media span {
        font-size: 3vw;
    }

    /* About Me */

    .About-me {
        width: 100%;
        height: 100%;
        padding: 1rem;
    }

    .top-info {
        width: 100%;
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .top-info h1 {
        font-size: 5vw;
        margin-bottom: 3rem;
        margin-top: 2.5rem;
    }

    .top-info h3 {
        font-size: 3.2vw;
        margin-bottom: 1rem;
    }

    .top-info p {
        color: rgb(29, 29, 29);
        font-size: 3vw;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .top-info span {
        color: rgb(77, 139, 255);
    }

    .what-i-offer {
        width: 100%;
        padding: 2rem;
    }

    .what-i-offer h2 {
        font-size: 5vw;
        margin-bottom: 3rem;
        margin-top: 2rem;
    }

    .what-i-offer ul li {
        margin-left: 1rem;
        font-size: 3vw;
        margin-bottom: 0.5rem;
    }

    /* Work Together */

    .work-together {
        margin-bottom: 3rem;
        width: 100%;
        height: 100%;
        padding: 1rem;
    }

    .My-approach {
        width: 100%;
        /* align-content: center; */
        justify-items: center;
        padding: 2rem;
        border-radius: 4px;
        margin-bottom: 2rem;
    }

    .My-approach h2 {
        font-size: 5vw;
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .My-approach p {
        font-size: 3vw;
    }

    .work {
        width: 100%;
        padding: 2rem;
    }

    .work h2 {
        font-size: 5vw;
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .work p {
        font-size: 3vw;
    }

    /* Footer */

    footer {
        /* padding: 1rem; */
        border-radius: 4px 4px 0px 0px;
        -webkit-border-radius: 4px 4px 0px 0px;
        -moz-border-radius: 4px 4px 0px 0px;
        -ms-border-radius: 4px 4px 0px 0px;
        -o-border-radius: 4px 4px 0px 0px;
    }

    #bottom {
        margin: 0 1rem;
        /* padding: 2rem; */
    }

    .mark {
        padding: 1vw;
    }

    .mark p {
        font-size: 2.5vw;
        line-height: 1rem;
        font-weight: 600;
    }

    .contact-info {
        line-height: 1.2rem;
    }

    .contact-info p {
        font-size: 2.5vw;
    }

    .contact-info p a {
        font-size: 2.5vw;
    }

    .social-media-footer {
        width: 100%;
        height: 100%;
        padding: 0.5vw 0.5vw;
        text-align: center;
    }

    .social-media-footer img {
        width: 3vw;
        height: auto;
        margin-right: 10px;
    }

    .description {
        padding: 0.7vw;
    }

    .description p {
        font-size: 2.5vw;
        line-height: 1.5rem;
    }
}

@media (min-width: 426px) and (max-width: 768px) {

    nav {
        max-width: 100%;
        height: 8vh;
    }

    nav h1 {
        font-size: 2.7vw;
    }

    #navbar .page-links ul.nav-open {
        display: flex !important;
    }

    .hamburger:hover {
        background-color: var(--bgcolor);
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
    }

    .close-menu:hover {
        background-color: var(--bgcolor);
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
    }

    .hamburger,
    .close-menu {
        display: none;
    }

    .nav-active {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 130%;
        right: 0;
        width: 60%;
        background-color: var(--blue);
        padding: 1.5rem;
        z-index: 1000;
        border-radius: 4px;
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
    }

    .page-links img {
        display: block;
        width: 100%;
        height: 5vw;
        cursor: pointer;
    }

    .page-links ul {
        gap: 0;
    }

    .page-links ul li {
        padding: 0.75rem 0;
    }

    .page-links ul li a {
        font-size: 2.5vw;
        width: 100%;
    }

    /* Home Content */

    .home-content .left-content {
        width: 100%;
        line-height: 2;
        margin-left: 0;
        padding: 2rem;
    }

    .home-content .left-content h1 {
        font-size: 4.5vw;
    }

    .home-content .left-content p {
        font-size: 2vw;
        color: rgb(54, 54, 54);
        line-height: 1.3;
        width: 100%;
        margin-bottom: 2rem;
    }

    .home-content .left-content button {
        height: 2rem;
        width: 7rem;
        font-size: 0.75rem;
    }

    /* Right Content */

    .home-content .right-content {
        width: 100%;
        padding: 0rem;
    }

    .home-content .right-content img {
        width: 65%;
        height: auto;
        cursor: no-drop;
    }

    /* Personal Details */

    .Personal-details {
        flex-direction: column;
        width: 100%;
        padding: 3rem;
        height: 100%;
    }

    .Personal-details span {
        font-size: 2vw;
    }

    .Personal-details #span-bold {
        font-size: 2vw;
        font-weight: 500;
    }

    .details {
        margin-top: 7rem;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        /* gap: 2rem; */
        line-height: 1rem;
        padding: 2rem;
    }

    .details h2 {
        font-size: 3vw;
    }

    .details ul li {
        font-size: 2vw;
    }

    .Education {
        height: 100%;
        width: 100%;
        /* gap: 2rem; */
        line-height: 1rem;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .Education h2 {
        font-size: 3vw;
    }

    .Education ul li {
        font-size: 2vw;
    }

    /* Skills Section */

    .skills {
        width: 100%;
        height: 100%;
        align-content: center;
        justify-items: center;
        padding: 3rem;
    }

    .skill-bg {
        width: 100%;
        height: 60vh;
        align-content: center;
        justify-items: center;
    }

    .skills h2 {
        font-size: 3vw;
        margin-bottom: 0;
        margin-top: 1rem;
    }

    .skills ul {
        padding: 2rem;
    }

    .skills ul li {
        font-size: 2vw;
        margin-top: 1rem;
    }

    .skills span {
        font-size: 2.2vw;
    }

    .skill-bg .download {
        margin-top: 0;
    }

    .download a {
        padding: 0.5rem 1.2rem;
        text-align: center;
        font-size: 2.2vw;
    }

    /* Profiles */

    .profiles {
        padding: 3rem;
    }

    .profiles h1 {
        font-size: 3vw;
        margin-bottom: 3rem;
    }

    .social-media {
        height: 49.6vh;
        width: 100%;
        line-height: 2rem;
        /* background-color: rgb(141, 172, 255); */
        border: none;
    }

    .social-media img {
        width: 3.5vw;
        height: auto;
        margin-right: 10px;
    }

    .social-media a {
        width: 100%;
        height: 9vh;
        padding: 0 2rem;
        margin-bottom: 10px;
        align-items: center;
        justify-content: space-between;
    }

    .social-media span {
        font-size: 2vw;
    }

    /* About Me */

    .About-me {
        width: 100%;
        height: 100%;
        padding: 3rem;
    }

    .top-info {
        width: 100%;
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .top-info h1 {
        font-size: 3vw;
        margin-bottom: 3rem;
        margin-top: 2.5rem;
    }

    .top-info h3 {
        font-size: 2.2vw;
        margin-bottom: 1rem;
    }

    .top-info p {
        color: rgb(29, 29, 29);
        font-size: 2vw;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .top-info span {
        color: rgb(77, 139, 255);
    }

    .what-i-offer {
        width: 100%;
        padding: 3rem;
    }

    .what-i-offer h2 {
        font-size: 3vw;
        margin-bottom: 3rem;
        margin-top: 2rem;
    }

    .what-i-offer ul li {
        margin-left: 1rem;
        font-size: 2vw;
        margin-bottom: 0.5rem;
    }

    /* Work Together */

    .work-together {
        margin-bottom: 3rem;
        width: 100%;
        height: 100%;
        padding: 3rem;
    }

    .My-approach {
        width: 100%;
        /* align-content: center; */
        justify-items: center;
        padding: 2rem;
        border-radius: 4px;
        margin-bottom: 2rem;
    }

    .My-approach h2 {
        font-size: 3vw;
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .My-approach p {
        font-size: 2vw;
    }

    .work {
        width: 100%;
        padding: 3rem;
    }

    .work h2 {
        font-size: 3vw;
        margin-top: 1rem;
        margin-bottom: 3rem;
    }

    .work p {
        font-size: 2vw;
    }

    /* Footer */

    footer {
        /* padding: 1rem; */
        border-radius: 4px 4px 0px 0px;
        -webkit-border-radius: 4px 4px 0px 0px;
        -moz-border-radius: 4px 4px 0px 0px;
        -ms-border-radius: 4px 4px 0px 0px;
        -o-border-radius: 4px 4px 0px 0px;
    }

    #bottom {
        margin: 0 1rem;
        /* padding: 2rem; */
    }

    .mark {
        padding: 1vw;
    }

    .mark p {
        font-size: 1.7vw;
        line-height: 1rem;
        font-weight: 600;
    }

    .contact-info {
        line-height: 1.2rem;
    }

    .contact-info p {
        font-size: 1.7vw;
    }

    .contact-info p a {
        font-size: 1.7vw;
    }

    .social-media-footer {
        width: 100%;
        height: 100%;
        padding: 0.5vw 0.5vw;
        text-align: center;
    }

    .social-media-footer img {
        width: 1.5vw;
        height: auto;
        margin-right: 10px;
    }

    .description {
        padding: 0.5vw;
    }

    .description p {
        font-size: 1.7vw;
        line-height: 1.5rem;
    }
}