body {
    margin: 0px;
}

nav {
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0px;
    width: 100%;
    background-color: rgb(31, 31, 31);
    border-bottom-width: 10px;
    border-bottom-style: solid;
    border-bottom-color: pink;
    color: white;
}

.nav-wrapper {
    margin: 0px;
    top: 50%;
    padding-left: 15%;
    padding-right: 15%;
}

.nav-title {
    display: inline;
    margin-top: 0px;
    margin-bottom: 0px;
}

.nav-links {
    list-style-type: none;
    display: inline;
    float: right;
    position: relative;
    transform: translateY(50%);
    margin: 0;
}

.nav-links li {
    display: inline;
}

.nav-item {
    margin-left: 15px;
}

body {
    background-image: image-set(url("/assets/images/mckeldin.jpg") 4x, url("/assets/images/mckeldin_2500.jpg") 2x,
            url("/assets/images/mckeldin_1500.jpg") 1x, url("/assets/images/mckeldin_1000.jpg") 0.5x,
            url("/assets/images/mckeldin_500.jpg") 0.25x);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-x: center;
    min-height: 100vh;
}

.full-wrapper {
    background-color: rgba(255, 255, 255, 0.375);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.body-wrapper {
    padding-top: 50px;
    padding-left: 15%;
    padding-right: 15%;
}


main {
    overflow: auto;
}

.img-feature {
    width: calc(30% + 30px);
    object-fit: cover;
    border-radius: 35px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-color: pink;
    border-width: 5px;
    border-style: solid;
    display: inline;
    margin-right: 10%;
    margin-bottom: 50px;
}

.main-text {
    border-radius: 35px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    float: right;
    width: 50%;
    padding: 15px;
    padding-left: 20px;
    padding-top: 0;
    margin-bottom: 50px;
}

.table-of-contents {
    width: calc(30% + 30px);
    border-radius: 35px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 50%;
    padding: 15px;
    padding-left: 20px;
    padding-top: 0;
    margin-bottom: 50px;
    margin-right: 10%;
    border-color: pink !important;
    align-self: flex-start;
}

.toc-item:not(:last-child) {
    margin-bottom: 15px;
}

.ref-item:not(:last-child) {
    margin-bottom: 15px;
}

.general-list-item:not(:last-child) {
    margin-bottom: 15px;
}

.left-text-bubble {
    border-radius: 35px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 15px;
    padding-left: 20px;
    padding-top: 0;
    width: 55%;
    margin-bottom: 50px;
}

.right-text-bubble {
    border-radius: 35px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 15px;
    padding-left: 20px;
    padding-top: 0;
    width: 55%;
    margin-right: 0;
    margin-left: auto;
    margin-bottom: 50px;
}

.title-text-bubble {
    border-radius: 35px;
    padding: 15px;
    padding-left: 20px;
    padding-top: 0;
    margin-right: 0;
    margin-bottom: 50px;
}


.text-background {
    background-color: rgba(232, 232, 232, 0.875);
    border-color: rgb(31, 31, 31);
    border-width: 5px;
    border-style: solid;
}

.contact {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.contact-svg {
    margin-right: 10px;
    height: 35px;
    width: 35px;
}

footer {
    bottom: 0;
    width: 100%;
    background-color: rgb(31, 31, 31);
    border-top-color: pink;
    border-top-width: 10px;
    border-top-style: solid;
    text-align: center;
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
}

* {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 450;
    font-style: normal;
    font-variation-settings: "width" 100;
    color: rgb(31, 31, 31);
}

a {
    text-decoration: underline;
    color: rgb(41, 170, 209);
}

.white-text {
    color: rgb(232, 232, 232);
}

.full-white-text {
    color: rgb(255, 255, 255)
}

.bold {
    font-weight: 700;
}

.italic {
    font-style: italic;
}

html {
    overflow-y: scroll;

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    color: white;
    padding: 8px;
    z-index: 100;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

html {
    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    color: white;
    padding: 8px;
    z-index: 100;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}