@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap');

    *{margin:0; padding:0}
    body,html{
        font: 15px / 1.5em 'Roboto', sans-serif; font-weight: 300;
    }

    h1{font-family: 'Roboto'; font-weight: 700; line-height: 1.2em}


    h2{padding:1em 0 0; line-height: 1.2em}
    p{padding: 0.5em 0 1em}


    .header{
        display:grid;
        grid-template-columns: 48px 1fr;
        justify-content: flex-end;
        padding: 0 45px
    }

    .header .logo{
        background: url(images/fav-icon-white.png) center center no-repeat;
        background-size:32px;
        width: 28px;
        height: 52px;
    }

    .header ul{
        list-style: none;
        display: grid;
        grid-template-columns: repeat( auto-fit, 128px);
        justify-content: flex-end
    }

    .header ul li a{
        display: block;
        padding: 15px;
        text-align: center;
        text-decoration: none;
        color: #fff
    }


    .footer{padding:15px;  text-align: center; color: #fff; font-size: 90%}


    .bg-primary{background:#ff4952}
    .bg-light{background:#ff4952}
    .bg-accent{background: #661723}
    .bg-dark{background:#212534}

    .container{max-width: 1280px; margin: 0 auto; min-height: calc(100vh - 104px)}
    .constraint-padding{padding:90px 45px}


    .status-grid{
        margin: 0 auto 45px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 15px
    }

    .status-grid-item{
        display: grid;
        grid-template-columns: 36px 1fr 100px 21px;
        column-gap: 10px;
        align-items: center;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding: 15px;
    }


    .status-indicator{width: 21px; height: 21px; border-radius: 50%; background: grey}

    .online .status-indicator{background: #2ecc71}
    .offline .status-indicator{background: #e74c3c}

    .font-icon{width: 32px; height: 32px; border: 2px solid #ff4952; border-radius: 50%; position: relative}
    .font-icon i{color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 15px}

    @media screen and (max-width : 1024px){

        body{font-size: 14px}

        .header{
            grid-template-columns: 1fr;
            justify-content: center
        }
        .header .logo{margin: 0 auto}
        
        .header nav{display: none}

        .header{padding: 0 5%}
        .constraint-padding{padding: 90px 5%}

        .status-grid{
            grid-template-columns: none;
            font-size: 13px;
            line-height: 1.2em;
            display: block
        }

        .status-grid-item{
            padding: 15px 0;
            grid-template-columns: 24px 1fr 60px 21px;
            column-gap: 5px
        }

        .status-grid-item .font-icon{
            width: 20px;
            height: 20px;
        }

        .font-icon i{ font-size: 11px}

    }