:root {
    --glyph-primary: #f5f5f7;
    --glyph-secondary: #6e6e73;

    --fill-primary: #0f0f0f;
    --fill-secondary: #1d1d1f;
    --fill-tertiary: #333336;
    --fill-quaternary: #616163;

    --fill-green: #008000;
    --fill-orange: #F56300;
    --fill-red: #b22222;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0;

    color: var(--glyph-primary);
    background-color: var(--fill-primary);

    font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    letter-spacing: 0.05rem;
    -webkit-font-smoothing: antialiased;
}

p {
    margin: 0;
}

#temp-box {
    position: relative;

    margin-top: 6vw;
    margin-bottom: 12vw;

    padding: 6vw;
    padding-top: 4vw;
    padding-bottom: 4vw;

    border: 0.75vw solid var(--fill-tertiary);
    border-radius: 4vw;

    background-color: var(--fill-secondary);

    font-size: 8vw;
}

#error-box {
    display: none;

    margin-bottom: 3.375rem;

    padding: 3vw;
    padding-top: 2vw;
    padding-bottom: 2vw;

    border: 0.5vw solid #b2222230;
    border-radius: 2.5vw;

    background-color: #b2222230;

    font-size: 2.5vw;
}

#temp {
    padding-top: 2vw;
    font-size: 10vw;
    font-family: ui-monospace, system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#status {
    margin: 2vw;
    width: 3.5vw;
    height: 3.5vw;
    border-radius: 1.75vw;
    background-color: var(--fill-tertiary);
    position: absolute;
    bottom: 0;
    right: 0;
}

#tooltip {
    display: none;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;

    border-top: 1px solid var(--fill-tertiary);

    font-size: 0.66rem;
    color: var(--glyph-secondary);
    background-color: var(--fill-secondary);
}

/* MOBILE LANDSCAPE */
@media all and (max-device-width: 800px) and (orientation: landscape) {
    #temp-box {
        margin-top: 9vh;

        padding: 9vh;
        padding-top: 6vh;
        padding-bottom: 6vh;

        border: 1.125vh solid var(--fill-tertiary);
        border-radius: 6vh;

        font-size: 12vh;
    }

    #error-box {
        padding: 4.5vh;
        padding-top: 3vh;
        padding-bottom: 3vh;

        border: 0.75vh solid #b2222230;
        border-radius: 3.75vh;

        font-size: 3.75vh;
    }
    
    #temp {
        padding-top: 3vh;
        font-size: 15vh;
    }

    #status {
        margin: 3vh;
        width: 5.25vh;
        height: 5.25vh;
        border-radius: 2.625vh;
    }

    #footer {
        padding-bottom: 1rem;
    }
}

/* DESKTOP - WIDE WINDOW */
@media all and (min-device-width: 801px) and (min-width: 794px) {
    #temp-box {
        margin-top: 3rem;
        margin-bottom: 6rem;

        padding: 3rem;
        padding-top: 2rem;
        padding-bottom: 2rem;


        border: 0.25rem solid var(--fill-tertiary);
        border-radius: 2rem;

        font-size: 4rem;
    }

    #error-box {
        padding: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;

        border: 0.25rem solid #b2222230;
        border-radius: 1.25rem;

        font-size: 1.25rem;
    }

    #temp {
        padding-top: 1rem;
        font-size: 5rem;
    }

    #status {
        margin: 1rem;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.75rem;
    }

    #tooltip {
        display: inline-block;
        visibility: hidden;
        width: 8rem;
        background-color: var(--fill-quaternary);
        border-radius: 0.5rem;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;

        font-size: 16px;

        opacity: 0;
        transition: opacity .33s;

        position: absolute;
        bottom: 125%;
        margin-left: -6.5rem;
        z-index: 1;
    }

    #status:hover #tooltip {
        opacity: 1;
        visibility: visible;
    }

    #footer {
        font-size: 0.75rem;
    }
}