/* Basic */
  <style id="INLINE_PEN_STYLESHEET_ID">
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Poppins:wght@300;400;700&display=swap");
* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 3em;
  font-weight: 700;
}

h2 {
  font-size: 1.2em;
  font-weight: 700;
}

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body {
  height: 100%;
  background-color: #abb8c8;
  font: 16px "Inter", sans-serif;
  line-height: 1.6;
  color: #0f3561;
  display: flex;
  flex-direction: column;
}

.app {
/*
  display: grid;
  position: relative;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  grid-template-areas: "appbar" "content";
  background-color: #87ba7b;
  flex-grow: 1;
*/
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    background-color: #87ba7b;

}

.appbar {
  height: 210px;
  display: grid;
  grid-area: appbar;
  grid-template-areas: "controls-left title controls-right";
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
}
.appbar__controls-left {
  grid-area: controls-left;
}
.appbar__title {
  grid-area: title;
}
.appbar__title-text {
  font-size: 1.2em;
}
.appbar__controls-right {
  grid-area: controls-right;
}
.appbar--hero {
  /* padding: 56px 24px; */
  background-color: #87ba7b;
  grid-template-areas: "title title controls-right";
}
.appbar--hero .appbar__title-text {
  font-size: 3em;
}

.center {
  position: relative;
  padding: 24px 24px;
  background: #ffffff;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* margin-bottom: 120px; */
  z-index: 1;
}
.center h1 {
  font-size: 2em;
  border-left: 5px solid dodgerblue;
  padding: 10px;
  color: #000;
  letter-spacing: 5px;
  margin-bottom: 60px;
  font-weight: bold;
  padding-left: 10px;
}
.center .inputbox {
  position: relative;
  width: 300px;
  height: 50px;
  margin-bottom: 24px;
}
.center .inputbox input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 2px solid #000;
  outline: none;
  background: none;
  padding: 10px;
  border-radius: 10px;
  font-size: 1.2em;
}
.center .inputbox:last-child {
  margin-bottom: 0;
}
.center .inputbox span {
  position: absolute;
  top: 14px;
  left: 20px;
  font-size: 1em;
  transition: 0.6s;
  font-family: sans-serif;
}
.center .inputbox input:focus ~ span,
.center .inputbox input:valid ~ span {
  transform: translateX(-13px) translateY(-35px);
  font-size: 1em;
}
.center .inputbox [type="button"] {
  width: 50%;
  background: #D7030D;
  color: #fff;
  border: #fff;
}
.center .inputbox:hover [type="button"] {
  background: dodgerblue;
}
.center .inputbox [type="submit"] {
  width: 50%;
  background: #D7030D;
  color: #fff;
  border: #fff;
}
.center .inputbox:hover [type="submit"] {
  background: dodgerblue;
}
/* Stijlen voor de standaard (grotere) schermen */

.content {
  flex-grow: 1;
    /* Deze regels zijn nu overbodig */
    /* overflow-y: auto;
    -webkit-overflow-scrolling: touch; */
  padding: 24px 24px;
  background-color: #ffffff;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  padding-bottom: 200px;
}

.scrollview {
  overflow: auto;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.scrollview::-webkit-scrollbar {
  width: 0px;
}

.backdrop {
  border-radius: 24px;
}

.list__item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0 24px;
  border-bottom: 1px solid #c3cdd8;
}
.list__item:last-child {
  border: none;
}
.list__item-footer {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.list__title {
  margin-bottom: 16px;
}

.button {
  border: none;
  display: flex;
  gap: 8px;
  background-color: #D7030D;
  padding: 16px 24px;
  font-weight: 500;
  font-size: 1em;
  border-radius: 24px;
  color: #ffffff;
  transition: ease-in 0.12s;
}
.button:active {
  background-color: dodgerblue;
}
.button--secondary {
  color: #0f3561;
  background-color: #D7030D;
}
.button--secondary:active {
  background-color: #D7030D;
}
.button--tertiary {
  color: #0f3561;
  background-color: #D7030D;
}
.button--tertiary:active {
  background-color: #D7030D;
}

.navigation {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: #87ba7b;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: 120px;
}
.navigation__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 24px;
  border-radius: 24px;
}
.navigation--item-current {
  background-color: #5d8b72;
  font-weight: 700;
  color: #ffffff;
}

</style>