:root {
    --fp : clamp(1rem, 0.8rem + 1vw, 1.25rem);
    --fh1: clamp(2.5rem, 0.8rem + 4vw, 8rem);
    --fh2: clamp(2rem, 1.5rem + 1vw, 4rem);
    --fh3: clamp(0.3rem, 0.4rem + 4vw, 3rem);
    --br : calc(45 / 16 * 1rem);
}

.about,
.card-container {
    max-width      : calc(90rem + 1vw);
    height         : max-content;
    padding        : 0 40px;
    border         : 2px solid transparent;
    background     : linear-gradient(71deg, #080509, #1a171c, #080509);
    background-clip: padding-box;
    border-radius  : var(--br);
    margin         : 2rem;
    box-shadow     : 0 4px 10px rgba(0, 0, 0, 0.4);
}

.heading {
    font-size : var(--fh1);
    margin    : 1.2rem 0;
    text-align: center;
}

.heading2 {
    font-size: var(--fh2);
}

.about-wrapper {
    display      : flex;
    flex-wrap    : wrap;
    margin-bottom: 90px;
}

.about-content-container {
    margin: 0 2rem;
}

.about-me-description {
    text-align: justify;
}

.card-container {
    padding   : 0;
    overflow  : hidden;
    position  : relative;
    background: none;
    margin    : 0;
}

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

*,
*:before,
*:after {
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

/* End basic CSS override */
.profile {
    display         : flex;
    align-items     : flex-end;
    justify-content : space-between;
    padding         : 2rem;
    background-color: #1b2028;
    border-radius   : 16px;
    position        : relative;
    background-clip : padding-box;
    text-align      : center;
    color           : #f1f3f3;
    background-image: linear-gradient(135deg, rgba(117, 46, 124, 0.35), rgba(115, 74, 88, 0.1) 15%, #1b2028 20%, #1b2028 100%);
}

.shadow {
    padding        : 0;
    background-clip: padding-box;
    overflow       : hidden;
    position       : relative;
    margin         : 0 2rem;
    background     : linear-gradient(135deg, #752e7c, #734a58 20%, #1b2028 30%, #2c333e 100%);
    border-radius  : var(--br);
}

.card-container::after {
    position     : absolute;
    top          : 0px;
    bottom       : -1px;
    left         : -1px;
    right        : -1px;
    content      : "";
    z-index      : -1;
    border-radius: var(--br);
    background   : linear-gradient(135deg, #752e7c, #734a58 20%, #1b2028 30%, #2c333e 100%);
}

.profile-content {
    display    : flex;
    align-items: flex-end;
}

.profile-image {
    border-radius: 50%;
    max-width    : 25%;
}

.profile-username {
    font-size  : 1.5rem;
    font-weight: 600;
}

.profile-user-handle {
    color: #7d8396;
}

.profile-actions {
    margin-top     : 1.5rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.profile-name-container {
    display       : flex;
    flex-direction: column;
}

.profile-actions>* {
    margin: 0 0.25rem;
}

.btn {
    border          : 0;
    background-color: transparent;
    padding         : 0;
    height          : 46px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    line-height     : 1;
    transition      : 0.15s ease;
}

.btn--primary {
    border-radius   : 99em;
    background-color: #3772ff;
    background-image: linear-gradient(135deg, #5587ff, #3772ff);
    color           : #fff;
    padding         : 0 1.375em;
}

.btn--primary:hover,
.btn--primary:focus {
    background-size: 150%;
}

.btn--icon {
    height       : 46px;
    width        : 46px;
    border-radius: 50%;
    border       : 3px solid #343945;
    color        : #7d8396;
}

.btn--icon i {
    font-size: 1.25em;
}

.btn--icon:hover,
.btn--icon:focus {
    border-color: #7d8396;
}


.link {
    text-decoration: none;
    color          : #7d8396;
    margin-left    : 0.375rem;
    margin-right   : 0.375rem;
}

.link i {
    font-size: 1.25em;
}

.bg-white-box::after {
    border-radius: var(--br);
}


/* bottom card css */

.w {
    --primary-color: rgb(228, 231, 8);
}

.ga {
    --primary-color: rgb(228, 11, 11);
}

.gr {
    --primary-color: rgb(8, 231, 45);
}

h1,
h2,
h3,
p {
    margin: 0rem;
}

.bottom-card {
    position       : relative;
    padding        : 1rem;
    border         : 2px solid transparent;
    background     : linear-gradient(71deg, #080509, #1a171c, #080509);
    background-clip: padding-box;
    border-radius  : var(--br);
    box-shadow     : 0 4px 10px rgba(0, 0, 0, 0.4);
}

.bottom-card::before {
    transition                : top, opacity;
    transition-duration       : 600ms;
    transition-timing-function: ease;
    background                : linear-gradient(transparent,
            var(--primary-color),
            transparent);
    opacity      : 0;
    position     : absolute;
    top          : -2px;
    bottom       : -2px;
    left         : -2px;
    right        : -2px;
    content      : "";
    z-index      : -2;
    border-radius: var(--br);
}

.bottom-card:hover::before {
    top    : 0;
    opacity: 1;
}

.bottom-card-content {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    gap            : 1rem;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px,
            transparent 1px);
    background-position: 50% 50%;
    background-size    : 1.1rem 1.1rem;
    padding            : 4rem;
    overflow           : hidden;
}

.bottom-card-content> :is(h1, h3, p) {
    text-align: center;
}

.bottom-card-content>h1 {
    color    : rgb(250 249 246);
    font-size: 2.6rem;
}

.bottom-card-content>h3 {
    color         : var(--primary-color);
    text-transform: uppercase;
    font-size     : 0.76rem;
}

.bottom-card-content>p {
    color      : rgb(255 255 255 / 75%);
    line-height: 1.5rem;
}

@media(max-width: 600px) {
    .profile {
        flex-direction: column;
        align-items   : center;
    }

    .profile-content {
        flex-direction: column;
        align-items   : center;
        width         : 50%;
    }

    .profile-links {
        display        : flex;
        width          : 100%;
        justify-content: space-evenly;
        margin         : 2rem 0;
    }

    .bottom-card-content {
        padding: 3rem;
    }

    .bottom-card-content>h1 {
        font-size: 2.2rem;
    }
}

.whole-bottom-container {
    display  : flex;
    flex-wrap: wrap;
    gap      : 2rem;
    margin   : 2rem;
    max-width: calc(90rem + 1vw);
}