:root {
    --red-ticket : #f54949;
}

.login {
    display: flex;
        align-items: center;
        justify-content: center;
        margin: 5rem 0;
}

#dialog {
    width: 98vw;
    max-width: 600px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1em;
    border: 5px solid #ffc107;
}

form:focus {
    outline: none;
    border:none;
}

#dialog::backdrop {
    background-color: rgba(0,0,0,.5);
}

.ticket {
    color:#322523;
    font-family: "Anton";
    backface-visibility: hidden;
    transform: rotate(-16deg) translateZ(0);
    animation: wobble 10s ease infinite;
    display: inline-block;
    padding: 15px 25px;
    background-image:
        radial-gradient( ellipse closest-side at 50%  50%, hsla(0, 0%, 100%, 0.10), transparent 90%),
        radial-gradient( circle at 0    100%, transparent 14px, var(--red-ticket) 15px),
        radial-gradient( circle at 100% 100%, transparent 14px, var(--red-ticket) 15px),
        radial-gradient( circle at 100% 0, transparent 14px, var(--red-ticket) 15px),
        radial-gradient( circle at 0    0, transparent 14px, var(--red-ticket) 15px);
    background-position: center center, bottom left, bottom right, top right, top left;
    background-size: cover, 51% 51%, 51% 51%, 51% 51%, 51% 51%;
    background-repeat: no-repeat;
    border-width: 0 4px;
    border-color: transparent;
    border-style: solid;
    border-image: radial-gradient(cover circle, var(--red-ticket) 0%, var(--red-ticket) 50%, transparent 51%) 0 39% / 15px 4px repeat;
    filter: drop-shadow(hsla(0, 0%, 0%, 0.55) 1px 1px 2px);
}

.ticket > div {
    width: 230px;
    height: 100px;
    box-sizing: border-box;
    position:relative;
    border-color: #d43b39;
    border-style: solid;
    border-width: 2px;
    border-radius:5px;
  	text-align:center;
  	font: 2em/1 Impact;
      font-family: "Anton";
  	text-transform:uppercase;
  	padding:15px;
  	font-stretch: extra-expanded; 	
}

.ticket > div:before,
.ticket > div:after {
    content: attr(data-number);
  	font: .625em/1 'Courier New';
  	position: absolute;
  	width: 96px;
  	line-height: 28px;
  	transform: rotate(90deg) translateZ(0) ;
  	transform-origin: 0% 0%;
  	text-align:center;
  	display: block; 	
  	top: 0;
  	border-color: #d43b39;
  	border-style: solid;
  	border-width: 2px 0 0;
}
.ticket > div:before {
	left: 28px;
}

.ticket > div:after {
	transform-origin: 100% 0%;
	right: 28px;
	transform: rotate(-90deg) translateZ(0);
    content:attr(data-end);
}

@keyframes wobble {
    0%, 100% {
        -webkit-transform: translateX(0%) rotate(-16deg);
        transform: translateX(0%) rotate(-16deg);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    20% {
        -webkit-transform: translateX(-10px) rotate(-21deg);
        transform: translateX(-10px) rotate(-21deg);
    }

    40% {
        -webkit-transform: translateX(calc(10px / 2)) rotate(-11deg);
        transform: translateX(calc(10px / 2)) rotate(-11deg);
    }

    60% {
        -webkit-transform: translateX(-10px) rotate(-21deg);
        transform: translateX(-10px) rotate(-21deg);
    }

    80% {
        -webkit-transform: translateX(calc(10px / 2)) rotate(-11deg);
        transform: translateX(calc(10px / 2)) rotate(-11deg);
    }
}