/* Base */
h1, h2, h3, h4, h5, h6 {
color: #002e00;
}
h2, h3, h4, h5, h6 {
padding-left: 5em;
}
p, div {
padding: 0em 2em 0em 2em;
}
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: red;
text-decoration: none;
}
a:hover {
color: hotpink;
text-decoration: none;
}
a:active {
color: green;
text-decoration: none;
}
/* Class */
.box {
width: 70em;
padding: 1em 0.5em 0em 0.5em;
border: 0.2em solid #333;
border-style: inset;
border-color: #1a1d0a;
margin: 1em auto;
background-color: #c0bbc015;
}
.box2 {
width: 50em;
border: 0.2em solid #333;
border-style: inset;
border-color: #1a1d0a;
margin: 1em auto;
background-color: #c0bbc015;
}
.subbox {
background-color: #fdffff;
width: 20em;
padding: 1em;
border: 0.2em solid #333;
border-color: #1a4f0a;
border-style: double;
margin: 0em auto;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.container {
display: grid;
grid-template-columns: auto auto auto auto auto;
padding: 1em;
}
.container > div {
background-color: #f1f1f1;
border: 0.1em solid black;
padding: 0.2em;
text-align: center;
}
.small {
width:  9em;
height: 9em;
}
.back {
float: left;
padding-left: 5em;
font-size: 11px;
}
.links {
background-color: #05660515;;
padding-left: 1em;
}
/* Anim */
@keyframes shake {
0% { transform: rotate(0deg); }
10% { transform: skewY(0.2deg); }
25% { transform: rotate(-0.01deg); }
50% { transform: translate(2px, 1px) rotate(-0.03deg); }
75% { transform: rotate(0.01deg); }
100% { transform: rotate(-0.1deg); }
}
@keyframes shake-angry {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(5px, 5px) rotate(5deg); }
50% { transform: translate(0, 0) rotate(0eg); }
75% { transform: translate(-5px, 5px) rotate(-5deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes blink {
0% { opacity: 1; background-color: white; filter: invert(0%); }
33% { opacity: 1; background-color: yellow; filter: invert(0%); }
66% { opacity: 1; background-color: white; filter: invert(100%); }
100% { opacity: 1; background-color: white; filter: invert(0%); }
}
@keyframes shake {
0% { transform: rotate(0deg); }
10% { transform: skewY(0.2deg); }
25% { transform: rotate(-0.01deg); }
50% { transform: translate(2px, 1px) rotate(-0.03deg); }
75% { transform: rotate(0.01deg); }
100% { transform: rotate(-0.1deg); }
}
/* Anim Classes */
.shake {
animation: shake 1s step-start infinite;
}
.shake-angry {
animation: shake-angry 1s step-start infinite;
}
.blinking-text {
animation: blink 3s step-start infinite;
}
.blinking-text:nth-child(1) { animation-delay: 1.9s; }
/* Anim offsets */
.shake:nth-child(1) { animation-delay: .8s; }
.shake:nth-child(2) { animation-delay: 1.3s; }
.shake:nth-child(3) { animation-delay: .5s; }
.shake:nth-child(4) { animation-delay: .9s; }
.shake:nth-child(5) { animation-delay: 1.1s; }
.shake:nth-child(6) { animation-delay: 8.5s; }
.shake:nth-child(7) { animation-delay: 0.5s; }
.shake:nth-child(8) { animation-delay: .99s; }
/* Anim Base */
p:hover, h1:hover, img:hover, div.container:hover > div {
animation: shake-angry 1s step-start infinite;
}
lo.shake > li, li:hover {
animation: shake-angry 10s step-start infinite;
}
p:hover {
animation: shake-angry 0.1s infinite;
}
.subbox:hover {
animation: shake-angry 0.2s infinite;
}
img:hover {
animation: shake-angry 0.03s infinite;
}
