:root {
    --cambridge-blue: #839788ff;
    --apricot: #f7c4a5ff;
    --mountbatten-pink: #9e7682ff;
    --english-violet: #605770ff;
    --english-violet-dark: #4d4861ff;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: var(--english-violet-dark);
    color: white;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.roboto-400 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.roboto-800 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* Order should change when screen width is small */
.profile-img-container {
    order: 1;
}

.title-container {
    order: 2;
}

.details-text {
    text-decoration: none;
    color: var(--apricot);
}

a:hover {
    color: white;
}

.bg-apricot {
    background-color: var(--apricot);
}

.bg-cambridge-blue {
    background-color: var(--cambridge-blue);
}

.bg-mountbatten-pink {
    background-color: var(--mountbatten-pink);
}

.bg-eng-violet {
    background-color: var(--english-violet);
}

.bg-eng-violet-dark {
    background-color: var(--english-violet-dark);
}

.text-cambridge-blue {
    color: var(--cambridge-blue);
}

.text-apricot {
    color: var(--apricot);
}

.text-mountbatten-pink {
    color: var(--mountbatten-pink);
}

.text-eng-violet {
    color: var(--english-violet);
}

.text-eng-violet-dark {
    color: var(--english-violet-dark);
}

.lined-text, .lined-text-center {
  display: flex;
  align-items: center;
}

.lined-text-center::before,
.lined-text-center::after,
.lined-text::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--mountbatten-pink);
}

.lined-text:not(:empty)::before,
.lined-text-center:not(:empty)::before {
  margin-right: 1em;
}
.lined-text:not(:empty)::after,
.lined-text-center:not(:empty)::after {
  margin-left: 1em;
}

.btn {
    /* border-radius: 1.25rem; */
}

.btn:focus {
    box-shadow: none;
}

.btn:active:focus {
    box-shadow: none;
}

.card {
    contain: content;
    border: none;
}

.card img {
    max-height: 21rem;
    object-fit: cover;
}

.card-body {
    contain: content;
}

.skill-icon-row {
    justify-content: space-between;
}

.skill-icon-row div {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    text-align: center;
}

.skill-icon-row img {
    max-width: 48px;
    max-height: 48px;
}

.decor-feature {
    position: absolute;
    top: -1rem;
    right: 10rem;
    width: 4rem;
    height: 4rem;
    background-color: var(--apricot);
    border-radius: 50%;
    z-index: -1;
}

.decor-feature::before {
    content: "";
    position: absolute;
    top: -1rem;
    left: 5rem;
    width: 12rem;
    height: 12rem;
    background-color: var(--apricot);
    border-radius: 50%;
}

.decor-feature::after {
    content: "";
    position: absolute;
    top: 9rem;
    left: -18rem;
    width: 7rem;
    height: 7rem;
    background-color: var(--mountbatten-pink);
    border-radius: 50%;
}

.decor-feature-secondary {
    position: absolute;
    top: -1rem;
    right: 10rem;
    width: 4rem;
    height: 4rem;
    background-color: var(--mountbatten-pink);
    border-radius: 50%;
    z-index: -1;
}

.decor-feature-secondary::before {
    content: "";
    position: absolute;
    top: -1rem;
    left: 5rem;
    width: 12rem;
    height: 12rem;
    background-color: var(--mountbatten-pink);
    border-radius: 50%;
}

.decor-feature-secondary::after {
    content: "";
    position: absolute;
    top: 9rem;
    left: -18rem;
    width: 7rem;
    height: 7rem;
    background-color: var(--apricot);
    border-radius: 50%;
}

.decor-underline {
    text-decoration: underline;
    text-decoration-color: var(--mountbatten-pink);
}

.profile-img {
    text-align: center;
    width: 24rem;
    height: 24rem;
    background-color: var(--mountbatten-pink);
    border-radius: 50%;
}

.profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.title {
    font-size: 6rem;
    font-weight: 1000;
}

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

.heading {
    font-size: 3rem;
    font-weight: 600;
}

.row-gap {
    row-gap: 1rem;
}

.row .col-6 {
    min-width: 350px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 1000px) {
    .profile-img-container {
        order: 2;
        width: auto;
    }

    .title-container {
        order: 1;
    }

    .row .col-6 {
        width: 100%;
    }

    .contact-card {
        width: auto;
    }
}

@media (max-width: 500px) {
    .title {
        font-size: 4rem;
    }

    .title-container {
        width: 100%;
    }
}