/* MARK: font-face */
@font-face {
  font-family: "gonte";
  src: url(../fonts/gonte.otf);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "loveletter";
  src: url(../fonts/Loveletter_No_9.ttf);
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "autumn";
  src: url(../fonts/Autumn\ in\ September.ttf);
  font-weight: 400;
  font-style: normal;
}

/* MARK: custom-properties */

html {
  /*display/layout*/
  --display: grid;
  --place-content: center;
  --grid-column: auto auto auto;
  --font-size: 1.25em;
  --text-align: center;
  /* font family */
  --font-family: "gonte", sans-serif;
  --font-family-2: "loveletter", serif;
  --font-family-3: "autumn", serif;
  --font-weight: 400;
  --font-style: normal;
  /*font-sizes*/
  --step-0: clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem);
  --step-1: clamp(1.2rem, 0.975rem + 1vw, 1.875rem);
  --step-2: clamp(1.44rem, 0.9825rem + 2.0333vw, 2.8125rem);
  --step-3: clamp(1.728rem, 0.8978rem + 3.69vw, 4.2188rem);
  --step-4: clamp(2.0736rem, 0.6554rem + 6.303vw, 6.3281rem);
  --step-5: clamp(2.4883rem, 0.1537rem + 10.3761vw, 9.4922rem);
  /*borders*/
  --border: 0.4em, solid, var(--accent-color1);
  --border-radius: 60px;
  /* light-dark theme */
  color-scheme: light dark;
  --background-color: light-dark(antiquewhite, rgb(36, 36, 36));
  --color: light-dark(rgb(129, 53, 85), rgb(255, 236, 241));
  --color-h2: light-dark(rgb(76, 0, 32), rgb(205, 142, 168));
  --p-color: light-dark(rgb(160, 56, 100), rgb(240, 207, 221));
  --accent-color1: light-dark(#b6c877, rgb(66, 86, 32));
  --accent-color-text: light-dark(rgb(66, 86, 32), #b6c877);
  --hover-color: light-dark(rgb(187, 16, 87), rgb(187, 16, 87));
  /* images */
  --background-size: 2.9em 2.9em;
  --background-repeat: no-repeat;
  --list-style: none;
  --padding-inline-start: 1em;
  /*flower img*/
  --background-size-bloem: 60%;
  --background-repeat-bloem: no-repeat;
  --background-position-bloem: right;
  --text-alignment-bloem: left;

  cursor: url(../img/cursor.png), crosshair;
}

/* MARK: general styling*/

body {
  max-width: 40em;
  margin-inline: auto;
  color: var(--color);
  font-size: var(--font-size);
  text-align: var(--text-align);
  font-family: var(--font-family-2);
}

h1 {
  font-family: var(--font-family);
  font-size: var(--step-4);
  color: var(--accent-color-text);
}

h2 {
  color: var(--color-h2);
  font-size: var(--step-4);
  font-family: var(--font-family-3);
}

h3 {
  color: var(--color-h2);
  font-size: var(--step-4);
  font-family: var(--font-family-3);
  text-align: var(--text-alignment-bloem);
}

a {
  color: var(--color);
  cursor: url(../img/cursor.png), crosshair;

  &:hover {
    color: var(--hover-color);
  }
}

.backtohome {
  font-size: var(--step-2);
  font-family: var(--font-family);
  color: rgb(72, 0, 30);
  border-radius: var(--border-radius);
  border: var(--border);
  padding-left: 0.5em;
  padding-right: 0.5em;
  box-shadow: 5px 5px 10px 2px rgb(94, 23, 52);
  background-color: var(--accent-color1);
  cursor: url(../img/cursor.png), crosshair;
}

a:focus {
  color: var(--accent-color-text);
  border: var(--border);
  border-radius: var(--border-radius);
}

ol {
  display: var(--display);
  grid-template-columns: var(--grid-column);
  font-family: var(--font-family-2);
}

ul {
  font-size: var(--step-2);
}

li {
  padding-bottom: 2em;
}

p {
  color: var(--p-color);
  text-align: left;
  font-family: var(--font-family);
  font-size: var(--step-2);
  padding-bottom: 1.5em;
}

html:has(dialog:open) {
  overflow-y: clip;
}

dialog {
  &::backdrop {
    background-color: #ffffff9b; /* transparant wit - natuurlijk beter om hier een light-dark() custom property te gebruiken */
    backdrop-filter: blur(5px); /* px gebruiken voor blur is 👍 :) */
  }

  border: var(--border);
  border-radius: 30px;
  max-width: 65%;
  background-color: #f6fbe6;
}

.diaparagraphs {
  text-align: center;
  font-family: var(--font-family-3);
  font-size: var(--step-2);
}
/* MARK: Header */

header {
  border: var(--border);
  border-radius: var(--border-radius);
  font-family: var(--font-family);
  font-style: var(--font-style);
  font-weight: var(--font-weight);
}

/* MARK: main */
main {
  font-size: var(--step-2);
  font-family: var(--font-family-2);
}

/* MARK: list items */
li:first-child {
  background-image: url("../img/jananjer.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
  transform: rotate(5deg);
}

li:nth-of-type(2) {
  background-image: url("../img/febviool.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
}

li:nth-of-type(3) {
  background-image: url("../img/marnarcis.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
  transform: rotate(-10deg);
}

li:nth-of-type(4) {
  background-image: url("../img/aprmadelief.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
  transform: rotate(3deg);
}

li:nth-of-type(5) {
  background-image: url("../img/meilily.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
}

li:nth-of-type(6) {
  background-image: url("../img/junroos.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
  transform: rotate(-3deg);
}

li:nth-of-type(7) {
  background-image: url("../img/julridder.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
  transform: rotate(-5deg);
}

li:nth-of-type(8) {
  background-image: url("../img/auggladiool.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
  transform: rotate(10deg);
}

li:nth-of-type(9) {
  background-image: url("../img/sepaster.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
}

li:nth-of-type(10) {
  background-image: url("../img/oktgouds.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
  transform: rotate(9deg);
}

li:nth-of-type(11) {
  background-image: url("../img/novchrysant.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
}

li:nth-of-type(12) {
  background-image: url("../img/dechulst.png");
  background-size: var(--background-size);
  background-repeat: var(--background-repeat);
  list-style: var(--list-style);
  padding-inline-start: var(--padding-inline-start);
  transform: rotate(-6deg);
}

/* MARK: toggles/buttons */

html:has([value="auto-theme"]:checked) {
  color-scheme: light;
  background-image: url(../img/papertexture.jpg);
}

html:has([value="light-theme"]:checked) {
  color-scheme: light;
  background-image: url(../img/papertexture.jpg);
}

html:has([value="dark-theme"]:checked) {
  color-scheme: dark;
  background-image: url(../img/blackpapertexture.jpg);
}

label {
  font-size: var(--step-1);
  cursor: url(../img/cursor.png), crosshair;
}

label:focus {
  color: var(--accent-color-text);
  border: var(--border);
  border-radius: var(--border-radius);
}

button {
  font-size: var(--step-2);
  font-family: var(--font-family);
  color: rgb(72, 0, 30);
  border-radius: var(--border-radius);
  border: var(--border);
  box-shadow: 5px 5px 10px 2px rgb(94, 23, 52);
  background-color: #b6c877;
  cursor: url(../img/cursor.png), crosshair;
  margin-bottom: 2em;
  transition: 0.3s ease-out;
  width: 95%;

  &:hover {
    transform: scale(1.05);
    color: rgb(245, 0, 102);
    background-color: var(--accent-color1);
  }
}

button:focus {
  border: var(--border);
  border-radius: var(--border-radius);
}

dialog form {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

dialog form p {
  grid-column: 1/-1;
}

.openNotice {
  grid-column: 1/-1;
  width: 300px;
  /* text-wrap: nowrap; */
  margin: 0 auto;
  /* justify-content: center; */
}

/*MARK: JAN */

.mainjan {
  background-image: url("../img/jananjer.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainjan h2 {
  text-align: var(--text-alignment-bloem);
}
/* MARK: FEBRUARI */

.mainfeb {
  background-image: url("../img/febviool.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainfeb h2 {
  text-align: var(--text-alignment-bloem);
}

/* MARK: MAART */
.mainmar {
  background-image: url("../img/marnarcis.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainmar h2 {
  text-align: var(--text-alignment-bloem);
}

/* MARK: APRIL */
.mainapr {
  background-image: url("../img/aprmadelief.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainapr h2 {
  text-align: var(--text-alignment-bloem);
}

/* MARK: MEI */
.mainmei {
  background-image: url("../img/meilily.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainmei h2 {
  text-align: var(--text-alignment-bloem);
}

/* MARK:JUNI */
.mainjun {
  background-image: url("../img/junroos.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainjun h2 {
  text-align: var(--text-alignment-bloem);
}

/* MARK:JULI */
.mainjul {
  background-image: url("../img/julridder.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainjul h2 {
  text-align: var(--text-alignment-bloem);
}

/* MARK:AUGUSTUS */
.mainaug {
  background-image: url("../img/auggladiool.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainaug h2 {
  text-align: var(--text-alignment-bloem);
}
/* MARK:SEPTEMBER */
.mainsep {
  background-image: url("../img/sepaster.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainsep h2 {
  text-align: var(--text-alignment-bloem);
}
/* MARK:OKTOBER */
.mainokt {
  background-image: url("../img/oktgouds.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainokt h2 {
  text-align: var(--text-alignment-bloem);
}
/* MARK:NOVEMBER */
.mainnov {
  background-image: url("../img/novchrysant.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.mainnov h2 {
  text-align: var(--text-alignment-bloem);
}
/* MARK:DECEMBER */
.maindec {
  background-image: url("../img/dechulst.png");
  min-height: var(--min-height);
  background-size: var(--background-size-bloem);
  background-repeat: var(--background-repeat-bloem);
  background-position: var(--background-position-bloem);
}

.maindec h2 {
  text-align: var(--text-alignment-bloem);
}