/*------ template stylization ------*/

body {
        margin: 0;
        background: #111;
        display: flex;
        justify-content: center;
    }

    .poster {
        position: relative;
        width: min(100vw, 1536px);
        aspect-ratio: 1536/1024;
        background: url("../images/hero2.PNG") center/contain no-repeat;
    }

    .hotspot {
        position: absolute;
        display: block;
        border-radius: 30px;
        transition: background .2s;
        cursor: pointer;
    }

    /* JavaScript Dynamic Tooltip Styling */
    #dynamic-tooltip {
        position: fixed;
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
        padding: 6px 12px;
        font-family: sans-serif;
        font-size: 14px;
        border-radius: 4px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -130%); /* Offset slightly above the pointer */
        transition: opacity 0.15s ease;
        z-index: 9999;
    }

    /* 1 Logo */
    .logo {
        left: 1%;
        top: 2%;
        width: 10%;
        height: 12%;
    } 

    /* 2 Visser links */
    .left-fisher {
        left: 14%;
        top: 18%;
        width: 34%;
        height: 54%;
    }

    /* 3 Visser rechts */
    .right-fisher {
        left: 49%;
        top: 20%;
        width: 29%;
        height: 48%;
    }
    
    /* 4 Logo Title */
    .title{
    left:14%;
    top:0%;
    width:62%;
    height:16%;
}

    /* 5 Boot */
    .boat {
        left: 66%;
        top: 12%;
        width: 31%;
        height: 35%;
    }

    /* 6 Linksonder */
    .raw-edge {
        left: 0%;
        top: 73%;
        width: 50%;
        height: 27%;
    }

    /* 7 Rechtsonder */
    .deep-current {
        left: 50%;
        top: 73%;
        width: 50%;
        height: 27%;
    }