body {
    font-family: 'Josefin Sans', sans-serif;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: #F8EDE3;
    color: #575757;
    font-size: 2vh;
}

/*tool tip styling*/
.tooltip {
    background-color: white;
    font-family: 'Mate SC', serif;
    border: solid #754138 5px;
    text-align: left;

}

.tooltip .tooltip-inner{
    background-color: #fff8ec;
    color: black;
}

.tooltip .tooltip-arrow{
    display: none;
}

.footer-home {
    background-color: #798777;
    /*position: fixed;
    left: 0;
    bottom: 0;*/
    width: 100%;
    color: white;
    margin-top: auto;
}

.navbar {
    background-color: #798777;
    
}

.navbar-home{
    
}

.nav-link {
    color: white;
}

.nav-link.show{
    color: white;
}

.active{
    color: #323a2b;
}

.nav-link:hover{
    color: black;
}


/*Centers navbar links*/
/*@media (min-width: 567px) {
    .abs-center-x {
        position: absolute;
        top: 1.25vh;
        left: 50%;
        transform: translateX(-50%);
    }
}*/

.dropdown-menu {
    background-color: #A2B29F;
}

.dropdown-item {
    color: #798777;
}

.dropdown-menu .active {
    background-color: #798777;
}


.jumbotron-home {
    text-align: center;
    /*background-image: url("images/welcome_banner.png");*/
    /*background-size: cover;*/
    background-color: #BDD2B6;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2vw;
}

.jumbotron-image {
    /*max-height: 70vh;*/
    /*object-fit: cover;*/
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
}

.vertical-align{
    display: flex;
    justify-content: center;
    align-items: center;
}

#welcome_message{
    margin-top: 30%;
}

.card {
    background-color: #798777;
    color: white;
    width: 40vh;
}

.card:hover{
    cursor: pointer;
    transform: scale(1.05);
    box-shadow: 0px 0px 20px rgba(189,170,140,1);
}

/*antri race*/

.intro-header{
    font-size: 5vh;
    margin-top: 8vh;
    margin-left: 12vh;
    font-family: 'DM Serif Display', serif;
}

#body_illus{
    /*width: 20vw;*/
}

.quote {
    font-family: 'DM Serif Display', serif;
}


/*antri creatures*/
.creature-container {
    margin-top: 5em;
    font-family: 'DM Serif Display', serif;
}

.carousel-container{
    
}

.carousel-inner img{
    margin: auto;
}


/*antri deity*/
.deity-container{
    margin-top: 7vh;
}

.deity-card {
    color: white;
}

.deity-card img{
    width: 27vh;
}

.deity-card img:hover{
    cursor: pointer;
    transform: scale(1.05);
    box-shadow: 0px 0px 20px rgba(189,170,140,1);
}


.modal {
    /*position: relative;*/
}

.deity-modal-close-btn {
    position: absolute;
    top : 3%;
    right: 5%;
}

.deity-name {
    text-align: center;
    font-size: 7vh;
    font-family: 'DM Serif Display', serif;
}

.deity-modal-card{
    width: 60%;
}

.quote-speaker{
    margin-right: 1vw;
}


/*antri map*/
.map-title {
    margin-top: 5em;
    font-family: 'DM Serif Display', serif;
}

#map_container {
    position: relative;
    margin-top: 1vh;
}

.serif-display {
    font-family: 'DM Serif Display', serif;
}

/*@media screen and (min-width: 576px) {
    #map_container {
        margin-top: 7vh;
    }
}
*/
.marker {
    position: absolute;
    cursor: pointer;
}

.marker p{
    font-size: 2vw;
    opacity: 0;
}

.marker-image{
    height: 50%;
    width: 50%;
}

#mark1{
    top: 12%;
    left: 7%;
}

#mark2 {
    top: 1.5%;
    left: 40.5%;
}

#mark3 {
    top: 9.5%;
    left: 55.7%;
}

#mark4 {
    top: 57%;
    left: 60%;
}

#mark5 {
    top: 60.5%;
    left: 20.5%;
}

#mark6 {
    top: 45%;
    left: 67.5%;
}

#mark7 {
    top: 24.5%;
    left: 88%;
}

#mark8 {
    top: 87%;
    left: 51.5%;
}

#mark9 {
    top: 86.5%;
    left: 60.5%;
}

#mark10 {
    top: 65%;
    left: 89%;
}

#antri_map {
    border: solid #7a4616;
    width: 100%;
}




/*scroll up button*/
#scroll_btn {
    display: none;
    position: fixed;
    
    bottom: 5vh;
    right: 1vw;
    
    
    z-index: 99;
    cursor: pointer;
    opacity: 0.3;
}

#scroll_btn:hover{
    
}

/*@media screen and (min-width: 576px){
    #scroll_btn {
        bottom: 5vh;
        right: 2vw;
    }
}*/



.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}