/*..........................................................................

	STUFF THAT I SUGGEST YOU KEEP

.......................................*/

/* ... but that i also suggest you
   customise to your own liking, and
   make entirely your own!!! */

/* makes the question bold */

details summary span{
   font-weight: bold;
}

/* question highlights on hover & focus */

details summary:hover span, 
details summary:focus span{
   color: darkcyan;
}

details summary span, 
details summary:hover span, 
details summary:focus span{
   transition: color .3s ease;
}

/* changes the cursor to pointer on hover */

summary:hover{
   cursor: pointer;
}

/*..........................................................................

	BEYOND THIS POINT, FEEL FREE TO DELETE!!!

.......................................*/

/*.................................

	basic styling, grid layout

..........................*/

body{
   font-family: sans-serif;
   max-width: 75svw;
   margin: 1em auto;
   display: grid;
      grid-template-areas: 'header header' 'nav main' 'footer footer';
      grid-template-columns: 20% 1fr;
      grid-template-rows: 5.5em 1fr 3em;
      gap: 1em;
      align-items: start;
   line-height: 1.5;
}

/* link colours */

a{
   color: darkcyan;
}

a:hover,
a:focus{
   color: darkblue;
}

/*................................

	header, the title at the top

..........................*/

header{
   grid-area: header;
   border: 0.1em solid gray;
   text-align: center;
}

/*................................

	navigation sidebar

..........................*/

nav{
   grid-area: nav;
   position: sticky;
      top: 1em; /* nav box stay on the page while you scroll */
   box-sizing: border-box;
   padding: 1em;
   padding-bottom: 2em;
   border: 0.1em solid gray;
   text-align: center;
}

/*..........................

   links in the sidebar

..........................*/

nav a{
   display: block;
}

nav a:not(:last-child){
   margin-bottom: 1em;
   /* puts space after every link */
   /* except the last one! */
}

/*..............................................

	the main text box

..........................*/

main{
   grid-area: main;
   height: 100%;
   padding: 1em 2em;
   padding-right: 4em;
   box-sizing: border-box;
   border: 0.1em solid gray;
}

h2,
h3{
   text-align: center;
   text-decoration: underline;
}

li{
   max-width: 90ch;
   /* makes the list text wrap at 90 characters */
   /* it's easier to read this way, */
   /* but you may want to change it */
   /* for your own layout! */
}

/*...........................................................

   displays sections from "main" when clicking links in "nav"

..........................*/

main section{
   display: none;
}

main section:target{
   display: block;
}

#intro{
   display: block;
}

/*..............................

	the footer at the bottom

..........................*/

footer{
   grid-area: footer;
   padding: 0.5em;
   border: 0.1em solid gray;
   text-align: center;
}