/* Aromatic v.1 - rosemintea [http://aromatic.selkie.nu] */
/* TABLET VERSION */
/* made by Rin (rin AT 315 DOT network); licenced under Creative Commons Attribution-ShareAlike 4.0 International: http://creativecommons.org/licenses/by-sa/4.0/ */


/*

      hand-coding is learned by viewing already existing code. end of story.
      you are so, so welcome to look at, mess around with, and learn from my code (although
      not copy it verbatim, but honestly, who's going to do that?), with a caveat:
      be aware it may not be perfect, because coding is a consistent learning process for me!

      that's literally it!
      please enjoy perusing my code, and I hope it inspires your own!
      love, Rin

*/

html,
body {
      font-size: 16px; /* base font reset */
      margin: 0;
      padding: 0;
      height: 100%;
      background: url("bg.png") repeat #efedec;
}

strong {color: #d68981; letter-spacing: 0.06rem;}
em {color: #5a534a; }
a:link, a:visited, a:active {color: #57bbb1; text-decoration: none;}
a:hover {color: #fcaba4; border-bottom: 1px dashed #becfcb; text-decoration: none;}

.grid-container {
  display: grid;
  grid-template-columns: auto minmax(320px, 900px) auto;
  grid-template-rows: max-content max-content auto max-content;
  gap: 0px 0px;
  grid-template-areas: ". header ." ". nav ." ". main ." ". footer .";
  margin-left: auto;
  margin-right: auto;
}

header { grid-area: header; text-align: center;}

nav { background-color: rgba(117, 212, 202, 0.2); border-radius: 30px; border: 1px dotted #ecccc4; grid-area: nav; text-align: center; font-family: "Sail", cursive; font-size: 190%; word-spacing: 1rem; padding: 1vw; margin: 1vw;}
nav a:link, nav a:visited, nav a:active {color: #fcaba4; text-decoration: none;}
nav a:hover {color: #5fcdc2; text-decoration: none; text-shadow: 0px 0px 20px #fcaba4; border: 0;}

main {background:  url("bg.png") repeat #efedec; grid-area: main; text-align: justify; padding: 0 1vw 0 1vw; text-align: justify; color: #7f7568; line-height: 2rem; font-size: 90%; font-family: 'Fira Sans', sans-serif;}

h1 {font-size: 200%; font-family: 'Playfair Display', serif; font-weight: 400; color: #56cfc3; margin: 1rem 0 0.5rem 0; padding: 0; text-indent: 2rem; background: url(flower.png) left bottom no-repeat;}
h2 {font-size: 150%; font-family: 'Playfair Display', serif; font-weight: 400; color: #f0a39c; margin: 2rem 0 0 0; padding: 0; text-indent: 3.5rem; background: url(leaf.png) left top no-repeat;}

footer { grid-area: footer; text-align: center; font-family: "Playfair Display", serif; font-size: 75%; padding: 2vw; color: #969f8b; line-height: 1.5rem;}
footer em { color: #89917f; }


aside {display: flex; width: 60%; margin: 1vw auto 1vw auto; padding: 1rem; height: max-content; border-right: 1px dotted #8ac7c0;  border-bottom: 1px dotted #8ac7c0; background: url("flowerbg.png") bottom right no-repeat, url("bg2.png") repeat; font-size: 110%; box-shadow: 2px 2px 10px #dedada;}
aside strong {font-family: "Playfair Display", serif;}
aside a:link, aside a:visited, aside a:active {color: #8ac7c0;}
aside a:hover {color: #56cfc6; border-bottom: 0;}
aside p {margin: 0; text-indent: 0;}

.resize {
      max-width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(235, 193, 181, 0), rgba(235, 193, 181, 0.75), rgba(235, 193, 181, 0));
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

abbr { color: #89917f; cursor: help;}

.code {color: #777; font-family: "Courier New", monospace; text-align: center; font-size: 120%; margin-left: 1rem; margin-right: 1rem;}

.rules {margin-left: 2rem; margin-right: 2rem;}

.numbering { color: #fcaba4; font-weight: bold; font-family: 'Playfair Display', serif; letter-spacing: 0.2rem;}

textarea {width: 100%; height: 4rem; }

button {
  background-color: rgba(117, 212, 202, 0.2);
  border: none;
  color: #7f7568;
  padding: 0.5vw;
  margin: 0.25vw;
  font-weight: bold;
  font-family: "Playfair Display", serif;
  text-decoration: none;
  border: 1px dotted #57bbb1;
  cursor: pointer;
  width: 50%;
  text-align: center;
}


.mobile {display: visible;}