/* 22Jun2025 revamp */

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/*header*/
.headerdiv		{width: 100%; float: left; height: auto; background-color: FireBrick; color: white;}
.pctitle		{font-family: "Arial Black", sans-serif; font-size: 3vw; font-weight: bold; text-align: center;}

.grid-container {
    display: grid;
    gap: 10px;
    background-color: lavender;
    padding: 10px;   
}

.grid-container > div {
    border: 1px solid black;
    text-align: center;
}

#grid-container-1 {
    grid-template-columns: 300px 2fr repeat(2, 1fr);
}

#grid-container-2 {
    grid-template-columns: 2fr 300px repeat(2, 1fr);
}

#grid-container-3 {
    grid-template-columns: 1fr 2fr 1fr 300px;
}

.grid-item {
    text-align: center;
    background-color: white;
    font-size: 1vw;
}

#grid-item-1 {
    grid-area: 1 / 1 / 2 / 2;
}

#grid-item-2 {
    grid-area: 1 / 2 / 2 / 3;
    font-size: calc(10px + 1.3vw);
}

#grid-item-3 {
    grid-area: 1 / 3 / 2 / 4;
}

#grid-item-4 {
    grid-area: 1 / 4 / 2 / 5;
}

#grid-item-5 {
    grid-area: 1 / 1 / 2 / 2;
    font-size: calc(10px + 1.2vw);
}

#grid-item-6 {
    grid-area: 1 / 2 / 2 / 3;
    font-size: calc(8px + 1vw);
}

#grid-item-7 {
    grid-area: 1 / 3 / 2 / 4;
    font-size: calc(8px + 0.8vw);
}

#grid-item-8 {
    grid-area: 1 / 4 / 2 / 5;
    font-size: calc(8px + 0.8vw);
}

#grid-item-9 { 
    grid-area: 1 / 1 / 2 / 2;
    font-size: calc(8px + 0.6vw);
    
}

#grid-item-10 { 
    grid-area: 1 / 2 / 2 / 3;
    font-size: calc(8px + 1vw);
}

#grid-item-11 {
    grid-area: 1 / 3 / 2 / 4;
    font-size: calc(6px + 0.8vw);
    color: firebrick;
}

#grid-item-12 { /* old web version log-in */
    grid-area: 1 / 4 / 2 / 5;
    
    font-size: small;
}

@media only screen and (max-width: 600px) {
    #grid-item-1 {grid-area: 1 / 1 / span 1 / span 4;}
    #grid-item-2 {grid-area: 2 / 1 / span 1 / span 4;}
    #grid-item-3 {grid-area: 3 / 1 / span 1 / span 4;}
    #grid-item-4 {grid-area: 4 / 1 / span 1 / span 4;}
    #grid-item-5 {grid-area: 5 / 1 / span 1 / span 4;}
    #grid-item-6 {grid-area: 6 / 1 / span 1 / span 4;}
    #grid-item-7 {grid-area: 7 / 1 / span 1 / span 4;}
    #grid-item-8 {grid-area: 8 / 1 / span 1 / span 4;}
    #grid-item-9 {grid-area: 9 / 1 / span 1 / span 4;}
    #grid-item-10 {grid-area: 10 / 1 / span 1 / span 4;}
    #grid-item-11 {grid-area: 11 / 1 / span 1 / span 4;}
    #grid-item-12 {grid-area: 12 / 1 / span 1 / span 4;}
}

img {
    max-width: 100%;
    height: auto;
}

div	{width: 100%; }

p {margin: 0; margin-top: 4px;}