website/css/extras.css
2023-09-28 08:54:08 +00:00

170 lines
2.9 KiB
CSS

/** Image Gallery **/
#img-gallery img{
max-width: 240px;
vertical-align: top;
display: inline;
margin: 0 auto;
height: auto;
}
.typing-style {
width: 100%;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
.badges-button {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
grid-gap: 1vmin;
}
.webrings {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: .7em;
font-family: VictorMono;
}
.border {
padding: 30px;
border: 1px solid var(--highlight);
}
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
.hue {
-webkit-animation: hue 10s infinite linear;
}
a[href$=".key"]:before { content: "DOWNLOAD"; }
a[href$=".txt"]:before { content: "VIEW"; }
.button {
color: #F5DF50;
text-decoration: none;
}
.button:hover{
animation: pulsate 1s ease-in-out;
}
a:hover {
border-bottom: 1px solid;
border-top: 1px solid;
animation: pulsate 1s ease-in-out;
}
@keyframes pulsate {
0% {
box-shadow:
0 0 25px #f99509,
0 0 50px #F5DF50;
}
}
@keyframes waves {
0% {
box-shadow:
0 0 25px aqua,
0 0 50px darkcyan;
}
}
#rice-txt {
text-shadow: #36D2F7 -1px 0, #0087ff 2px 0;
color: aqua;
}
#rice-txt:hover {
animation: waves 1s ease-in-out;
}
@font-face {
font-family: neon;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.neon {
font-family: neon;
color: #FB4264;
font-size: 3vw;
line-height: 3vw;
text-shadow: 0 0 3vw #F40A35;
}
.flux {
font-family: neon;
color: #426DFB;
font-size: 3vw;
line-height: 3vw;
text-shadow: 0 0 3vw #2356FF;
}
.neon {
animation: neon 1s ease infinite;
-moz-animation: neon 1s ease infinite;
-webkit-animation: neon 1s ease infinite;
}
@keyframes neon {
0%,
100% {
text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
color: #FED128;
}
50% {
text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
color: #806914;
}
}
.flux {
animation: flux 2s linear infinite;
-moz-animation: flux 2s linear infinite;
-webkit-animation: flux 2s linear infinite;
-o-animation: flux 2s linear infinite;
}
@keyframes flux {
0%,
100% {
text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
color: #28D7FE;
}
50% {
text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
color: #146C80;
}
}