@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap');

.title-banner {
  position: relative;
  width: 700px;
  height: 97px;
  background: url('https://picott.ca/OPJTBA/2024-2025/Titles/TitleBackground.png') center center/cover no-repeat;
  color: #120084;
  overflow: hidden;
  border-radius: 8px;
  margin: 0px auto;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 16px rgba(0,0,0,0.11);
}

.title-banner-main {
  position: absolute;
  top: 28px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1.1em;
  font-variant: small-caps;
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #120084;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

.title-banner-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 1.851em; /* 1.683em * 1.10 for a further 10% increase */
  font-weight: bold;
  font-family: 'PT Sans Narrow', Arial Narrow, Arial, sans-serif;
  color: #120084;
  padding: 0;
  margin: 0;
  line-height: 1.1;
  box-sizing: border-box;
  pointer-events: none;
}

.title-banner-event,
.title-banner-subclass {
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'PT Sans Narrow', Arial Narrow, Arial, sans-serif !important;
  font-size: inherit !important;
  font-weight: bold !important;
  line-height: 1.1 !important;
  color: #120084 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.title-banner-event {
  text-align: left;
  margin-left: 100px !important;
  text-shadow: 1px 1px 8px #fff, 0 0 2px #fff;
}

.title-banner-subclass {
  text-align: right;
  margin-right: 50px !important;
  text-shadow: 1px 1px 8px #fff, 0 0 2px #fff;
}