shipment-viewer/app/public/style.css

.shipments {
    layout: masonry;
}

/*@media (min-width: 480px) {*/
/*    .shipments {*/
/*        grid-template-columns: 1fr 1fr;*/
/*    }*/
/*}*/

/*@media (min-width: 768px) {*/
/*    .shipments {*/
/*        grid-template-columns: 1fr 1fr 1fr;*/
/*    }*/
/*}*/


.banner img {
    height: 80px;
    position: absolute;
    top: 0px;
    left: 20px;
}
#banner-text {
    position: absolute;
    left: 180px
}

.banner:hover img {
    animation: wave-flag 0.5s linear infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .banner:hover img {
        transition: 0.1875s cubic-bezier(0.375, 0, 0.675, 1) transform;
        transform-origin: top left;
    }
}

@keyframes wave-flag {
    0% {
        transform: rotate(0deg);
        transform-origin: top left;
    }
    100% {
        transform: rotate(-5deg);
        transform-origin: top left;

    }
}

body {
    font-family: 'Phantom Sans', sans-serif !important;
}

body.dark-mode {
    background-color: var(--dark);
    color: var(--snow);
}

body.dark-mode a {
    color: var(--smoke);
}

body.dark-mode .navbar,
body.dark-mode .footer {
    background-color: var(--darkless);
}

body.dark-mode .card {
    background: var(--steel);
    color: var(--smoke);
}

body.dark-mode .navbar-brand {
    color: var(--smoke);
}

body.dark-mode p {
    color: var(--smoke);
}

#dark-mode-toggle {
    position: absolute;
    right: 20px;
    top: 10px;
    background-color: white;
    border: none;
    cursor: pointer;
    size: 1.5em;
}

body.dark-mode #dark-mode-toggle  {
    background-color: var(--dark);
}

#dark-mode-toggle .fa-moon {
    color: var(--steel);
}

body.dark-mode #dark-mode-toggle .fa-moon {
    color: var(--smoke);
}

a:focus,
a:hover {
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
}

.navbar {
    z-index: 42069;
    background-color: var(--sunken);
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

.navbar-brand {
    margin-left: 140px;
    color: black;
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.footer {
    z-index: 42060;
    background-color: var(--sunken);
    position: fixed;
    bottom: 0;
    width: 100%
}

.footer-text {
    margin-left: 15px;
    color: black;
    float: left;
    display: block;
    padding: 14px 16px;
    text-decoration: none;
}

.internal {
    border: 1.5px dashed orange;
    border-radius: var(--radii-extra);
}

span.internal {
    border-radius: 8px;
    padding: 3px 2px;

}

@media (max-width: 768px) {
    .shipments {
      layout: block;
    }
  
    .banner img {
      height: 60px;
      left: 10px;
    }
  
    .navbar-brand {
      margin-left: 0;
      flex-grow: 1;
      text-align: center;
    }
  
    .footer-text {
      padding: 10px;
    }

    .navbar {
      display: flex;
      align-items: center;
    }
  
    .banner {
      flex-shrink: 0;
    }
}

@media (min-width: 769px) {
    .navbar {
        display: block;
    }

    .navbar-brand {
        margin-left: 140px;
        text-align: left;
    }
}