* {
    user-select: none;
    font-family: Merriweather, sans-serif;
}
.navbar {
    /*animation-name: fadein;*/
    /*animation-duration: 500ms;*/
}

.center-box {
    display: flex;
    margin: 20px auto auto;
    align-items: center;
    justify-content: space-between;
    height: 850px;
    font-family: Merriweather, sans-serif;
    background-color: rgba(246, 246, 246, 100%);
    max-width: 97%;
    border-radius: 20px;
    padding: 0 10px;
    animation-name: fadein;
    animation-duration: 600ms;
}
.info-box {
    background-color: rgba(35, 35, 35, 0.1);
    width: 27.5%;
    height: 98%;
    border-radius: 20px;
}
#info-title,#astroinfo-title {
    text-align: center;
    font-weight: bold;
    margin: 30px 0 0 0;
}
#position-title {
    margin-left: 20px;
    max-width: 42%;
    display: inline-block;
    float: left;
}
#position-result {
    margin-right: 20px;
    width: 42%;
    display: inline-block;
    float: right;
}
#position-title h2{
    font-weight: initial;
    text-align: right;
}
#position-result h2 {
    font-weight: lighter;
    text-align: left;
}
#latitude, #longitude {
    user-select: text;
}

.map-box {
    background-color: rgba(35, 35, 35, 0.1);
    width: 71.5%;
    height: 98%;
    border-radius: 20px;
    text-align: center;
    /*border: 3px solid #2f2f2f;*/
}
#map-title {
    text-align: center;
    font-weight: bold;
    margin: 30px 0 0 0;
}
.map-image {
    text-align: center;
    margin-top: 20px;
}
#earth-map {
    max-width: 1300px;
    border: 5px solid gray;
    border-radius: 10px;
}
#dot {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: red;
    border-radius: 50%;
}

.astro {
    font-weight: lighter;
}
#astronauts-title {
    margin-top: 300px;
}
#astronauts-title ul li {
    display: none;
    font-size: 26px;
    font-weight: lighter;
    align-items: center;
    width: 500px;
}
#astronauts-title ul li h2 {
    margin: 0;
}



.fade-out {
    animation: fadeout 250ms ease forwards;
}
@keyframes fadein {
    from { opacity: 0; transform: translateX(-200px) }
    to { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1;  }
    to { opacity: 0; transform: translateX(200px)}
}