/* A crude reset for a simple document */
html {
    box-sizing: border-box;
 }
 *, *::before, *::after {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
 }
/*==== END OF STYLE RESET ====*/
/*previous fonts:
body, font-family: 'Work Sans', Arial, Helvetica, sans-serif;
headings font-family: 'Covered by Your Grace', Arial, Helvetica, sans-serif;
*/

/* ======== MY STYLING RULES ========= */
:root {
   --base-color: #F2C6C2; 
   --text-color: #1a1a1a;
   --secondary-base-color: #FBEDEC;
   color-scheme: light dark;
   --base-color: light-dark(#F2C6C2, #A62E2E); 
   --text-color: light-dark(#1a1a1a, #fffdfd);
   --secondary-base-color: light-dark(#FBEDEC, #561818);
}

body {
   color: var(--text-color);
   background-color: var(--base-color);
   font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
}

header, main, aside, footer {
   max-width: 90vw;
   margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
   font-family: 'Atma', Arial, Helvetica, sans-serif;
   text-wrap: balance;
}

h1 {
   font-size: 3rem;
   font-size: clamp(3rem, 2.7rem + 1.5vw, 4.5rem);
   font-weight: 600;
   text-align: center;
   max-width:90vw;
   margin: 1em auto;
}

h2 {
   font-size: 2.5rem;
   font-size: clamp(2.5rem, 2.3rem + 1vw, 3.5rem);
   font-weight: 500;
}

h3 {
   font-size: 2rem;
   font-size: clamp(2rem, 1.8rem + 1vw, 3rem);
   font-weight: 400;
}

p, dd {
   line-height: 1.5em;
   font-size: 1.2rem;
   font-size: clamp(1.2rem, 1.18rem + 0.10000000000000009vw, 1.3rem);
   font-weight: 500;
   padding: 0.5em 0.5em 0.5em 1em;
   margin: 0 0.5em 0 0;
   background-color: var(--secondary-base-color);
}

p:last-of-type {
   margin-bottom: 3em;
}

/* ==== TOGGLE STYLING ==== */
input {
   display: none;
}

.toggle {
   width: auto;
   line-height: 1; 
}

input + .toggle + ul {
   display: none;  
}

ul {
   background-color: var(--secondary-base-color);
   padding: 0.5em 0.5em 0.5em 1em;
   margin: 1em 0.5em 0 0;
   width: 100%;
}

li {
   list-style: none;
}

input:checked + .toggle + ul {
   display: inline-block; 
   line-height: 1.5em;
   font-size: 1.2rem;
   font-size: clamp(1.2rem, 1.18rem + 0.10000000000000009vw, 1.3rem);
   font-weight: 500;
}

label:hover {
   cursor: pointer;
}

/* add plus icon as generated content */			
label::before {
	content: ' ';
	position: relative;
   float: left;
	top: 15px;
   left: -5px;
	width: 20px;
	height: 20px;
	margin: 0 7px;
	border: 0;
	background: var(--text-color);
	clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
	transform-origin: center;
	transition: transform .2s ease-out;
	transform: rotate(45deg);
}

/* rotate icon once checked */
input:checked + label::before {
	transform: rotate(0);
}

/* ==== LINK STYLING ==== */
a:link, a:active, a:visited {
   text-decoration: underline;
   color: var(--text-color);
   font-weight: 700;
}

a:hover {
   text-decoration: underline 4px;
   color: var(--text-color);
}


/* ==== FOOTER STYLING ==== */
footer{
   text-align: center;
   padding: 0.5em;
   background-color: var(--secondary-base-color);
   margin-top: 2em;
}

/* ==== RESPONSIVE ==== */
@media(min-width: 900px){
   body{
      max-width: 90vw;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 3fr 1fr;
      grid-template-rows: auto;
      grid-template-areas:
      "header header"
      "main aside"
      "footer footer";
      grid-gap: 20px 40px;
   }
   header{
      grid-area: header;
   }
   main{
      grid-area: main;
      border-right: 5px solid var(--text-color);
      padding-right: 1em;
      width: 100%;
      height: auto;
   }
   aside{
      grid-area: aside;
   }
   footer{
      grid-area: footer;
   }
}