*{
    text-align: left;
    vertical-align: middle;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    user-select: none;
}
*::-webkit-scrollbar {
    display: none;
  }
.material-icons-outlined, .material-symbols-outlined{
    font-family: 'Material Icons';
    width: min-content;
    margin: 0;
    padding: 0;
}
body {
    background-color: teal;
    height: 100%;
    margin: 0;
}
/* Home */
.hidden{
    font-family: 'Flow Circular', cursive;
    padding: 0 10px;
}
.home{
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
}

    .column{
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: wrap;
        width:max-content;
        max-width: calc(100vw / 3);
        min-width: 404.5px;
    }
    .wide{
        min-width: 410px;
        /* width: max-content; */
        max-width:calc(100vw - 825px);
    }
            .clock .clock-h, .clock .clock-m{
                font-size:75px;
                font-weight: bold;
                vertical-align: baseline;
            }
            .clock .clock-s{
                font-size: 50px;
                font-weight: bold;
                vertical-align: baseline;
            }
            .clock .date{
                font-size: 25px;
            }
        .weather{
            display:flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-size: 15px;
        }
            .weather .icon{
                height: 100px;
                filter: drop-shadow(0 0 2px black);
                transform: translate(-10px);
            }
        .alerts{
            display:flex;
            flex-direction: row;
            justify-content:flex-start;
            align-items: center;
        }
        .alerts span{
            font-size: 80px;
            padding-right: 20px;
        }
        .alert{
            font-size: 17.5px;
        }
            .alerts .alert b{
                font-size: 27.5px;
            }

            .stats-container{
                display:flex;
                flex-direction: row;
                justify-content:space-between;
                align-items: center;
                width: 100%;
            }

            .source{
                padding: 10px;
            }
            .stats .title{
                font-size:25px;
            }


            
            .statuses .title{
                font-size:25px;
            }
            .statuses .title  .icon{
                font-size: 30px;
                vertical-align: text-bottom;
                padding-left: 5px;
            }
            .status{
                display:flex;
                flex-direction: row;
                justify-content:flex-start;
                align-items: center;
                padding: 10px 0;
            }
            .status span{
                font-size:40px;
                padding:10px;
                padding-left:0;
            }
            .status .name{
                font-size:22px;
                vertical-align: bottom;
            }
            .status .title{
                font-size:22px;
                vertical-align: bottom;
            }
            .status .about{
                max-width:calc(100vw - calc(calc(100vw / 3) / 2));
            }
            .status .about .description{
                line-break: auto;
            }
            .netdata .data{
                font-size:15px;
                width: 90px;
            }
            .donates .title{
                font-size:25px;
                margin-bottom: 10px;
                font-weight: bold;
            }
            .donates .title  .icon{
                font-size: 30px;
                vertical-align: text-bottom;
                padding-left: 5px;
            }
            .donates .donation{
                font-size:20px;
                display:flex;
                flex-direction: row;
                justify-content:space-between;
                align-items: center;
                padding: 5px 0;
            }
                .donates .donation .donator{
                    font-weight: bold;
                }
                .donates .donation .amount{
                    padding-left:10px;
                }


            .telemetry .title{
                font-size:25px;
                font-weight: bold;
            }
            .telemetry .title .icon{
                font-size: 30px;
                vertical-align: text-bottom;
                padding-left: 5px;
            }
                .metric{
                    font-size:20px;
                    height: 40px;
                    display:flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    margin: 10px 0px;
                }
                    .metric .icon{
                        font-size:30px;
                    }
                    .arrow{
                        font-size:15px;
                        vertical-align: middle;
                        padding-right: 5px;
                    }
                    .graph{
                        display:flex;
                        flex-direction: row-reverse;
                        justify-content: flex-end;
                        align-items: flex-end;
                        height: 40px;
                        overflow:hidden;
                        width: 150px;
                        margin: 0 10px;
                        margin-right: 0;
                        transition-duration: 0.1s;
                        scroll-behavior: smooth;
                        border: 1px solid #009688;
                        box-shadow: inset 0px -1px 1px 0px #009688;
                        border-radius: 10px;
                    }
                    .graph .point{
                        background-color: #009688;
                        color:white;
                        font-size: 10px;
                        color: transparent;
                        box-shadow: 0px 0px 1px 0px #009688;
                        width: 10px;
                    }

.card{
    box-shadow: 10px 10px 0px 0px black;
    border-radius: 10px;
    background-color: white;
    margin: 25px 25px;
    padding:15px 30px;
}

@media only screen and (max-width: 500px) {
    .home {
        flex-direction: column;
    }
    .column, .wide{
        min-width: 100vw;
        width: 100vw;
        max-width: 100vw;
    }
    .weather .icon{
        height: 75px;
        filter: drop-shadow(0 0 2px black);
        transform: translate(-10px);
    }
    .card{
        padding: 10px 15px;
    }
}