/* page styling */
summary {
    font-size: 1.25rem;
    padding: 1rem;
}

.info {
    color: rgb(151 153 167);
    font-size: 1.25rem;
    padding: 0 2rem;
    margin: 0 auto 1.5rem auto;
}

h1 {
    color: #fff;
    padding: 0 2rem;
}

h2 {
    color: #fff;
}

.container {
    display: flex;
    flex-wrap: wrap;
    padding: 0 2rem;
    align-items: flex-start;
    gap: 2rem;
}

.card {
    margin: 0 auto;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08);
    flex: 0 1 20rem;
    background-color: #4b5563;
    border-radius: 1rem;
    background-color: rgb(7 16 45);
    background: linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));
    background: linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));
    border: 2px solid rgb(106, 101, 84);
}


/* scroll progress bar animation */
body {
    background-color: rgb(33, 33, 33);
    color: rgb(151 153 167);
}

.progress-bar {
    animation: progress-bar linear;
    animation-timeline: scroll();
    transform-origin: left;
    margin: 0;
    padding: 0;
    height: 5px;
    top: 0;
    width: 100%;
    z-index: 2;
    background-color: rgb(13, 122, 246);
    position: fixed;
    scale: 0 1;
}

@keyframes progress-bar {
    to {
        scale: 1 1;
    }
}