url-minify/frontend/styles/404.css

178 lines
2.7 KiB
CSS

body {
background: rgba(148, 187, 187, 0.788);
}
.FourOhFour {
font-family: 'Cabin Sketch', cursive;
font-size: 90px;
line-height: 80px;
animation: color_change 0.1s infinite alternate,
opacity 1.3s infinite alternate;
font-weight: bold;
}
.Maybe {
font-size: 17px;
}
.wrapper {
width: 500px;
height: 480px;
position: absolute;
top: 13%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
box-shadow: -4px 12px 0px -6px rgba(0, 0, 0, 0.6);
}
@keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes color_change {
from {
color: black;
}
to {
color: #ff0000;
}
}
.TextHolder {
position: absolute;
bottom: 0;
height: 280px;
overflow: hidden;
}
.robot {
position: absolute;
right: 18%;
}
.TextHolder:after {
content: '';
position: absolute;
z-index: 1;
bottom: 9px;
left: 8px;
width: 96%;
height: 260px;
border: solid #ff0000 3px;
}
.TextHolder:before {
content: '';
position: absolute;
width: 100%;
height: 280px;
background-color: #fff;
}
.Texts {
font-family: 'Share Tech Mono', monospace;
position: relative;
z-index: 2;
bottom: 0;
left: 0;
width: 90%;
height: 90%;
overflow: hidden;
margin: 1% auto;
text-align: center;
padding: 10px;
font-size: 30px;
line-height: 37px;
font-weight: bold;
}
.Bad {
font-size: 20px;
}
.prob {
padding-top: 2px;
padding-bottom: 2px;
white-space: nowrap;
font-size: 30px;
background: #f6ba3f;
padding-left: 25px;
padding-right: 25px;
border-radius: 30px;
overflow: hidden;
width: 70px;
color: rgb(0, 0, 0);
position: relative;
}
.prob:after {
content: '';
position: absolute;
width: 200px;
height: 78%;
left: 5px;
top: 2px;
opacity: 0.8;
padding-left: 25px;
padding-right: 25px;
border-radius: 30px;
border: solid 2px rgb(0, 0, 0);
}
.Return {
padding-top: 2px;
padding-bottom: 2px;
font-size: 25px;
background: green;
padding-left: 26px;
color: #fff;
padding-right: 23px;
border-radius: 30px;
overflow: hidden;
position: relative;
margin: 0 auto;
z-index: 2;
border-color: none;
}
.Return:after {
content: '';
position: absolute;
width: 137px;
height: 75%;
left: 3.5px;
top: 2px;
opacity: 0.6;
padding-left: 25px;
padding-right: 25px;
border-radius: 30px;
border: solid 2px #fff;
}
.Return:hover {
font-size: 30px;
transition: all 0.4s ease;
}
.Return:hover::after {
width: 166px;
transition: all 0.4s ease;
}
#righthand {
animation: swing 1.3s ease-in-out infinite alternate;
transform-box: fill-box;
transform-origin: top;
}
@keyframes swing {
0% {
transform: rotate(180deg);
}
100% {
transform: (45deg);
}
}