@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
:root {
    --orange: #F16100;
    --blue: #0191F1;
    --trophyColour: #FFD670;
    --importance-1: #ff1100;
    --importance-2: #e35b39;
    --importance-3: #ff7700;
    --importance-4: #ffdd00;
    --importance-5: #73de00;
    --font-base: "Poppins", sans-serif;
    --green: #2ecc71;
    --lightgray: lightgray;
    --background: whitesmoke;

    --critical: #ca0d00;
    --lighterCritical: #de0e00;
    --darkerCritical: #4f0702;
    --priority: #ff5733;
    --darkerPriority: #731806;
    --attention: #f4d300;
    --darkerAttention: #7d6d00;
    --optimal: #02b00a;
    --darkerOptimal: #045107;


    --surviving: #fc1000;
    --darkerSurviving: #d00d00;
    --coping: #f4d300;
    --darkerCoping: #e2c407;
    --thriving: #00e40a;
    --darkerThriving: #00bc08;

    --untappedPotential: #71b8c8;
    --darkerUntappedPotential: #569cac;

}

html,
body {
    height: 100%;
    font-family: var(--font-base);
    color: #818282;
}

h1,
h2,
h4 {
    font-family: var(--font-base);
    font-weight: 600;
}

h3 {
    font-family: var(--font-base);
    font-weight: 100;
    /* Adjust the font-weight as needed */
}

.page-container {
    margin-left: 0;
    text-align: center;
    transform: scale(0.6);
    /* Adjust the scale value as needed */
    /* Stretch horizontally. Values >1 stretch, <1 compress */
    transform-origin: top;
}

button:focus {
    outline: none;
}

input[type="checkbox"], input[type="radio"] {
    width: 30px; height: 30px; margin-right: 12px;
}
.checkbox-group {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
    
    & label {margin-right: auto; }
}
label {
    font-size: larger;
}
.hover-pointer { cursor: pointer; }
.hover-default { cursor: default !important; }
.position-static { position: static; }
.fw-normal { font-weight: normal; }
.hidden { display: none !important; }
.no-bg { background-color: transparent !important; }

@media (max-width: 1024px) { /* make elements go to edge of screen on smaller screens 1024px is approx. landscape tablet size */
    *,
    *::before,
    *::after {
      box-sizing: content-box; 
    }
}