body {
    background-color: black;
    font-size: 14pt;
    color: white;
    font-family: 'Space Mono', monospace;
    display: flex;
    margin: 20px;
    flex-direction: column;
    align-items: center; /* This will center the .event divs horizontally */
}

.event {
    background-color: black;
    border: 1px solid white;
    padding: 20px;
    margin: 5px 0; /* This will add space between each event box */
    width: 92%; /* This will make the box take the full width of its parent (body in this case) */
    max-width: 720px; /* This restricts the maximum width */
}

.title, .time, .venue {
    margin: 2px;
}

.url {
    display: inline-block;
    background-color: #b52b3c;
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 0px;
    margin-bottom: 10px;
    transition: background-color 0.3s; /* Smooth background change on hover */
}

.url:hover {
    background-color: #532b3c;
}

.tilt {
    transform: rotate(0deg); /* Default value, this will be changed using JavaScript */
}

.wrapper {
    max-width: 760px;
    width: 100%;
    margin: 20px 0 40px 0; /* centering the wrapper */
    text-align: left; /* left-aligning the text inside */
}

h1 {
    font-size: 14pt;
    color: white;
    font-family: 'Space Mono', monospace;
    margin-bottom: 16px; /* Optional, for spacing */
    font-weight: normal;
}

h3 {
    font-size: 14pt;
    color: white;
    font-family: 'Space Mono', monospace;
    margin-bottom: 16px; /* Optional, for spacing */
    font-weight: normal;
}