:root {
    --gray: #808080;
    --gray-medium: #c1bfbf;
    --gray-light: #d3d3d3;
    --paper-color: #eff8fe;
}


html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: radial-gradient(circle at 50% 20%, #ffb56b, #f28c5f, #bc365d, #5f0060, #1f005c);
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Courier New, sans-serif;
    margin-bottom: 50px;
}

h1 {
    font-size: 1.2rem;
}

.paper {
    position: relative;
    padding: 10px;
    width: 12rem;
    background: linear-gradient(135deg,
            var(--paper-color),
            85%,
            var(--gray-light));
    box-shadow: 1px 0 1px var(--gray);
    text-align: center;
}

/* Tacks */
.paper::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray);
}

.paper::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray);
}

.numbers {
    display: flex;
    min-height: 11rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.number {
    position: relative;
    width: 100%;
    background: linear-gradient(to right,
            var(--paper-color),
            80%,
            var(--gray-light));
    border-top: 1px dashed var(--gray);
    box-shadow: 1px 1px 1px var(--gray);
    transform-origin: center top;
}

.link-wrapper {
    position: absolute;
    display: flex;
    top: 0;
    transform: rotate(90deg);
    transform-origin: top left;
    font-size: 0.9rem;
    margin-left: 1.7rem;
    margin-top: 1rem;
    align-items: center;
}


.link-wrapper a {
    font-size: 18px;
    font-family: sans-serif;
}

.link-wrapper a,
.link-wrapper a:visited,
.link-wrapper a:active {
    color: black;
    text-decoration: none;
}

.number:nth-child(2) {
    transform: skew(-5deg, 0deg);
    background: var(--paper-color);
}

.number:nth-child(2)::after,
.number:nth-child(4)::after {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            var(--gray-light),
            5%,
            rgba(211, 211, 211, 0));
}

.number:nth-child(1),
.number:nth-child(3) {
    background: linear-gradient(to right,
            var(--paper-color),
            60%,
            var(--gray-light));
}

.number:nth-child(4) {
    transform: skew(-8deg, 0deg);
    background: var(--paper-color);
}

.number:nth-child(5) {
    transform: skew(-3deg, 0deg);
}

@media all and (max-width: 230px) {
    .paper {
        margin-right: 10px;
        width: 100%;
    }
}