*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{display:flex;flex-direction:column;font-family:'Open Sans',sans-serif;background:url(../images/404.jpg) center center fixed;color:#fff;line-height:1.6}
.container{width:90%;max-width:1200px;margin:0 auto;padding:1rem}
.site-header{padding:2rem 0}
.navigation{display:flex;justify-content:space-between;align-items:center}
.logo a{text-decoration:none;font-size:2rem;font-weight:600;color:#fff}
.nav-menu{list-style:none;display:flex;gap:1.5rem}
.nav-menu a{text-decoration:none;color:#fff;transition:color .3s}
.nav-menu a:hover{color:#DC3522}
.error-page{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem 0}
.error-code{font-size:10rem;letter-spacing:.5rem}
.error-code span{color:#DC3522}
.error-message{font-size:1.5rem;font-weight:700;margin:1rem 0}
.error-description{font-size:1rem;margin-bottom:2rem}
.error-description a{color:#DC3522;transition:color .3s}
.error-description a:hover{color:#fff}
.search-form{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.search-form input[type="text"]{padding:.8rem 1.5rem;border:1px solid #DC3522;border-radius:50px;background:transparent;color:#fff;flex:1;min-width:250px;transition:border-color .3s}
.search-form input[type="text"]::placeholder{color:#fff}
.search-form input[type="text"]:focus{outline:none;border-color:#fff}
.search-form button{padding:.8rem 3rem;border:1px solid #DC3522;border-radius:50px;background:#DC3522;color:#fff;cursor:pointer;transition:background 0.3s,color .3s}
.search-form button:hover{background:transparent;color:#DC3522}
.site-footer{text-align:center;padding:2rem 0}
.site-footer a{color:#fff;transition:color .3s}
.site-footer a:hover{color:#DC3522}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (max-width: 768px) {
.error-code{font-size:6rem;letter-spacing:.2rem}
.logo a{font-size:1.5rem}
.nav-menu{gap:1rem}
}