/*  ============= WEB BROWSER RESETS ============ */
* { margin: 0; padding: 0; border: none }
*, *::before, *::after { box-sizing: border-box }
html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline;
scroll-behavior: smooth; scroll-padding-top: 20px }
body { line-height: 1.5; min-height: 100vh }
img { width: 100%; height: auto; display: block }
input, button, textarea, select { font: inherit }
@media (max-width: 767px ) { body { text-rendering: optimizeSpeed } }
@media (min-width: 768px ) { body { text-rendering: optimizeLegibility } }

/* ============ CUSTOM PROPERTIES ============  */

:root {
/* Fluid font sizes */
    --fs-sm: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
    --fs-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
    --fs-md: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
    --fs-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
    --fs-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
    --fs-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
    --fs-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);

}


body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f9fafc; 
    color: #1a202c
}

header { 
    background-color: blue; 
    color: white;
    padding: 20px; 
    text-align: center; 
    margin-left:auto; margin-right:auto; width: 100%;
}

/* Padding around content */
@media (min-width: 1025px) { header { padding: 2% 24% } }
@media (min-width: 768px) and (max-width: 1024px) { header { padding: 5% 20% } }
@media (max-width: 767px) { header { padding: 32px 9% 32px 9% } }

.data-output { 
    background-color: #d4eee6;
    margin: 0 auto; 
}

.data-output div { 
    border-bottom: 1px solid #000; 
    padding: 20px 20px 20px 0; 
    text-align: left; 
}

.data-output div:last-child { border-bottom: none }


.data-output div p { 
    font-size: var(--fs-base);
}

.active-user, .inactive-user { 
    padding: 1px 10px; border-radius: 6px; color: white; 
    font-weight: bold; display: inline-block; 
    font-size: var(--fs-sm);
    margin-left: 20px;
}

.active-user { background-color: green }
.inactive-user { background-color: red }

@media (min-width: 1025px) { .data-output { padding: 2% 16% 2% 16% } }
@media (min-width: 768px) and (max-width: 1024px) { .data-output { padding: 5% 12% } }
@media (max-width: 767px) { .data-output { padding: 32px 9% 32px 9% } }

.totals-output { 
    background-color: lightblue;
    margin: 0 auto; 
    padding: 20px 20px 20px 0; 
    text-align: center; 
}

.totals-output p { 
    font-size: var(--fs-base);

}