@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

* {
    margin: 0px;
    padding: 0px;
}

@media screen and (min-width: 376px) {
    body {
        width: 100vw;
        height: 102vh;
    }

    main {
        width: 100%;
        height: 98.04%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: hsl(210, 46%, 95%);
    }

    .container {
        width: 50.5%;
        height: 35%;
        display: flex;
        background-color: white;
        border-radius: 10px;
        box-shadow: 1px 1px 21px hsl(214, 17%, 51%, .3);
    }

    .container > img {
        width: 39%;
        object-fit: cover;
        object-position: 1%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        filter: brightness(1.1);
    }

    .content-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content {
        width: 82%;
        height: 86%;
    }

    .content > h1 {
        width: 95%;
        margin-top: 3.5%;
        font-size: 20.45px;
        font-family: "Manrope", sans-serif;
        font-weight: 700;
        color: hsl(214, 17%, 51%);
    }

    .content > p {
        margin-top: 3.9%;
        font-size: 13.25px;
        line-height: 19px;
        font-family: "Manrope", sans-serif;
        font-weight: 500;
        color: hsl(212, 23%, 69%);
    }

    .link-container {
        display: flex;
        justify-content: space-between;
        margin-top: 5.8%;
    }

    .profile-container {
        display: flex;
    }

    .profile-container > img {
        border-radius: 50%;
        width: 13.5%;
        height: 100%;
    }

    .profile-info {
        margin-left: 6%;
        font-family: "Manrope", sans-serif;
    }

    .profile-name {
        font-size: 13.2px;
        font-weight: 700;
    }

    .profile-date {
        margin-top: 2%;
        font-size: 13px;
        font-family: "Manrope", sans-serif;
        font-weight: 500;
        color: hsl(212, 23%, 69%);
    }

    .links-icon-button {
        border-radius: 50%;
        height: 1.9rem;
        border: 0px;
        width: 8.5%;
        margin-top: 1%;
    }

    .links-icon-button > img {
        margin-top: 11%;
        margin-left: 8.1%;
        width: 51.5%;
    }
    
    .share-bubble {
        display: none;
        position: absolute;
        background-color: hsl(217, 19%, 35%);
        top: 24.3rem;
        right: 17.9rem;
        width: 17.2%;
        height: 6.9%;
        border-radius: 10px;
    }

    .tri-right.border.btm-left-in:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: 30px;
        right: auto;
        top: auto;
        bottom: -40px;
        border: 20px solid;
        border-color: #666 transparent transparent #666;
    }

    .tri-right.btm-left-in:after{
        content: ' ';
        position: absolute;
        width: 0px;
        height: 0px;
        left: 110px;
        right: auto;
        top: auto;
        bottom: -7px;
        border: 12px solid;
        border-color: hsl(217, 19%, 35%) transparent transparent hsl(217, 19%, 35%);
        rotate: -136deg;
    }

    .active {
        filter: invert(1) brightness(10);
    }

    .links-icon-container {
        display: flex;
        justify-content: space-between;
        height: 54%;
        background-color: hsl(217, 19%, 35%);
        align-items: center;
        margin-top: 5.6%;
        margin-left: 14.6%;
        width: 70.8%;
    }

    .links-icon-container > p {
        font-size: 15.36px;
        font-family: "Manrope", sans-serif;
        font-weight: 500;
        color: hsl(210, 46%, 95%);
        margin-right: 3%;
    }
}

@media screen and (max-width: 375px) {
    body {
        width: 100vw;
        height: 102vh;
    }

    main {
        width: 100%;
        height: 98.041%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: hsl(210, 46%, 95%);
    }

    .container {
        width: 87%;
        height: 77%;
        display: flex;
        flex-direction: column;
        background-color: white;
        border-radius: 10px;
        margin-bottom: 2%;
        box-shadow: 1px 1px 21px hsl(214, 17%, 51%, .3);
    }

    .container > img {
        width: 100%;
        object-fit: cover;
        object-position: 0% 24%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 39%;
    }

    .content-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 61%;
    }

    .content {
        width: 81%;
        height: 100%;
    }

    .content > h1 {
        width: 97%;
        margin-top: 14%;
        font-size: 16.38px;
        font-family: "Manrope", sans-serif;
        font-weight: 700;
        color: hsl(214, 17%, 51%);
        line-height: 24px;
    }

    .content > p {
        width: 99%;
        margin-top: 5%;
        font-size: 13.3px;
        line-height: 20px;
        font-family: "Manrope", sans-serif;
        font-weight: 500;
        color: hsl(212, 23%, 69%);
    }

    .share-bubble {
        display: none;
        position: absolute;
        background-color: hsl(217, 19%, 35%);
        top: 32.2rem;
        right: 1.5rem;
        width: 87.2%;
        height: 10.8%;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .active {
        filter: invert(1) brightness(10);
    }

    .link-container {
        display: flex;
        justify-content: space-between;
        margin-top: 12%;
    }

    .profile-container {
        display: flex;
        margin-left: 0.5%;
    }

    .profile-container > img {
        border-radius: 50%;
        width: 16.9%;
        height: 100%;
    }

    .profile-info {
        margin-left: 7%;
        font-family: "Manrope", sans-serif;
    }

    .profile-name {
        font-size: 13.2px;
        font-weight: 700;
    }

    .profile-date {
        margin-top: 2%;
        font-size: 13px;
        font-family: "Manrope", sans-serif;
        font-weight: 500;
        color: hsl(212, 23%, 69%);
    }

    .links-icon-button {
        background-size: auto;
        border-radius: 50%;
        height: 2rem;
        width: 16%;
        margin-top: 1%;
        border: 0px;
        z-index: 1;
    }

    .links-icon-container {
        display: flex;
        justify-content: space-between;
        height: 86%;
        background-color: hsl(217, 19%, 35%);
        align-items: center;
        margin-left: 10%;
        width:53.3%;
    }

    .links-icon-container > p {
        font-size: 12px;
        font-family: "Manrope", sans-serif;
        font-weight: 500;
        color: hsl(210, 46%, 95%);
        margin-right: 3%;
        letter-spacing: .1rem;
    }
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }