body {
    background-color: black;
}

.header-container {
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 20vh;
    min-height: 300px;
    transition: 0.3s;
}

.header-container .body {
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 90%;
    display: flex;
}

.body .left {
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.left h1 {
    color: rgb(255, 255, 255);
    font-size: 3.7vw;
}
.left h4 {
    color: rgb(202 42 42);
    font-size: 1.15vw;
    height: 15%;
    z-index: 5;
}
.left img {
    width: 100%;
    height: 30%;
    transform: rotate(15deg);
}

.body .block {
    width: 35%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
}

.block blockquote {
    background-color: #e0e0e0;
    width: 90%;
    height: 80%;
    border-radius: 10px;
}
blockquote p {
    width: 100%;
    height: 70%;
    font-size: 1.2vw;
    margin: 0;
    padding: 4%;
    overflow-y: scroll;
}
blockquote section {
    width: 100%;
    height: 30%;
    font-size: 1.5vw;
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.transient-formula img {
    max-width: 70%;
    height: 85%;
    max-height: 100%;
    object-fit: fill;
}
.final-formula img {
    max-width: 50%;
    height: 85%;
    max-height: 100%;
    object-fit: fill;
}

.footer {
    width: 100%;
    height: 10%;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: end;
}

.footer a {
    color: white;
    text-decoration: none;
    font-size: 1.1vw;
    padding-right: 3%;
}


/* -------- Examples Container -------- */
#neo-examples {
    background-color: black;
    color: white;
}
#element-count {
    padding-left: 2%;
}
#meteors {
    display: flex;
    flex-wrap: wrap;
    padding: 2%;
}
.meteor-example {
    background-color: #561515;
    width: 200px;
    padding: 1%;
    margin: 1%;
    transition: 0.25s;
}
.meteor-example:hover {
    background-color: rgb(138, 27, 27);
}


/* -------- Main Container -------- */
.main-container {
    width: 100%;
    height: 100vh;
    min-height: 650px;
    background-color: #000000;
    display: flex;
}

.sidebar {
    min-width: 30%;
    height: 100%;
    padding: 1.5%;
    background-color: #000000;
    color: white;
}

.densities {
    display: flex;
    justify-content: center;
}
.densities hr {
    margin: 2%;
    opacity: 1;   
}

.crater-label {
    display: flex;
    width: 90%;
}

#crater-form h6 {
    font-size: 1.6vw;
    color: #aa1818;
    display: flex;
    justify-content: center;
}
#crater-form p {
    font-size: 1vw;
    color: rgb(202 42 42);
    align-items: center;
    margin: 0;
    display: flex;
    justify-content: center;
}

#crater-form {
    font-size: 1.4vw;
}

section input[type="number"], input[type="range"] {
    width: 45%;
}

#reset-button {
    width: 20%;
    height: 10%;
    font-size: 1.2vw;
    background-color: rgb(179, 43, 43);
    color: white;
    font-weight: 600;
}
#clear-button {
    width: 50%;
    height: 10%;
    background-color: #d99924;
    color: white;
    font-weight: 600;
}

#map-container {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    color: white;
}

#map {
    width: 90%;
    height: 90%;
}


@media only screen and (max-width: 800px) {
    .header-container {
        background-color: blanchedalmond;
        width: 100%;
        height: 20vh;
        min-height: 250px;
    }
}
@media only screen and (min-width: 1300px) {
    .header-container {
        background-color: blanchedalmond;
        width: 100%;
        height: 20vh;
        min-height: 400px;
    }
}