a-piece-of-flake-0.0.1: assets/style.css

/* A Piece of Flake */

@property --navy-logo-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #5277c3;
}

@property --blue-logo-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #7ebae4;
}

.ani-run .ani {
    position: fixed;
    z-index: 111;
    display: block;
    animation-play-state: running;
    animation-delay: 0s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0, 0.38, 1, 1);
}

.ani {
    display: none;
    width: 7vh;
    height: 7vh;
    animation-play-state: paused;
}

@keyframes fall1 {
    from {
        transform: translateY(-6vh) translateX(-6vw);
        opacity: 1;
    }
    to {
        transform: translateY(100vh) translateX(10vw) rotate(360deg);
        opacity: 0.2;
    }
}
@keyframes fall2 {
    from {
        transform: translateY(-6vh) translateX(16vw);
        opacity: 1;
    }
    to {
        transform: translateY(100vh) translateX(30vw) rotate(360deg);
        opacity: 0.3;
    }
}
@keyframes fall3 {
    from {
        transform: translateY(-6vh) translateX(44vw);
        opacity: 1;
    }
    to {
        transform: translateY(100vh) translateX(70vw) rotate(-360deg);
        opacity: 0.2;
    }
}
@keyframes fall4 {
    from {
        transform: translateY(-6vh) translateX(90vw);
        opacity: 1;
    }
    to {
        transform: translateY(100vh) translateX(70vw) rotate(-360deg);
        opacity: 0.4;
    }
}

.fall1 { animation-duration: 3s; animation-name: fall1;  }
.fall2 { animation-duration: 2.2s; animation-name: fall2;  }
.fall3 { animation-duration: 3.4s; animation-name: fall3;  }
.fall4 { animation-duration: 2.7s; animation-name: fall4; animation-delay: 0.3s; }

.navbar .navbar-brand a.navbar-item {
    color: var(--navy-logo-color);
}

button.is-black {
    font-weight: bold;
}

body {
    background: radial-gradient(circle, var(--blue-logo-color) 0%, var(--blue-logo-color) 80%, var(--navy-logo-color) 100%);
    color: #171717;
    min-height: 100vh;
    overflow: scroll !important;
    --bulma-body-overflow-x: scroll !important;
}

body pre.error {
    white-space: pre-wrap;
}

body .table {
    background: transparent;
}

body .table.is-bordered td {
    border-width: 2px;
}

body .table td {
    border-color: hsl(221.1, 17.8%, 61.4%);
}

.input.is-success {
    border-width: 4px !important;
    box-shadow: 20px 10px 20px green !important;
    background-color: var(--bulma-success-25-invert);
}

.input.is-danger {
    border-width: 4px !important;
    box-shadow: 10px 5px 5px var(--bulma-danger) !important;
    background-color: var(--bulma-danger-25-invert);
}

img.github {
    width: 8vh;
    opacity: 0.8;
    padding-top: 5vh;
}

.content p {
    overflow-wrap: break-word;
    text-wrap: pretty;
}