:root {
  --bg-color-right: linear-gradient(-90deg, rgba(255, 8, 164, 1) 0%, rgba(175, 0, 246, 1) 100%);
  --bg-color-left: linear-gradient(90deg, rgba(255, 8, 164, 1) 0%, rgba(175, 0, 246, 1) 100%);
  --bg-color-center: linear-gradient(90deg, rgba(255, 8, 164, 1) 0%, rgba(175, 0, 246, 1) 50%, rgba(255, 8, 164, 1) 100%);
}

* {
  box-sizing: border-box;
}

.header {
  display: flex;
  overflow: hidden;
  background-color: #9a24e3;
  border-radius: 10px;
  margin: auto;
}

/* Style the topnav links */
.header a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  font-size: 1.5vw;
  padding: 14px 16px;
  text-decoration: none;
}

.center_container {
  margin-left: 5%;
  margin-right: 5%;
}

/* Container for flexboxes */
.row {
  display: -webkit-flex;
  display: flex;
}

.column {
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  justify-content: center;
  align-content: center;
  padding: 10px;
}

.column_container {
  display: flex;
  flex-direction: column;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  justify-content: center;
  align-content: center;
  padding: 10px;
}

.border-right {
  border-color: var(--bg-color-right) !important;
  color: var(--bg-color-right) !important;
}

.border-left {
  border: inherit inherit var(--bg-color-left) !important;
  color: var(--bg-color-left) !important;
}

.border-center {
  border: 10px inherit var(--bg-color-center) !important;
  color: var(--bg-color-center) !important;
}

.bg-right {
  border: var(--bg-color-right) !important;
  background: var(--bg-color-right) !important;
  color: var(--bg-color-right) !important;
}

.bg-left {
  border: var(--bg-color-left) !important;
  background: var(--bg-color-left) !important;
  color: var(--bg-color-left) !important;
}

.name_display {
  background-clip: border-box !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 500 !important;
  word-spacing: -20px !important;
}

.name_subheader {
  display: inline;
  color: rgb(211, 211, 211) !important;
  text-align: right;
  font-size: 3vw;
  font-weight: 500;
  margin: auto;
  width: 100%;
  max-height: 100%;
}

.card-transparent {
  background: transparent !important;
  border: 4px solid rgb(211, 211, 211) !important;
  color: rgb(211, 211, 211) !important;
}

.list-element-left {
  background: inherit;
  border-width: inherit;
  position: relative;
  display: block;
  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
  background-color: transparent;
  border: var(--bg-color-left) !important;
  border-width: 10px;
}