body {
    background-color: rgb(240, 255, 255);
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    max-width: 900px;
    margin: auto;
}

#nav-div {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
}

nav {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
}

nav ul {
    list-style-type:none;
    display: flex;
    position: relative;
    padding: 0;
}

nav ul li {
    padding: 0 10px 0 10px;
    border-right: 2px gray solid;
    margin: none;
}

nav ul li a {
    text-decoration: none;
    color: black;
    font-weight: 400;
}

nav ul li a:hover {
    text-decoration: none;
    color: black;
    font-weight: 600;
}

.selected {
    font-weight: 600;
}

nav ul li:last-child {
    border-right: none;
    padding-left: none;
}

h1 {
    text-align: center;
}

body {
    padding: 0 20px 0 20px;
}

#orb-display {
    display:grid;
    grid-template-columns: min-content min-content;
    column-gap: 100px;
    width: auto;
    text-align: center;
}

.img-ctr {
    max-width: 600px;
}

.img-cont {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 35px;
}

figcaption {
    color: rgb(70, 70, 70);
    font-size: 15px;
    max-width: 550px;
    text-align: center;
    margin: auto;
    font-style: italic;
}

figcaption::before{
    font-style: normal;
    content: "⬆️ ";
}

strong, b {
    font-weight: 600;
}

.centered-iframe iframe {
    display: block; /* Changes the iframe from inline to a block-level element */
    margin-left: auto; /* Sets the left margin to automatically adjust */
    margin-right: auto; /* Sets the right margin to automatically adjust */
}