Sending an ACME HTTP validation request to maintenance.germancoding.com results in unexpected HTTP response 503 Service Temporarily Unavailable. This indicates that the webserver is misconfigured or misbehaving.
503 Service Temporarily Unavailable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<title>Temporary Maintenance</title>
<meta name="description" content="Temporary Maintenance">
<style type="text/css">
html,
body {
height: 80%;
}
body {
display: grid;
width: 95%;
font-family: Inconsolata, monospace;
background-color: black;
}
body div#error {
position: relative;
margin: auto;
padding: 20px;
z-index: 2;
color: white;
}
body div#error div#box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #000;
}
body div#error div#box:before,
body div#error div#box:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 0px 1px #000;
mix-blend-mode: multiply;
animation: dance 2s infinite steps(1);
}
body div#error div#box:before {
clip-path: polygon(0 0, 65% 0, 35% 100%, 0 100%);
box-shadow: inset 0px 0px 0px 1px currentColor;
color: #f0f;
}
body div#error div#box:after {
clip-path: polygon(65% 0, 100% 0, 100% 100%, 35% 100%);
animation-duration: 0.5s;
animation-direction: alternate;
box-shadow: inset 0px 0px 0px 1px currentColor;
color: #0ff;
}
body div#error h3 {
position: relative;
font-size: 5vw;
font-weight: 700;
text-transform: uppercase;
animation: blink 1.3s infinite steps(1);
}
body div#error h3:before,
body div#error h3:after {
content: 'ERROR 503';
position: absolute;
top: -1px;
left: 0;
mix-blend-mode: soft-light;
animation: dance 2s infinite steps(2);
}
body div#error h3:before {
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
color: #f0f;
animation: shiftright 2s steps(2) infinite;
}
body div#error h3:after {
clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
color: #0ff;
animation: shiftleft 2s steps(2) infinite;
}
body div#error p {
position: relative;
margin-bottom: 8px;
}
body div#error p span {
position: relative;
display: inline-block;
font-weight: bold;
color: #fff;
animation: blink 3s steps(1) infinite;
}
body div#error p span:before,
body div#error p span:after {
content: 'maintenance';
position: absolute;
top: -1px;
left: 0;
mix-blend-mode: multiply;
}
body div#error p span:before {
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
color: #f0f;
animation: shiftright 1.5s steps(2) infinite;
}
body div#error p span:after {
clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
color: #0ff;
animation: shiftleft 1.7s steps(2) infinite;
}
@-moz-keyframes dance {
0%, 84%, 94% {
transform: skew(0deg);
}
85% {
transform: skew(5deg);
}
90% {
transform: skew(-5deg);
}
98% {
transform: skew(3deg);
}
}
@-webkit-keyframes dance {
0%, 84%, 94% {
transform: skew(0deg);
}
85% {
transform: skew(5deg);
}
90% {
transform: skew(-5deg);
}
98% {
transform: skew(3deg);
}
}
@-o-keyframes dance {
0%, 84%, 94% {
transform: skew(0deg);
}
85% {
transform: skew(5deg);
}
90% {
transform: skew(-5deg);
}
98% {
transform: skew(3deg);
}
}
@keyframes dance {
0%, 84%, 94% {
transform: skew(0deg);
}
85% {
transform: skew(5deg);
}
90% {
transform: skew(-5deg);
}
98% {
transform: skew(3deg);
}
}
@-moz-keyframes shiftleft {
0%, 87%, 100% {
transform: translate(0, 0) skew(0deg);
}
84%, 90% {
transform: translate(-8px, 0) skew(20deg);
}
}
@-webkit-keyframes shiftleft {
0%, 87%, 100% {
transform: translate(0, 0) skew(0deg);
}
84%, 90% {
transform: translate(-8px, 0) skew(20deg);
}
}
@-o-keyframes shiftleft {
0%, 87%, 100% {
transform: translate(0, 0) skew(0deg);
}
84%, 90% {
transform: translate(-8px, 0) skew(20deg);
}
}
@keyframes shiftleft {
0%, 87%, 100% {
transform: translate(0, 0) skew(0deg);
}
84%, 90% {
transform: translate(-8px, 0) skew(20deg);
}
}
@-moz-keyframes shiftright {
0%, 87%, 100% {
transform: translate(0, 0) skew(0deg);
}
84%, 90% {
transform: translate(8px, 0) skew(20deg);
}
}
@-webkit-keyframes shiftright {
0%, 87%, 100% {
transform: translate(0, 0) skew(0deg);
}
84%, 90% {
transform: translate(8px, 0) skew(20deg);
}
}
@-o-keyframes shiftright {
0%, 87%, 100% {
transform: translate(0, 0) skew(0deg);
}
84%, 90% {
transform: translate(8px, 0) skew(20deg);
}
}
@keyframes shiftright {
0%, 87%, 100% {
transform: translate(0, 0) skew(0deg);
}
84%, 90% {
transform: translate(8px, 0) skew(20deg);
}
}
@-moz-keyframes blink {
0%, 50%, 85%, 100% {
color: #fff;
}
87%, 95% {
color: transparent;
}
}
@-webkit-keyframes blink {
0%, 50%, 85%, 100% {
color: #fff;
}
87%, 95% {
color: transparent;
}
}
@-o-keyframes blink {
0%, 50%, 85%, 100% {
color: #fff;
}
87%, 95% {
color: transparent;
}
}
@keyframes blink {
0%, 50%, 85%, 100% {
color: #fff;
}
87%, 95% {
color: transparent;
}
}
</style>
</head>
<body>
<!-- Error Page Content -->
<div id="error">
<div id="box"></div>
<h3>ERROR 503</h3>
<p>Unlucky! We're currently under <span>maintenance</span>.</p>
<p>Usually we will be back in about a minute.</p>
</div>
</body>
<!-- Many thanks to Yeshua Emanuel Braz - this is based on his work: https://codepen.io/yexx/full/XPZpoK -->
</html>
Trace:
@0ms: Making a request to http://maintenance.germancoding.com/.well-known/acme-challenge/letsdebug-test (using initial IP 2a01:4f8:151:506c::2)
@0ms: Dialing 2a01:4f8:151:506c::2
@51ms: Server response: HTTP 301 Moved Permanently
@51ms: Received redirect to https://maintenance.germancoding.com/.well-known/acme-challenge/letsdebug-test
@51ms: Dialing 2a01:4f8:151:506c::2
@131ms: Server response: HTTP 503 Service Temporarily Unavailable