html, body {
    height: 100vh;  /* standard definition (as fallback) */
    height: 100dvh; /* dynamic vh will make the trick on iOS */
}

.loader {
    width: 4px;
    color: #fff;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 
        19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 0px,
        19px 0     0 5px, 38px 0     0 5px, 57px 0     0 5px,
        19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 0px;
    transform: translateX(-38px);
    animation: l26 2s infinite linear;
}
@keyframes l26 {
    12.5% {box-shadow: 
        19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 5px,
        19px 0     0 5px, 38px 0     0 0px, 57px 0     0 5px,
        19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 0px}
    25%   {box-shadow: 
        19px -19px 0 5px, 38px -19px 0 0px, 57px -19px 0 5px,
        19px 0     0 0px, 38px 0     0 0px, 57px 0     0 0px,
        19px 19px  0 0px, 38px 19px  0 5px, 57px 19px  0 0px}
    50%   {box-shadow: 
        19px -19px 0 5px, 38px -19px 0 5px, 57px -19px 0 0px,
        19px 0     0 0px, 38px 0     0 0px, 57px 0     0 0px,
        19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 5px}
    62.5% {box-shadow: 
        19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 0px,
        19px 0     0 5px, 38px 0     0 0px, 57px 0     0 0px,
        19px 19px  0 0px, 38px 19px  0 5px, 57px 19px  0 5px}
    75%   {box-shadow: 
        19px -19px 0 0px, 38px -19px 0 5px, 57px -19px 0 0px,
        19px 0     0 0px, 38px 0     0 0px, 57px 0     0 5px,
        19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 5px}
    87.5% {box-shadow: 
        19px -19px 0 0px, 38px -19px 0 5px, 57px -19px 0 0px,
        19px 0     0 0px, 38px 0     0 5px, 57px 0     0 0px,
        19px 19px  0 5px, 38px 19px  0 0px, 57px 19px  0 0px}
}

/* Message effects */

@keyframes blink {
    50% {
        opacity: 0.0;
    }
}
.effect-blink {
    animation: blink 1s step-start 0s infinite;
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.effect-fade {
    animation: fade 1s linear 0s infinite;
}

.tech-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}
@media (max-width: 768px) {
    .tech-message {
        height: 18vh; /* Adjust this value as needed */
        height: 18dvh; /* iOS fallback (i hate webkit) */
    }
}
.tech-message h1 {
    /* Bigger than h1 */
    /* This could be on a wide range of devices, from small phones, to tablets, to entire TV screens */
    /* So we need to make sure it's big enough to be readable on all of them */
    font-size: 3rem;
}
.director-messages {
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
}
@media (max-width: 768px) {
    .director-messages {
        height: 82vh; /* Adjust this value as needed */
        height: 82dvh; /* iOS fallback (i hate webkit) */
    }
}
.director-image {
    width: 100%;
    max-width: 3.5rem;
    height: auto;
}
.director-info {
    display: flex;
    align-items: center;
}
.director-name {
    margin-left: 1rem;
}
.director-messages .card {
    margin-bottom: 1rem;
}
.director-messages .card:first-child {
    margin-top: 1rem;
}
/* .director-messages .card.text-bg-danger .btn.btn-danger {
    Make the button color a little darker since the background is the same color
    --bs-btn-bg: #c00e20;
} */