.danger{

background:linear-gradient(135deg,#dc3545,#ff4d4d);

animation:blink 1s infinite;

color:white;

}

@keyframes blink{

0%{
opacity:1;
}

50%{
opacity:.4;
}

100%{
opacity:1;
}

}


/* ===========================
   GENERAL
=========================== */

body{
    background:#eef5fb;
    font-family:'Segoe UI',sans-serif;
    overflow-x:hidden;
}

.container{
    max-width:1200px;
}

/* ===========================
   HEADER
=========================== */

.header{

    background:linear-gradient(135deg,#0d6efd,#00bcd4);

    color:white;

    padding:40px 20px;

    text-align:center;

    box-shadow:0 5px 20px rgba(0,0,0,.2);

}

.header h1{

    font-size:38px;

    font-weight:bold;

}

.subtitle{

    font-size:18px;

    margin-top:10px;

}

.developers{

    margin-top:20px;

    background:rgba(255,255,255,.2);

    padding:15px;

    border-radius:15px;

    display:inline-block;

}

.developers h5{

    margin-bottom:10px;

    font-weight:bold;

}

.developers p{

    margin:0;

    font-size:16px;

}

/* ===========================
   SENSOR CARDS
=========================== */

.sensor-card{

    border-radius:20px;

    color:white;

    padding:30px;

    text-align:center;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    transition:.3s;

    height:100%;

}

.sensor-card:hover{

    transform:translateY(-5px);

}

.temperature{

    background:linear-gradient(135deg,#ff512f,#dd2476);

}

.humidity{

    background:linear-gradient(135deg,#36d1dc,#5b86e5);

}

.prediction{

    background:linear-gradient(135deg,#11998e,#38ef7d);

}

.sensor-card .icon{

    font-size:50px;

    margin-bottom:15px;

}

.sensor-card h1{

    font-size:45px;

    font-weight:bold;

}

/* ===========================
   CARD
=========================== */

.card{

    border:none;

    border-radius:18px;

    box-shadow:0 6px 15px rgba(0,0,0,.1);

}

/* ===========================
   TABLE
=========================== */

.table{

    min-width:650px;

}

/* ===========================
   CHART
=========================== */

canvas{

    width:100% !important;

    height:350px !important;

}

/* ===========================
   FOOTER
=========================== */

.footer{

    text-align:center;

    padding:25px;

    color:#666;

}

.footer h5{

    font-weight:bold;

}

/* ===========================
   MOBILE RESPONSIVE
=========================== */

@media(max-width:992px){

.header h1{

font-size:30px;

}

.sensor-card{

padding:25px;

}

.sensor-card h1{

font-size:36px;

}

}

@media(max-width:768px){

.header{

padding:30px 15px;

}

.header h1{

font-size:26px;

}

.subtitle{

font-size:15px;

}

.developers{

width:100%;

}

.developers p{

font-size:14px;

}

.sensor-card{

margin-bottom:15px;

}

.sensor-card h1{

font-size:30px;

}

.sensor-card .icon{

font-size:35px;

}

.card-header h5{

font-size:18px;

}

canvas{

height:250px !important;

}

.table{

font-size:13px;

}

.btn{

width:100%;

margin-top:10px;

}

}

@media(max-width:480px){

.header h1{

font-size:22px;

}

.subtitle{

font-size:14px;

}

.sensor-card{

padding:20px;

}

.sensor-card h1{

font-size:26px;

}

.sensor-card h5{

font-size:18px;

}

.footer{

font-size:14px;

}

}