/* =====================================================
   NBCSC Webcam & Weather
   style.css
   ===================================================== */


* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        linear-gradient(
            180deg,
            #06243b,
            #03121f
        );

    color: #e8f4ff;

    min-height: 100vh;

}



header {

    text-align: center;

    padding: 25px 10px;

    background:
        rgba(0,0,0,0.25);

    border-bottom:
        1px solid rgba(255,255,255,0.15);

}


header h1 {

    margin: 0;

    font-size: 2.2rem;

}


header p {

    margin-top: 8px;

    opacity: 0.8;

}



main {

    width: 95%;

    max-width: 1400px;

    margin: 25px auto;

}



.top-grid {

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr;

    gap: 20px;

}



.grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 20px;

    margin-top: 20px;

}




.card {

    background:

        rgba(255,255,255,0.08);


    border:

        1px solid rgba(255,255,255,0.15);


    border-radius:

        18px;


    padding:

        20px;


    box-shadow:

        0 8px 25px rgba(0,0,0,0.35);


    backdrop-filter:

        blur(8px);

}



.card h2 {

    margin-top: 0;

    color: #9fdcff;

    font-size: 1.25rem;

}




.reading {

    display:

        flex;


    justify-content:

        space-between;


    padding:

        9px 0;


    border-bottom:

        1px solid rgba(255,255,255,0.1);

}



.reading span {

    opacity:0.85;

}


.reading strong {

    color:#ffffff;

}



.updated {

    margin-top:20px;

    font-size:0.85rem;

    opacity:0.75;

}




.webcam {

    min-height:450px;

}




.temperature-grid {


    display:grid;


    grid-template-columns:

        repeat(5,1fr);


    gap:15px;


    text-align:center;

}



.temperature-grid div {


    background:

        rgba(255,255,255,0.08);


    padding:

        15px;


    border-radius:

        12px;

}



.temperature-grid h3 {


    font-size:0.9rem;

    color:#9fdcff;

}



.temperature-grid p {


    font-size:1.4rem;

    margin:5px;

}





a {


    color:#8fdcff;

    text-decoration:none;

}



a:hover {


    text-decoration:underline;

}



.timelapse {


    text-align:center;

    min-height:700px;

}



footer {


    text-align:center;


    padding:25px;


    opacity:0.7;


    font-size:0.9rem;

}





/* -------------------------------
   Tablet layout
   ------------------------------- */


@media(max-width:1000px) {


    .top-grid {


        grid-template-columns:

            1fr;

    }


    .grid {


        grid-template-columns:

            1fr;

    }


    .temperature-grid {


        grid-template-columns:

            repeat(2,1fr);

    }


}





/* -------------------------------
   Phone layout
   ------------------------------- */


@media(max-width:600px) {


    header h1 {


        font-size:1.6rem;

    }


    .temperature-grid {


        grid-template-columns:

            1fr;

    }


}