@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');

:root {
    --dark-cyan: hsl(185, 75%, 39%);
    --dark-blue: hsl(229, 23%, 23%);
    --dark-grayish-blue: hsl(227, 10%, 46%);
    --dark-gray: hsl(0, 0%, 59%);
    --white-bg: hsl(185, 75%, 100%);
    --border-color: hsl(0, 0%, 90%);
}
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 50%;
}

body{
    font-family: 'Kumbh Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

.container {
    width: 100%;
    height: 100vh;
    background: var(--dark-cyan);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.bg-pattern-top {
    position: absolute;
    top: -95%;
    right: 40%;
}

.bg-pattern-bottom {
    position: absolute;
    bottom: -80%;
    left: 50%;
}

.profile {
    text-align: center;
    width: 88%;
    height: 55vh;
    background: var(--white-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 2rem;
}

.img__cover--top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 21vh;
    text-align: center;
    
}

.img__cover--top img {
    width: 100%;
    height: 100%;
    border-top-right-radius: 2rem;
    border-top-left-radius: 2rem;
}

.profile__body {
    width: 100%;
    z-index: 1;
}

.profile__body .profile__img {
    margin-top: 8rem;
}

.profile__body .profile__img img {
border: 5px solid var(--white-bg);
border-radius: 50%;
}

.profile__details {
    width: 100%;
    padding: 2rem;
    border-bottom: .1px solid var(--border-color);
    margin-bottom: 2rem;
}

.profile__details .name {
    font-weight: 700;
    color: var(--dark-blue);
    font-size: 2.25rem;
    margin-bottom: 1.25rem;
}

.profile__details .location {
    font-weight: 700;
    color: var(--dark-gray);
    font-size: 1.75rem;
}

.profile__details .name span {
    font-weight: 400;
    color: var(--dark-grayish-blue);
}

.social__details {
    display: flex;
    justify-content: space-around;
}

.social__details p {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    color: var(--dark-blue);
    font-size: 2.25rem;
    text-transform: capitalize;
    margin: 1rem;
}

.social__details p span {
    margin-top: 1rem;
    font-size: 1.25rem;
    color: var(--dark-grayish-blue);
}

.attribution {
    position: absolute;
    bottom: .5rem;
    left: 2%;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .08rem;
}

.attribution a {
    text-transform: capitalize;
    text-decoration: underline;
    color: var(--white-bg);
}

@media screen and (max-width: 820px) and (min-width: 700px) {
    .bg-pattern-top {
        top: -86%;
    }

    .bg-pattern-bottom {
        bottom: -95%;
        left: 40%;
    }

    .profile {
        width: 50%;
    }

    .profile__body .profile__img {
         margin-top: 6rem;
    }
}

@media screen and (min-width: 1024px) {
    html {
        font-size: 62.5%;
    }

    .bg-pattern-top {
        top: -86%;
        right: 50%;
    }

    .bg-pattern-bottom {
        bottom: -115%;
        left: 40%;
    }


    .profile {
    width: 28%;
    height: 60vh;
    }

    .profile__body .profile__img {
        margin-top: 5rem;
    }

    .profile__details .name,
    .social__details p {
        font-size: 2rem;
    }

    .profile__details .location {
        font-size: 1.5rem;
    }

    .social__details p span {
        font-size: 1rem;
    }

}

@media screen and (max-height: 480px) and (orientation: portrait) {
    html {
        font-size: 40%;
    }

    .bg-pattern-top {
        top: -136%;
        right: 35%;
    }


    .bg-pattern-bottom {
        bottom: -125%;
        left: 50%;
    }

    .profile {
    width: 88%;
    height: 60vh;
    }

    .profile__body .profile__img {
        margin-top: 5rem;
    }

}

@media screen and (max-height: 480px) and (orientation: landscape) {
    html {
        font-size: 40%;
    }

    .bg-pattern-top {
        display: none;
    }


    .bg-pattern-bottom {
        display: none;
    }

    .profile {
        width: 88%;
        height: 90vh;
    }

    .img__cover--top {
        height: 32vh;
    }

    .profile__body .profile__img {
        margin-top: 4rem;
    }

}