html {
  font-size: 14px;  
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

:root {
    --menu-bg-image: url("/images/banner.png");
}

.natural-1 {
    background-image: url("/images/natural 1.svg");
    height: 902px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-bottom: 60px;
    }

    .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
        color: var(--bs-secondary-color);
        text-align: end;
    }

    .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
        text-align: start;
    }

header {
    background-image: var(--menu-bg-image);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-y: 45%;
    height: 12rem;
    padding-bottom: 1rem;
}


    #title {
        display: flex;
        justify-content: center;
        align-content: center;
        width: 100%;
        font-size: 6rem;
        color: var(--bs-light);
        text-shadow: 0 5px 6px var(--bs-secondary);
        font-family: 'black rodeo';
        -webkit-text-stroke-width: .5px;
        -webkit-text-stroke-color: var(--bs-secondary);
        line-height: 100px;
    }   
    
    

    #title > a {
        text-decoration: none;
        color: var(--bs-text-white);
        cursor: pointer;
    }

    #subtitle {
        display: flex;
        width: 100%;
        color: var(--bs-light);
        font-size:1.75rem;
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

#hamburger {
    font-size: 1.75em;
    color: var(--bs-light);
    cursor: pointer;
}

.dropdown-item-text{
    font-weight:bold;
}

.lore {
    column-fill: balance;
    column-count: 1;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-gap: 2rem;
}

@media (min-width: 576px) {
    .lore {
        column-count: 2;
    }
}

@media (min-width: 992px) {
    .lore {
        column-count: 3;
    }
}

.lore > div {
    text-indent:2rem;
}

hr {
    border-bottom: solid 1px var(--bs-light);
}

.cursor-pointer{
    cursor: pointer!important;
}

.npc-list-image{
    max-height: 500px;
}

.modal-link{
    cursor: pointer;
}

.pc-profile {
    border-bottom: solid 1px var(--bs-border-color-translucent);
}

figcaption {
    color: var(--bs-secondary-color);
    text-align: center;
}

a[data-bs-toggle="collapse"] {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    vertical-align: central;
}