*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    height:100%;
}

body{
    font-family:'Open Sans',sans-serif;
    background:#f7f7f7;
}

.container{
    display:flex;
    min-height:100vh;
}

/* LEFT SIDE */

.sidebar{
    width:430px;
    background:#384552;
    position:relative;
}

.sidebar img{
    position:absolute;
    top:55px;
    left:50%;
    transform:translateX(-50%);
    width:200px;
    height:auto;
}

/* RIGHT SIDE */

.content{
    flex:1;
    padding-top:65px;
    padding-left:48px;
    padding-right:40px;
}

.server-error{
    font-size:18px;
    color:#333;
    font-weight:400;
    margin-bottom:5px;
}

.error-code{
    font-size:78px;
    line-height:78px;
    font-weight:300;
    color:#f07b52;
}

h1{
    font-size:34px;
    font-weight:400;
    color:#333;
    line-height:1.15;
    margin-bottom:12px;
}

.description{
    max-width:760px;
    font-size:14px;
    line-height:1.7;
    color:#444;
}

hr{
    margin-top:20px;
    margin-bottom:20px;
    border:none;
    border-top:1px solid #dddddd;
}

.help-title{
    font-size:13px;
    color:#333;
    margin-bottom:14px;
}

.buttons{
    display:flex;
    gap:8px;
}

.buttons a{
    text-decoration:none;
    color:#1992f3;
    border:1px solid #1992f3;
    background:#fff;
    padding:8px 14px;
    font-size:12px;
    transition:.2s;
}

.buttons a:hover{
    background:#1992f3;
    color:#fff;
}

/* MOBILE */

@media(max-width:768px){

    .container{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        height:350px;
    }

    .sidebar img{
        width:200px;
        top:40px;
    }

    .content{
        padding:30px;
    }

    h1{
        font-size:28px;
    }

    .error-code{
        font-size:70px;
    }

    .buttons{
        flex-wrap:wrap;
    }
}