:root {
--navy-green: #004d35;
--blend-a: #f9f3df;
--blend-b: #c1f8cf;
--blend-c: #4fd3c4;
--dark-blend-a: #03a65a;
--dark-blend-b: #488fb1;
--dark-blend-c: #533e85;
--bright-green: #00ffaf;
--light-green: #d4ffef;
--navy-blue: #0100e4;
--bright-blue: #004ce1;
--light-blue: #85d2fe;
--soft-blue: #eaf5f9;
--midnight-blue: #0a0d29;
--grey-blue: #0a2129;
--just-grey: #333333;
--light-grey: #afbcba;
--yellow: #f9d401;
--orange: #e47447;
--white: #ffffff;
--black: #000000;
--smoothy: smooth;
--font: "Commissioner", sans-serif;
--x: 0px;
--y: 0px;
--offset: 0px;
--p: 0px;
}
body {
max-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
font-family: var(--font);
background: var(--grey-blue);
}
@media (-webkit-device-pixel-ratio: 1.25) {
section,
header,
footer {
zoom: 0.8;
}
}
html,
body,
main {
overscroll-behavior-x: none;
}
/* Background classes */
.bg-grey-blue {
background: var(--grey-blue);
}
.None {
font-size: inherit;
font-weight: inherit;
}
/* Color classes */
.color-white {
color: var(--white);
}
.italic {
font-style: italic;
}
/* Compiled NotFound styles */
.not-found-root {
width: 100vw;
height: calc(100vh - 140px);
overflow: hidden;
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
align-content: center;
}
.not-found-root .t404 {
display: flex;
width: 1280px;
align-self: center;
flex-direction: row;
}
.not-found-root .t404 .not-found {
position: absolute;
bottom: -140px;
right: 0;
font-weight: 100;
font-size: 700px;
}
.not-found-root .message {
margin-right: 26px;
justify-self: flex-start;
}
.not-found-root .message .back-home {
margin-top: 40px;
width: max-content;
}
.not-found-root .message .back-home .back-home-btn {
background-image: url('data:image/svg+xml;utf8,');
width: 180px;
aspect-ratio: 1/1;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border: none;
}
.not-found-root .message .back-home .back-home-btn:hover {
background-image: url('data:image/svg+xml;utf8,');
}
/* Button styling */
.not-found-root .t404 .message .btn-box {
position: relative;
z-index: 100;
}
.btn-joint {
transition: all 0.75s ease-out;
}
/* Responsive breakpoints */
@media screen and (min-width: 1201px) and (-webkit-device-pixel-ratio: 1.25) {
.not-found-root {
width: 125vw;
height: calc(125vh - 140px);
}
.not-found-root .t404 .not-found {
font-size: 700px !important;
}
}
@media screen and (max-width: 1536px) and (min-width: 1201px) {
.not-found-root .t404 .not-found {
font-size: 600px;
}
}
@media screen and (max-width: 1200px) and (min-width: 480px) {
.not-found-root {
height: calc(100vh - 80px);
}
.not-found-root .message {
align-self: flex-end;
margin-left: 64px;
margin-bottom: 60px;
}
.not-found-root .message .back-home {
margin-top: 32px;
}
.not-found-root .message .back-home .back-home-btn {
width: 100px;
}
.not-found-root .t404 {
flex: 1;
justify-content: space-between;
position: relative;
width: 100%;
}
.not-found-root .t404 .not-found {
right: 0;
top: 65px;
position: absolute;
font-weight: 200;
font-size: 300px;
line-height: 70%;
writing-mode: vertical-rl;
transform: rotate(180deg);
bottom: unset;
}
}
@media screen and (max-width: 1200px) and (min-width: 480px) and (orientation: portrait) {
.not-found-root .t404 .not-found {
font-size: 500px;
}
}
@media screen and (max-width: 1229px) and (min-width: 960px) and (-webkit-device-pixel-ratio: 1.25) {
.not-found-root {
width: 125vw;
height: calc(125vh - 140px);
}
.not-found-root .message {
align-self: unset;
justify-self: flex-start;
margin-left: unset;
margin-bottom: unset;
margin-right: 26px;
}
.not-found-root .message .back-home {
margin-top: 40px;
width: max-content;
}
.not-found-root .message .back-home .back-home-btn {
width: 180px;
}
.not-found-root .t404 {
flex: unset;
justify-content: unset;
flex-direction: row;
position: unset;
align-self: center;
width: 1280px;
}
.not-found-root .t404 .not-found {
right: 0;
top: unset;
bottom: -140px;
font-weight: 100;
font-size: 600px;
line-height: unset;
writing-mode: unset;
transform: unset;
}
}
@media (max-width: 480px) {
.not-found-root {
height: calc(100vh - 80px);
justify-content: flex-end;
}
.not-found-root .t404 {
flex-direction: column;
width: unset;
align-items: flex-end;
justify-content: flex-end;
margin-bottom: -24px;
position: relative;
}
.not-found-root .t404 .message {
align-self: flex-start;
margin: 0 32px 340px;
}
.not-found-root .t404 .message .back-home {
margin-top: 60px;
}
.not-found-root .t404 .message .back-home .back-home-btn {
width: 100px;
}
.not-found-root .t404 .not-found {
position: absolute;
right: 0;
bottom: -24px;
font-weight: 200;
font-size: 250px;
line-height: 70%;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
}