:root {
    --base-hue: 41;
    --base-saturation: 47%;
    --base-light: 90%;
    --base-color: hsl(var(--base-hue), var(--base-saturation), var(--base-light));

    --focus-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-light) - 50%));

    --base-color-10dark: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-light) - 2%));

    --base-font-color: #121212;
}

body,
html {
    background-color: var(--base-color);
    font-family: "Playfair Display", serif;
    color: var(--base-font-color);
}

nav {
    background-color: var(--base-color-10dark);
    box-shadow: 0 0.1rem 0.1rem 0 hsla(0,0%,0%, 10%);
}

#landing > .jumbotron {
    min-height: 100vh;
    background-color: inherit;
    text-align: center;
}
#landing-title {
    margin-bottom: 1rem;
    font-size: 5rem;
}
#landing-subtitle {
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    margin: 1rem 0;
}

#landing-social {
    margin-top: 7.5rem;
}

.landing-btn,
.portfolio-link-btn,
.contact-btn,
a {
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 5px;
    color: var(--base-font-color);
}
.landing-btn:hover,
.landing-btn:not(:disabled):not(.disabled):active,
.portfolio-link-btn:hover,
.portfolio-link-btn:not(:disabled):not(.disabled):active,
.contact-btn:hover,
.contact-btn:not(:disabled):not(.disabled):active,
a:hover  {
    background-color: transparent;
    font-style: italic;
    color: var(--base-font-color);
    border-color: transparent;
}

navbar {
    background-color: var(--base-color);
}

.section-heading {
    padding-left: 0;
}

.card {
    background-color: transparent;
    border: transparent;
}

.portfolio-link-btn {
    padding-left: 0;
}
.bi-box-arrow-up-right {
    margin-left: 0.4rem;
}
.contact-inputs {
    padding-left: 0;
    padding-right: 0;
}