:root {
  --br: 4px;
}

body:not(.scrolled) section#hero .background {
  border-radius: 15px;
  overflow: hidden;
}

section#hero {
  height: 100vh;
}
@media screen and (max-width: 500px) {
  section#hero {
    height: 100vh;
  }
}
section#hero .background::before {
  display: none !important;
}
section#hero .background:has(img, video) {
  inset: 30px;
}
@media screen and (max-width: 500px) {
  section#hero .background:has(img, video) {
    inset: 15px 15px 45px;
  }
}

#features {
  visibility: hidden;
}
#features .card {
  height: auto;
  flex: 1 0 auto;
}
@media screen and (min-width: 500px) {
  #features .card {
    flex: 0 0 500px;
  }
  #features .card h3 {
    font-size: 24px;
  }
}
#features .card .cd_image {
  border-radius: 8px;
  box-shadow: var(--bs);
}
@media screen and (max-width: 500px) {
  #features .card .cd_image {
    border-radius: 8px;
  }
}
#features .card .cd_image:hover img {
  transform: initial;
}
#features .card .cd_content p {
  display: flex;
}

.scrolled #features {
  visibility: visible;
}

nav {
  box-shadow: var(--bs);
}
nav .logo img,
nav .logo svg {
  margin-left: 0.5rem;
  margin-right: 3rem;
}

nav .logo img,
nav .logo svg,
footer .logo img,
footer .logo svg {
  width: auto;
  height: 28px;
}

@media screen and (min-width: 500px) {
  body.home nav {
    top: 3rem;
  }
}
@media screen and (max-width: 500px) {
  body.home nav {
    background: none;
    color: #fff;
    stroke: #fff;
    border: none;
    bottom: 1rem;
  }
}

body.account button#cancel {
  display: none;
}