/*fonts*/
@font-face {
  font-family: "Amelia Handwriting";
  src: local("Amelia Handwriting"), url(/resources/AmeliaHandwriting.ttf);
  font-style: normal;
}

@font-face {
  font-family: "Adi Handwriting";
  src: local("Adi Handwriting"), url(/resources/AdiHandwriting2-Regular.otf);
  font-style: normal;
}

@font-face {
  font-family: "Saigon";
  src: local("Saigon"), url(/resources/SaigonSans-Light.ttf);
  font-style: normal;
}

@font-face {
  font-family: "Saigon";
  src: local("Saigon"), url(/resources/SaigonSans-LightItalic.ttf);
  font-style: italic;
}

@font-face {
  font-family: "Saigon";
  src: local("Saigon"), url(/resources/SaigonSans-SemiBold.ttf);
  font-style: oblique;
}

/* layout */
.layout-grid {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: minmax(100px, 80%);
  gap: 3px;
  margin: 1% auto;
  width: 65%;
  height: 100%;
  justify-content: center;
}

#item-0 {
  /*   background-color: #f8b874; */
  border-radius: 2px;
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 2;
}

#item-1 {
  /*background-color: #ffcc8e;*/
  background-color: #bd4945;
  border-radius: 15px;
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 2;
}

#item-2 {
  background-color: #ffe2a7;
  border-radius: 25px;
  margin: 2% 0px 0px;
  padding: 1em 5%;
  grid-row-start: 3;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 2;
}
/* general page formatting */

body {
  margin: 0px;
  padding: 0px;
  display: block;
  height: 100%;
  background-color: #c35e76;
  background-image: url("/resources/images/light-paper-fibers.png");
  font-family: "Saigon", sans-serif;
  color: #983f28;
}

.img {
    width: 100%;
}

/* text formatting */
h1 {
  font-family: "Amelia Handwriting", cursive;
  line-height: 1.15em;
  color: #bd4945;
  /*   color: #ca4d6d; */
  /*text-shadow: #7b3108 .75px 1px 1px;*/
  text-decoration: wavy #e8892a 2.5px underline;
  text-underline-offset: 3px;
}

h2 {
  font-family: "Adi Handwriting", cursive;
  font-size: 2.75em;
  color: #ca4d6d;
}

h3 {
  font-family: "Amelia Handwriting", cursive;
  font-size: 1.5em;
  line-height: 1.15em;
  color: #ca4d6d;
}

h4 {
  font-family: "Adi Handwriting", cursive;
  font-size: 2em;
  color: #ca4d6d;
  margin: 1% auto;
}

.answer {
   margin: 2% auto;
}

.adi-hw {
   font-family: "Adi Handwriting", cursive;
   font-size: 1.55em;
}

.amelia-hw {
   font-family: "Amelia Handwriting", cursive;
   font-size: 1.25em;
}

ul {
  list-style-type: "❀";
}

li {
  padding: 1%;
  color: #8a4ba9;
}
  a {
    color: #db450e;
    text-decoration: underline;
    text-decoration-style: dotted;
  }
/* Banner and Navigation */

.banner {
  width: fit-content;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* -webkit-filter: drop-shadow(5px 5px 5px #222); */
  filter: drop-shadow(-3px 3px 3px #6a35d3cd)
    drop-shadow(3px -3px 5px #d74e0fcd);
}

.nav {
  ul {
    list-style-type: none;
    display: flex;
    list-style-type: "❀";
    list-style-position: inside;
    margin: 2% 2%;
    font-size: min(5vw, 1.5em);
    align-content: center;
    padding-inline-start: 0;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
  }

  li {
    padding: 2%;
    color: #ffc0fe;
    filter: drop-shadow(1px 1px 0px #690734);
    /* font-size: max(5vw, 1.5em); */
    font-family: "Amelia Handwriting";
  }
  a {
    color: #ffd3a1;
    text-decoration: none;
  }
}

/* page-specific formatting */

/* RSVP */

iframe {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
}

/* info */

.announcement {
  display: block;
  background-color: #ffd3a1;
height: auto;
width: 100%;
padding: 2%;}

/* mobile */

@media (orientation: portrait) and (max-width: 750px) {
  .layout-grid {
    width: 90%;
  }
  h1 {
    font-size: 1.35em;
  }

  h2 {
    font-size: 1.65em;
  }

  h3 {
    font-size: 1.1em;
  }

  h4 {
    font-size: 1.5em;
  }

  li {
    padding: 0.5%;
  }
}