body {
    background-color: rgb(200, 223, 219);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.cut-corners {
    clip-path: polygon(
        20px 0, calc(100% - 20px) 0, 100% 20px,
        100% calc(100% - 20px), calc(100% - 20px) 100%,
        20px 100%, 0 calc(100% - 20px), 0 20px
    );
}

.ticket-wrapper {
    position: relative;
}

.ticket {
    position: relative;
    z-index: 1;
    background-color: rgb(102, 163, 191);
    padding: 20px;
    color: rgb(0, 0, 0);
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
}

.ticket-back {
    position: absolute;
    z-index: -1;
    top: -8px;
    left: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    background-color: rgb(51, 104, 160);
}

.nav {
    position: sticky;
    top: 20px;
    padding: 20px;
    color: rgb(0, 0, 0);
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
}

.right-image {
    position: sticky;
    top: 20px;
}

.left {
    flex: 1;
    min-height: max-content;
    padding: 16px;
}

.middle {
    flex: 3;
    min-height: max-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
}

.right {
    flex: 1;
    min-height: max-content;
    padding: 16px;
}