* {
  box-sizing: border-box;
}

html:has(.profile-card-example) {
  height: 100vh;
}

body:has(.profile-card-example) {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: open sans;
  color: #E0E0E0;
  overflow-x: hidden;
  background: #F8E1E1;

}

article.profile-card-example {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 50vw;
  max-width: 25em;
  min-width: 20em;
  border-radius: 1rem;
  background: #800020;
  box-shadow: 0 0 20px 20px rgba(0, 0, 0, .1);
  transition: all 0.5s ease;
}

header.profile-card-example-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: flex-end;

  /* Je kunt selectors nesten! */
  h1 {
    margin: 2rem 0 1rem;
    color: #E0E0E0;
    transition: color 0.3s ease;
  }

}

button.profile-card-example-button {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: .25rem;
  border: none;
  border-radius: 50%;
  background: #1B1F3B;
  transform: scale(.8);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button.profile-card-example-button:focus {
  outline: none;
  background: 1B1F3B;
}

button.profile-card-example-button svg {
  position: absolute;
  top: calc(1.25rem - 12px);
  left: calc(1.25rem - 12px);
  stroke: #fff;
  transition-delay: .25s;
}

button.profile-card-example-button:focus svg {
  stroke: #E0E0E0;
}

button.profile-card-example-button svg:nth-of-type(2) {
  opacity: 0;
  transition-delay: 0ms;
}

.profile-card-img {
  position: relative;
  top: 2rem;
  width: 10em;
  height: auto;
  border: 5px solid #1B1F3B;
  border-radius: 10em;
  box-shadow: 0 0 12px rgba(58, 75, 160, 0.5);
  transition: all 0.05 ease;
}

.profile-card-title {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 0.5rem;
  transition: font-size 0.4s ease;
}

.profile-card-info {
  display: flex;
  /*FLEXBOX*/
  justify-content: center;
  align-items: center;
  gap: 1rem;
  overflow: auto;
    scrollbar-width: none;

  width: 100%;
  padding: 2rem 1rem;
  text-align: center;
  background: #283160;
  border-radius: 0 0 1rem 1rem;
  color: #720d0d;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(58, 75, 160, 0.5);

}

.info-section {
  flex: 0 0 15%;
  text-align: center;
  background-color: #fff;
  padding: 1rem;
  border-radius: 1rem;
  opacity: 0.8;
  transition: all;
}

.previous,
.next {
  position: absolute;
  bottom: 6rem;
  background: #283160;
  color: #ffffff;
  border: 0, 2rem;
  border-radius: 30%;
  border-right-color: #000000;
  width: 4rem;
  height: 2rem;
  cursor: pointer;
  /*muis verandert in hand bij hover*/
  transition: background-color 0.3s ease, transform 0.3s ease;

}

.previous {
  left: 1rem;
}

.next {
  right: 1rem;
}

.profile-card-example p {
  margin: 0;
}

.profile-card-example>p {
  width: 100%;
  margin-top: 0;
  padding: 3rem 2rem;
  border-radius: 0 0 1rem 1rem;
  text-align: center;
  background: rgba(255, 123, 84, 0.15);
}

/* Deze styles zijn van toepassing als je op de knop klikt */
body.is-expanded {
  font-size: 1.15em;
}

body.is-expanded .profile-card-example {
  width: 60vw;
  max-width: 60vw;
}

body.is-expanded .profile-card-example-button svg:first-of-type {
  opacity: 0;
  transition-delay: 0ms;
}

body.is-expanded .profile-card-example-button svg:nth-of-type(2) {
  opacity: 1;
  transition-delay: .25s;
}

body.is-expanded .profile-card-example-dl dd {
  font-size: 1.75em;
}

body.is-expanded .profile-card-example-img {
  width: 15em;
}