@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Island+Moments&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body { font-family: Fraunces; line-height: 1.8em; margin: 0; font-size: 150%; display: flex; flex-direction: column; height: 100vh; }

header
{ background: #25AE86;
  background: linear-gradient(90deg, rgba(87, 174, 134, 0.3) 0%, rgba(37, 174, 150, 0.4) 100%);
  box-shadow: 0 0 0.5em #ccc;
  margin-bottom: 1em;
  padding: 0 calc(50vw - 450px);
  font-size: 56px; }

main { flex: 1; font-weight: 280; }

p, ul, h1, h2, h3, h4, h5, blockquote, details, .email, .warn {
  max-width: 900px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
}
header a { text-decoration: none; color: black; font-weight: inherit; }

.email { font-family: Roboto; font-size: 0.9em; width: 800px; padding: 0 50px; border-top: solid 0.1em silver; border-bottom: solid 0.1em silver; }
h1 { font-size: 2.5em; font-weight: 400; line-height: 0.95em; text-align: left; }
h2 { font-size: 1.75em; font-weight: 400; text-align: left; }
h3 { font-size: 1.5em; font-weight: 400; text-align: left; }
h4 { font-size: 1.25em; font-weight: 400; text-align: left; }
p { text-align: justify; }
a { color: #008c63; font-weight: 500; }
footer
{ background-color: #444;
  color: white;
  padding: 1em 0;
  font-style: italic;
  text-align: center;
  border-top: solid 1px silver; }

header { text-transform: uppercase; font-family: Montserrat; letter-spacing: 0.75ch; line-height: 1.2; text-align: center; font-weight: 300; padding: 1em; }
header small { display: block; letter-spacing: 2.5ch; font-weight: 500; font-size: 0.4em; }

.warn
{ font-size: 0.8em;
  font-family: Roboto;
  font-weight: 400;
  background-color: #07f1;
  border: solid 1px #07f5;
  border-radius: 1em;
  margin-bottom: 3em;
  padding: 0.1em 1em;
  line-height: 1.3em; }

blockquote { padding: 0 0; line-height: 1.1em; ; width: 800px; font-style: italic; font-size: 1.4em; margin: 0 calc(50vw - 400px) 1em calc(50vw - 400px); border-top: solid 0.2em #008463; border-bottom: solid 0.2em #008463; padding-right: 0; }
blockquote>* { font-weight: 400; text-align: center; padding: 0 50px; word-spacing: 0.2em; }
blockquote em { font-style: normal; font-size: 0.7em; display: block; margin-top: 1.5em; font-weight: 300; margin-left: 40%; line-height: 1.2em; word-spacing: 0; color: #444; text-align: right; width: 60%;}
blockquote em::before { content: '― ' }

details
{ font-size: 0.85em;
  margin-bottom: 3em;
  line-height: 1.75em;
  padding: 0;
  border-top: solid 0.15em #008c63;
  border-bottom: solid 0.15em #008c63; }
summary { cursor: pointer; background-color: #008c6320; padding: 0.5em 1em; font-weight: 400; }


audio { width: 900px; margin: 0 calc(50vw - 450px); }
ul { margin-bottom: 10em; }

li { padding-left: 1em; width: calc(900px - 1em); line-height: 1.5em; margin-left: auto; margin-right: auto; }

.chat { display: flex; font-size: 0.8em; flex-direction: column; gap: 6px; max-width: 800px; margin: 2em auto; font-family: Roboto; font-weight: 320; }
.sender, .recipient { display: inline-block; padding: 8px 14px; border-radius: 18px; max-width: 75%; word-wrap: break-word; line-height: 1.4; margin-bottom: 20px; }
.sender { align-self: flex-end; background-color: #008c63; color: white; border-bottom-right-radius: 4px; }
.recipient { align-self: flex-start; background-color: #008c6320; color: black; border-bottom-left-radius: 4px; }
.person { position: absolute; background-color: black; font-size: 0.7em; color: white; font-weight: bold; width: 1.3em; height: 1.3em; line-height: 1.5em; text-align: center; border-radius: 1em; margin-top: -1em; border: solid 1px black; }
.sender .person { right: calc(50vw - 444px); }
.recipient .person { left: calc(50vw - 444px); }
.time { font-size: 0.6em; display: block; position: absolute; margin-top: 10px; color: black; }
.sender .time { right: calc(50vw - 400px);  }
.recipient .time { left: calc(50vw - 400px);  }
.time .no { background-color: gray; color: white; padding: 0 0.5em; border-radius: 1em; }

.timeline { position: relative; height: 30em; width: 800px; margin: 2em 50vw 2em; width: 0; border-left: solid 0.2em black; }
.timeline::before { content: ''; position: absolute; margin-left: -0.175em; margin-top: -2em; height: 34em; border-left: dashed 0.2em black; }

.timeline>.dash, .timeline>.range { position: absolute; font-size: 0.7em; font-family: Roboto; width: 600px; }
.timeline>.dash:nth-child(even), .timeline>.range:nth-child(even) { margin-left: 2em; }
.timeline>.dash:nth-child(odd), .timeline>.range:nth-child(odd) { margin-left: calc(-2.7em - 600px); text-align: right; }
.timeline>.dash:nth-child(even)::before {
  content: "";
  position: absolute;
  left: -2em;
  top: 50%;
  width: 1.5em;
  height: 0.1em;
  background: black;
}
.timeline>.dash:nth-child(odd)::before {
  content: "";
  position: absolute;
  right: -2.4em;
  top: 50%;
  width: 1.5em;
  height: 0.1em;
  background: black;
}

.hash {
  margin-top: 1em;
  width: 0.3em !important;
  background: repeating-linear-gradient(45deg, #008c63, #008c63 1.4142px, transparent 2px, transparent 4.2426px);
  right: -0.3em;
  z-index: -1;
  position: absolute;
  overflow: visible;
}

.range::before { background-color: transparent !important; margin-left: 2em; }
.range { left: -1.2em; border-left: dashed 0.2em #008c63; padding-left: 0.3em; }

.expand {
  details { width: 600px; overflow: hidden; cursor: pointer; border: 1px solid #ccc; }
  details img { display: block; transition: clip-path 0.3s ease, max-height 0.3s ease; }
  details:not([open]) img { max-height: 100px; object-fit: cover; }
  details summary { list-style: none; height: 0; }
}

input, button { display: block; margin: 1em 0 1em calc(50vw - 470px); padding: 0.3em 1em; font-weight: 300; border-radius: 1em; border: solid 0.1em silver; font-family: Roboto; font-size: 1em; width: 20em; }
button { background-color: #008c63; color: white; border: solid 0.1em #008c63; width: 10em; }
form { margin-bottom: 4em; }
.code { width: 12ch; font-weight: bold; letter-spacing: 1ch; font-size: 1.6em; }

@media (hover: none) and (max-width: 1000px) {
  body {
    font-size: 40px; /* double the base font size */
  }
}

.calls {
  padding-left: 1em;
  width: calc(900px - 1em);
  height: 920px;
  line-height: 1.5em;
  margin-left: auto;
  margin-right: auto;
  & div { white-space: nowrap; }
  & .m { position: absolute; border: solid 1px #008c63; }
  & .c { position: absolute; border: solid 1px #8c0063; }
  & .l { position: absolute; font-family: Roboto; font-size: 0.5em; font-weight: 400; text-transform: uppercase; border-top: solid 1px #ddd; width: 900px; line-height: 1.3;  }
  & .y { position: absolute; font-family: Roboto; font-size: 0.5em; font-weight: 400; text-transform: uppercase; border-left: solid 1px black; height: 770px; padding-left: 5px; }
  & .s, .sa, .sm, .sw, .sh, .sf, .sx, .sg, .sp { position: absolute; background-color: #ff790080; border: solid 1px #ff7900; border-left: none; border-right: none; width: 0; padding-left: 22px; z-index: 2; overflow: hidden; white-space: nowrap; font-size: 0.5em; font-family: Roboto; line-height: 1.1em; }

  & .sa { background-color: #B0D0D3a0; border-color: #B0D0D3; }
  & .sg { background-color: #C08497a0; border-color: #C08497; }
  & .sf { background-color: #F7AF9Da0; border-color: #F7AF9D; }
  & .sx { background-color: #F7E3AFa0; border-color: #F7E3AF; }
  & .sm { background-color: #F3EEC3a0; border-color: #F3EEC3; }
  & .sh { background-color: #C6ECAEa0; border-color: #C6ECAE; }
  & .sw { background-color: #008c63d0; border-color: #008c63; }
  & .sp { background-color: #adabdbc0; border-color: #ADABDB; }
  & .sa>div, .sm>div, .sw>div, .sh>div, .sf>div, .sx>div, .sg>div, .sp>div { margin-left: 10px; background-color: #fffa; width: fit-content; }
  & .sa:hover, .sm:hover, .sw:hover, .sh:hover, .sf:hover, .sx:hover, .sg:hover, .sp:hover { overflow: visible; z-index: 4; background-color: black; border-color: black; }

  & .k1::before { width: 24px; height: 24px; background-color: #8c0063; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .k1 { position: absolute; margin-top: 800px; margin-left: 100px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }
  & .k2::before { width: 24px; height: 24px; background-color: #008c63; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .k2 { position: absolute; margin-top: 800px; margin-left: 300px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }
  & .k3::before { width: 24px; height: 24px; background-color: #ff790080; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .k3 { position: absolute; margin-top: 800px; margin-left: 500px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }

  & .ka::before { width: 24px; height: 24px; background-color: #B0D0D3a0; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .ka { position: absolute; margin-top: 800px; margin-left: 50px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }
  & .kw::before { width: 24px; height: 24px; background-color: #008c63d0; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .kw { position: absolute; margin-top: 800px; margin-left: 350px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }
  & .km::before { width: 24px; height: 24px; background-color: #F3EEC3a0; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .km { position: absolute; margin-top: 800px; margin-left: 650px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }
  & .kx::before { width: 24px; height: 24px; background-color: #F7E3AFa0; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .kx { position: absolute; margin-top: 840px; margin-left: 50px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }
  & .kp::before { width: 24px; height: 24px; background-color: #adabdbc0; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .kp { position: absolute; margin-top: 840px; margin-left: 350px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }
  & .kg::before { width: 24px; height: 24px; background-color: #C08497a0; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .kg { position: absolute; margin-top: 840px; margin-left: 650px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }
  & .kh::before { width: 24px; height: 24px; background-color: #C6ECAEa0; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .kh { position: absolute; margin-top: 880px; margin-left: 50px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }
  & .kf::before { width: 24px; height: 24px; background-color: #F7AF9Da0; content: ' '; display: block; position: absolute; margin-left: -32px; margin-top: 5px; }
  & .kf { position: absolute; margin-top: 880px; margin-left: 350px; font-family: Roboto; font-size: 0.65em; font-weight: 400;  }
}