body {
    background: unset !important;
    background-color: black !important;
}

.hero {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 10 / 3;
    background-color: #2f373b;
    border: 1px solid #2f373b;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.header {
  height: 45px;
  background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
  position: relative;
}

.header-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: black !important;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.header-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.header a .creator-name {
  padding-right: 0;
  transition: padding-right 0.25s ease;
}

.header a:hover .creator-name {
  padding-right: 0.35em;
}

.header-link,
.header-link:hover,
.header a,
.header a:hover {
  text-decoration: none !important;
}

.footer {
    background-color: unset;
    background: linear-gradient(180.2deg, rgb(229, 190, 138) 6.8%, rgb(201, 170, 122) 131%);
    background: linear-gradient(180.2deg, rgb(107, 73, 22) 6.8%, rgb(84, 55, 16) 131%);
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7), -1px -1px 3px rgba(0, 0, 0, 0.3);
    font-weight: 700;
    border-radius: 0px 0px 3px 3px;
    height: 45px;
}

.btn-primary {
  background: linear-gradient(180.2deg, #6b4916 6.8%, #543710 131%);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7), -1px -1px 3px rgba(0, 0, 0, 0.3);
  border: none;
  font-weight: 700;
}

input#username {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000000'%3E%3Cpath d='M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: calc(100% - 5px) calc(50% - 8px); /* Adjusted position */
    background-origin: content-box;
    padding-right: 5px
}

.inputValid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000000'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: calc(100% - 5px) calc(50% - 8px); /* Adjusted position */
    background-origin: content-box;
    padding-right: 5px !important;
}

.form-floating>label {
    color: black;
}

a {
    text-decoration: none;
    color: #6b4916;
    font-weight: 800;
}

a:hover {
    color: #6b4916;
    text-decoration: underline;
}

button#submitButton {
    min-height: 58px;
}

.form-control.vote:disabled {
    background-color: #6b4916;
    opacity: 1;
    color: white;
}

.creator-name {
    color: unset;
    border-radius: 3px 3px 0px 0px;
    margin: unset;
    background-color: unset;
    background-image: unset;
}