178 lines
2.7 KiB
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);
|
|
}
|
|
}
|