@font-face {
    font-family: FiraSansRegular;
    src: url(FiraSans-Regular.ttf);
}
@font-face {
    font-family: FiraSansBold;
    src: url(FiraSans-Bold.ttf);
}

/*-----------------Map Styling-----------------*/
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 70%; }
#mapInfo{ position: absolute; top: 70%; font-size: 14px; line-height: 18px; color:rgb(105, 105, 105); padding: 8px;}

    .marker {
        background-image: url('https://data-assets.wort.lu/design/202308_wolf/wolf.png');
        background-size: cover;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        cursor: pointer;
        mix-blend-mode: multiply;
    }
    @media (min-width: 1600px) {
        .marker{
            width: 24px;
            height: 24px;
        }
    }



/*-----------------Legend Styling-----------------*/
    .legende{
        display: flex;
        font-family: FiraSansRegular, sans-serif;
        font-style: normal;
        flex-wrap: wrap;
    }
    .legendElement{
        display:flex ;
        align-items: center;
        padding-right: 16px;
    }

    .legendColourMark{
        border-radius: 50%;
        height: 20px;
        width: 20px;
    }

    .legendColourMarksquare{
        height: 20px;
        width: 20px;
        background-color: #f8b22580;
        border: 1px solid #c5780d;
    }

    .punktuellColour{
        background-color: #bdddb9;
    }

    .nachweisLuxColour{
        background-color: #2da9ec;
    }
    .sesshaftColour{
        background-color: #FA8C00;
    }


    .legendText{
        margin: 4px 8px;
        text-align: left;
    }


    .sesshaft{
        background-color: #FA8C00;
        border: 6px solid #FA8C00;
    }

    .nachweisLux{
        background-color: #2da9ec;
        border: 6px solid #2da9ec;
    }

    .punktuelleSichtung{
        background-color: #bdddb9;
        border: 6px solid #bdddb9;
    }


/*-----------------Map Popups Styling-----------------*/
    .mapboxgl-popup {
        min-width: 280px !important;
        max-width: 300px !important;
    }

    .mapboxgl-popup-content{
        text-align: left;
        font-size: 15px;
        line-height: 18px;
    }

    @media (max-width: 560px) {
        .mapboxgl-popup {
            max-width: 250px;
        }
      }

.base-style {
    width: 90%;
    display: block;
    margin: 0 auto;
    padding: 8px 0;
}


.cardButton{
    background-color: #0082C9;
    border-radius: 8px;
    padding: 12px 32px;
    color: rgb(255, 255, 255);
    font-family: FiraSansBold, sans-serif;
    font-style: normal;
    line-height: 21px;
    text-decoration: none;
}

.popText {
    margin: 8px 0px;
    font-family: FiraSansRegular, sans-serif;
}

.popupTitle {
    margin: 4px 0px;
    font-size: 20px;
    font-family: FiraSansBold, sans-serif;
}
.articleTitle{
    margin: 8px 0px;
    font-size: 16px;
    font-family: FiraSansBold, sans-serif;
}

.articleImage{
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    
}