.i {
    height: 32px;
    width: 32px;
}
html {
    background-color: #bbb;
  perspective: 100px;
}
li {
    margin: 4px;
    padding: 4px;
    background-color: #eee;
    text-decoration: none;
    text-decoration-style: none;
    list-style: none;
}
.li {
    margin: 4px;
    padding: 4px;
    background-color: #eee;
    text-decoration: none;
    text-decoration-style: none;
    list-style: none;
}
c {
        align-items: center;
        justify-content: center;
        width: 100%;
        display: flex;
}
hr {
    width:70%;
    color: #333;
}
.t {
    text-align: center;
}
.rt {
    animation: rotx 1s infinite cubic-bezier( 0.48, 0.19, 0.49, 0.78 );
    display: inline-block;
}	
.bl {
    animation: blink 0.5s infinite linear;
    display: inline-block;
}	
.rainbow {
    background-image: linear-gradient(to right, #f22, #f2f, #22f, #2ff, #2f2, #ff2);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: grad 0.5s infinite linear;
    display: inline-block;
}
.warn {
    background-image: 0;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: warning 0.5s infinite linear;
    display: inline-block;
}
@keyframes rotx{
    0% {transform:rotate3d(
        0,0,0,90deg
    )}
    100%{transform:rotate3d(
        8,0,4,360deg
    )}
}
@keyframes blink{
    0%    {color:#f00}
    12.5% {color:#f80}
    25%   {color:#8f0}
    37.5% {color:#0f8}
    50%   {color:#08f}
    62.5% {color:#00f}
    75%   {color:#80f}
    87.5% {color:#f08}
    100%  {color:#f00}
}
@keyframes grad{
    0%     {background-image: linear-gradient(to right, #f22, #f2f, #22f, #2ff, #2f2, #ff2);}
    17%    {background-image: linear-gradient(to right, #ff2, #f22, #f2f, #22f, #2ff, #2f2);}
    33%    {background-image: linear-gradient(to right, #2f2, #ff2, #f22, #f2f, #22f, #2ff);}
    49%    {background-image: linear-gradient(to right, #2ff, #2f2, #ff2, #f22, #f2f, #22f);}
    66%    {background-image: linear-gradient(to right, #22f, #2ff, #2f2, #ff2, #f22, #f2f);}
    83%    {background-image: linear-gradient(to right, #f2f, #22f, #2ff, #2f2, #ff2, #f22);}
    100%    {background-image: linear-gradient(to right, #f22, #f2f, #22f, #2ff, #2f2, #ff2);}
}
@keyframes warning{
    0%     {background-image: linear-gradient(to right, rgb(255, 0, 0),rgb(121, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0));}
    17%    {background-image: linear-gradient(to right, rgb(121, 0, 0),rgb(255, 0, 0),rgb(121, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0));}
    33%    {background-image: linear-gradient(to right, rgb(0, 0, 0),rgb(121, 0, 0),rgb(255, 0, 0),rgb(121, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0));}
    49%    {background-image: linear-gradient(to right, rgb(0, 0, 0),rgb(0, 0, 0),rgb(121, 0, 0),rgb(255, 0, 0),rgb(121, 0, 0),rgb(0, 0, 0));}
    66%    {background-image: linear-gradient(to right, rgb(0, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0),rgb(121, 0, 0),rgb(255, 0, 0),rgbrgb(121, 0, 0));}
    83%    {background-image: linear-gradient(to right, rgb(121, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0),rgb(121, 0, 0),rgb(255, 0, 0));}
    100%    {background-image: linear-gradient(to right, rgb(255, 0, 0),rgb(121, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0),rgb(0, 0, 0));}
}
img {
    max-width: 300px;
    max-height: 300px;
}
html {
    font-family: Arial, Helvetica, sans-serif;
    /* more like aryan */
}

.crisp {
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}