gmcusaro

:root {
    --heart-size: 100px;
}
* { 
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.heart{
    height: var(--heart-size);

gmcusaro

.blur {
    background-color: #ffffff10;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

gmcusaro

main {
    background: linear-gradient(to bottom right, #4affde 0%, #5b9dff 40%, #d06bff 60%, #ff34d3 100%);
    background-size: 200% 200%;
    animation: movingGradient 5s linear infinite alternate;
}

@keyframes movingGradient {
    from { background-position: 0 0; }
    to   { background-position: 100% 100%; }
}

gmcusaro

.spinner {
    height: 36px;
    width: 36;
    background-color: #ffffff;
    animation: flip 1s linear infinite;
}

@keyframes flip {
    50% {
        transform:  rotateX(180deg);

gmcusaro

.circle {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: #000000;
}

.half-circle {
    height: 75px;
    width: 150px;

gmcusaro

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.card {
transform: rotateX(60deg) rotateZ(-45deg);
transition: transform 200ms;
border-radius: 10px;
width: 100px;

gmcusaro

:root {
    --gradient-1:linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
}
.box {
    inline-size: 50vmin;
    block-size: 50vmin;
}

html {
    block-size: 100%;

gmcusaro

.grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 8px;
    grid-auto-flow: dense;
}
.item1x1 {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1/1;

gmcusaro

.live {
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: #ff69b4;
    animation: pulse 1500ms infinite;
}

@keyframes pulse {
    0% {

gmcusaro

.spinner {
    width: 40px;
    height: 40px;
    position: relative;
}
.spinner .dot {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;