:root {
    --conic: conic-gradient(from 180deg at 50% 50%,#e8515c 0deg,#fe6ebd 45deg,#5cadfe 90deg,#75f5d8 150deg,#fdf175 225deg,#fe8564 290deg,#e8515c 1turn);
}
*, *::after, *::before {
    font-family: 'IBM Plex Sans', 'Times New Roman', Times, serif ,sans-serif;
    text-decoration: none;
    margin: 0;
    padding: 0;
    inset: 0;
    position: relative;
}

body {
    scroll-behavior: smooth;
    margin: 1rem;
    padding: 1rem;
    font-size: 1.5rem;
    font-family: monospace;
    color: lawngreen;
    background-color: #000000;
}

.progress-bar {
    width: 500px;
    height: 50px;
    background-color: #000000;
    margin: 10px 0;
}

input {
    margin: 0.66rem;
    font-size: 1.99rem;
    height: 40px;
    width: 500px;
    border-radius: 12px;
    border: none;
    padding: 10px;
    background-color: #9bb8ed;
    font-family: monospace;
}

input::selection {
    background: #000;
    color: #fff;
}

input:hover {
    filter: opacity(0.7);
}
.text {
    width: 50vw;
    background: linear-gradient(130deg, aqua, magenta, orange);
    background-color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.progress-bar span {
    display: block;
    height: 100%;
    transition: width 0.3s;
}

.weak {
    background-color: red;
}

.good {
    background-color: orange;
}

.very-good {
    background-color: yellow;
}

.excellent {
    background-color: green;
}

.perfect {
    background: linear-gradient(45deg, cyan, magenta);
}

button {
    margin: 0.55rem;
    background-color: lawngreen;
    color: #000;
    font-size: medium;
    border: none;
    width: 150px;
    height: 60px;
    border-radius: 12px;
}
button:hover {
    cursor: pointer;
    color: lawngreen;
    background: #000;
}