@property --g9-a {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

@property --g9-p {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}

@property --g9-c1 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
}

@property --g9-c2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
}

body {
    --s: 80px;
    /* control the size */
    --_g: #0000, var(--g9-c1) 2deg calc(var(--g9-a) - 2deg), #0000 var(--g9-a);
    background:
        conic-gradient(from calc(-45deg - var(--g9-a)/2) at top var(--g9-p) left var(--g9-p), var(--_g)),
        conic-gradient(from calc(-45deg - var(--g9-a)/2) at top var(--g9-p) left var(--g9-p), var(--_g)),
        conic-gradient(from calc(45deg - var(--g9-a)/2) at top var(--g9-p) right var(--g9-p), var(--_g)),
        conic-gradient(from calc(45deg - var(--g9-a)/2) at top var(--g9-p) right var(--g9-p), var(--_g)),
        conic-gradient(from calc(-135deg - var(--g9-a)/2) at bottom var(--g9-p) left var(--g9-p), var(--_g)),
        conic-gradient(from calc(-135deg - var(--g9-a)/2) at bottom var(--g9-p) left var(--g9-p), var(--_g)),
        conic-gradient(from calc(135deg - var(--g9-a)/2) at bottom var(--g9-p) right var(--g9-p), var(--_g)),
        conic-gradient(from calc(135deg - var(--g9-a)/2) at bottom var(--g9-p) right var(--g9-p), var(--_g)) var(--g9-c2);
    background-size: calc(2*var(--s)) calc(2*var(--s));
    animation: g9 2s infinite alternate linear;
}

@keyframes g9 {

    0%,
    15% {
        --g9-a: 135deg;
        --g9-p: 20%;
        --g9-c1: hsla(210, 100%, 80%, 0.800);
        --g9-c2: white;
        background-position: 0 0, var(--s) var(--s);
    }

    45%,
    50% {
        --g9-a: 90deg;
        --g9-p: 25%;
        --g9-c1: hsla(210, 100%, 80%, 0.800);
        --g9-c2: white;
        background-position: 0 0, var(--s) var(--s);
    }

    50.01%,
    55% {
        --g9-a: 90deg;
        --g9-p: 25%;
        --g9-c2: hsla(210, 100%, 80%, 0.800);
        --g9-c1: white;
        background-position: var(--s) 0, 0 var(--s);
    }

    85%,
    100% {
        --g9-a: 135deg;
        --g9-p: 20%;
        --g9-c2: hsla(210, 100%, 80%, 0.800);
        --g9-c1: white;
        background-position: var(--s) 0, 0 var(--s);
    }
}

#container {
    user-select: none;
    font-family: verdana;
    text-align: center;
    font-size: 1.7rem;
    font-weight: bold;
    mix-blend-mode: multiply;
}

button {
    font-size: 1.5rem;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    outline: 3px solid black;
    background-color: hsl(210, 100%, 50%);
    color: white;
    font-weight: bold;
    cursor: pointer;
    font-family: verdana;
}

h1 {
    text-shadow: 4px 4px hsl(0, 0%, 75%);
}

label,
input,
#diceresult {
    text-shadow: 2px 2px hsl(0, 0%, 75%);
}

button:hover {
    background-color: hsl(210, 100%, 60%);
}

button:active {
    background-color: hsl(210, 100%, 70%);
}

input {
    font-size: 2rem;
    width: 120px;
    text-align: center;
    font-weight: bold;
    border: 2px solid black;
    border-radius: 5px;
}

#diceresult {
    margin: 30px;
}

#diceimages img {
    width: 150px;
    margin: 5px;
}

/* Target the entire scrollbar */
::-webkit-scrollbar {
    width: 12px;
    /* vertical scrollbar width */
    height: 12px;
    /* horizontal scrollbar height */
}

/* Track - background of the scrollbar */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* light gray */
    border-radius: 10px;
}

/* Thumb - the draggable part */
::-webkit-scrollbar-thumb {
    background: #888;
    /* dark gray */
    border-radius: 10px;
}

/* Hover effect */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}