163 lines
2.9 KiB
CSS
163 lines
2.9 KiB
CSS
/*
|
|
* Prefixed by https://autoprefixer.github.io
|
|
* PostCSS: v8.4.14,
|
|
* Autoprefixer: v10.4.7
|
|
* Browsers: last 400 version
|
|
*/
|
|
|
|
.error404 {
|
|
background-image: url('/img/404-image.jpg');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
background-color: #007000;
|
|
padding: 5em 3em;
|
|
font-size: 16px;
|
|
-webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
|
|
-moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.error404 p a {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.error404 p a:hover {
|
|
color: #00ff00;
|
|
}
|
|
|
|
.error-inner {
|
|
font-size: 1.25em;
|
|
width: 100%;
|
|
max-width: 1600px;
|
|
margin: auto;
|
|
}
|
|
|
|
.error-inner h1 {
|
|
font-size: 2.75em;
|
|
margin: 0;
|
|
}
|
|
|
|
.error-button-container {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.error-link-container {
|
|
width: 100%;
|
|
max-width: 1440px;
|
|
margin: auto;
|
|
padding-bottom: 1.5em;
|
|
}
|
|
|
|
.error-link-container h2 {
|
|
font-size: 2.5em;
|
|
margin: 0.5em;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.error-link-column-container {
|
|
width: 25%;
|
|
float: left;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.error-link-column {
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
.error-link-column h3 {
|
|
font-size: 1.75em;
|
|
}
|
|
|
|
.error-link-column h4 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.error-link-column h5 {
|
|
font-size: 1.17em;
|
|
}
|
|
|
|
.error-link-clearfix {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/*CSS hacks for Webp support check*/
|
|
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
|
|
@supports (background-image: -webkit-image-set(url('/img/hero-image.webp') 1x)) {
|
|
.error404 {
|
|
background-image: url('/img/404-image.webp');
|
|
}
|
|
}
|
|
}
|
|
|
|
@supports (flex-basis: max-content) {
|
|
.error404 {
|
|
background-image: url('/img/404-image.webp');
|
|
}
|
|
}
|
|
|
|
@supports selector(:nth-child) {
|
|
.error404 {
|
|
background-image: url('/img/404-image.webp');
|
|
}
|
|
}
|
|
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
.dummy {}
|
|
|
|
.error404 {
|
|
-webkit-box-shadow: 0 3px 6px 0 rgba(127, 127, 127, 0.2);
|
|
-moz-box-shadow: 0 3px 6px 0 rgba(127, 127, 127, 0.2);
|
|
box-shadow: 0 3px 6px 0 rgba(127, 127, 127, 0.2);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1000px) {
|
|
.error404 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 890px) {
|
|
.error-link-column-container {
|
|
width: 50%;
|
|
}
|
|
|
|
.error-link-clearfix-halfway {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 640px) {
|
|
.error404 {
|
|
padding: 2.5em 1.5em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
.error-inner {
|
|
font-size: 1.125em;
|
|
}
|
|
|
|
.error-inner h1 {
|
|
font-size: 2.5em;
|
|
}
|
|
|
|
.error-link-column-container {
|
|
width: 100%;
|
|
float: none;
|
|
}
|
|
|
|
.error-link-clearfix-halfway, .error-link-clearfix {
|
|
display: none;
|
|
}
|
|
}
|