﻿
.error-grid-cont 
{
    display:            flex;
    justify-content:    center;
    align-items:        center;
    width:              100vw;
    height:             100vh;
}

.error-grid 
{
    display:            grid;
    grid-row-gap:       5px;
    width:              clamp(600px, 80%, 800px);
    padding:            30px;
    border:             1px solid #e0e0e0;
    border-radius:      2px;
    background-color:   #fcfcfc;
    grid-template-rows: 100px 150px 50px;
}

.error-grid-header 
{
    border:             1px solid #e0e0e0;
    border-radius:      2px;
    background-color:   #fff;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          36px;
    letter-spacing:     1px;
}

.error-grid-content 
{
    border:             1px solid #e0e0e0;
    border-radius:      2px;
    background-color:   #fff;
}

.error-grid-content-text 
{
    padding:            10px;
    letter-spacing:     1px;
    line-height:        20px;
}

.error-grid-footer 
{
    border:             1px solid #e0e0e0;
    border-radius:      2px;
    background-color:   #fff;
    display:            flex;
    justify-content:    center;
    align-items:        center;
}

@media screen and (min-width:375px) 
{
    body 
    {
        font-size: 11px;
    }

    .error-grid-header 
    {
        font-size: 18px;
    }
}

@media screen and (min-width:430px) 
{
    body 
    {
        font-size: 12px;
    }

    .error-grid-header 
    {
        font-size: 22px;
    }
    
}


@media screen and (min-width:768px) 
{
    body 
    {
        font-size: 12px;
    }

    .error-grid-header 
    {
        font-size: 22px;
    }
}

@media screen and (min-width:1200px) 
{
    body 
    {
        font-size: 14px;
    }

    .error-grid-header 
    {
        font-size: 28px;
    }
}