html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        body {
            background: linear-gradient(180deg, #001f40 0%, #002d5a 100%);
            color: #ffffff;
            font-family: "Inter", sans-serif;
            font-size: 3.2em;
            font-weight: 100;
        }

        .center-container {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .centered-text {
            white-space: nowrap;
            animation: pulsate 4.8s ease-out infinite;
        }

        @keyframes pulsate {
            0%{
                opacity: 0.4;;
            }
            50%{
                opacity: 1.0;;
            }
            100%{
                opacity: 0.4;;
            }
        }
        ul li:not(:first-child) {
            padding-top: 6px;
        }

        /*modals*/
.modal{
    color: #002d5a;
    font-size: 0.28em;
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    transition: 250ms ease-in-out;
    border: 0.5px solid var(--dark-gray);
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 680px;
    max-width: 80%;
    max-height: 90%;
    overflow: scroll;
}

.modal.active{
    transform: translate(-50%,-50%) scale(1);
}

.modal-header{
    padding: 10px 15px 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid var(--accent-color);
}

.modal-title{
    font-weight: 700;
}

.modal-body{
    padding: 4px 25px 20px 10px;
    font-weight: 300;
}

.modal-heading{
    font-weight: 600;
}

.close-button{
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    font-size: 1.75rem;
    font-weight: bold;
}

#overlay{
    position:fixed;
    transition: 250ms ease-in-out;
    opacity: 0;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.65);
    pointer-events: none;
}

#overlay.active{
    pointer-events: all;
    opacity: 1;
}

img#qr{
    max-height: 180px;
  display: block;
}