/* Site specific CSS modifiers  */
/* div{
    border:solid 1px hotpink;
} */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Bootstrap modifier stuff */
    .row{
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }
    a {
        text-decoration: none;
    }
    .bdr-top{
        border-top: solid 1px #888;
    }


/* standard HTML tags */
    body {
        color:#151515;
        background-image:url("../images/ocean.jpg");
        background-color: #000000;
        background-size: cover;
    }
    img{
        display: block;
        max-width: 100%;
    }
    pre{
        background-color: greenyellow;
    }

/* MAIN SITE CSS */
    .main-wrap{
        height: calc(100vh - 5px);
        position: relative;
    }
    .container{
        padding:0;
    }
    .pagetitle{
        color: #ddd;
    }
    .pntr{
        cursor: pointer;
    }
    .footer{
        position: absolute;
        bottom: 0;
        width:100%
    }

/* index.php */
    .title{
        font-size: 3rem;
        margin:auto;
    }

/* tracking.php */
    #map{
        width: 100%;
        height:80%;
    }
    .boatmarker {
        background-image: url('images/boaticon.png');
        background-size: cover;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
    }      
    .status{
        position: absolute;
        top:0px;
        right:0px;
        z-index: 10;
        width: 33%;
        background-color: #ccc;
        border:solid 3px #000000;
        border-radius: 5px;
        padding:3px;
    }
    .statusrow{
        display: flex;
        justify-content: space-between;
        font-family: 'Lucida Grande', monospace;
        font-size: 1.0rem;
        height: 1.2rem;
    }
    @media only screen and (max-width: 992px) {
        .status{
            width: 50%
        }
      }
    @media only screen and (max-width: 768px) {
        .status{
            width: 100%
        }
    }
    @media only screen and (max-width: 400px) {
        .statusrow{
            font-size: 0.8rem;
            height:1rem;
        }
    }

/* progress.php */
    .chart-area{
        background-color: #151515;
    }

/* blog.php */
    .blogback{
        background-color: white;
        padding: 10px;
    }
    .blogback p{
        padding-left:20px;
    }
    .blogtag{
        display: flex;
        align-items: flex-start;
        gap: 10px;

    }

/* main-update.php */
    .container-edit{
        display:flex;
        justify-content: space-between;
    }
    .row-edit{
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 1rem;
        width: 15%;

    }
    .grid-card{
        background-color: #ccc;
    }
    .grid-card p{
        padding:3px;
    }