/* https://github.com/TarryDan/CSS-layouts */
/* Non commercial use only */

/* REPLACEMENTS &c*/

* {
	box-sizing:border-box;
}

body {
	height:100%;
}


/* TWO PANEL LAYOUT */

/* Everything on the page is in a MAIN */
    /* ASIDE is a sidebar */
    /* ARTICLE is the main flow of your content */
    /* SECTION divides the article into neat boxes */

main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

main > :first-child  {
  /* ↓ The width when the sidebar _is_ a sidebar */
  flex-basis: 30em;
  flex-grow: 1;

}

main > :last-child {
  /* ↓ Grow from nothing */
  flex-basis: 0;
  flex-grow: 999;
  /* ↓ Wrap when the elements are of equal width */
  min-inline-size: 50%;

}

/* This produces a narrow sidebar. If you want the panels to be more 50/50 use these code blocks instead: 

main > :first-child  {
  flex-basis: 30rem;
  flex-grow: 1;
  height:100%;
}

main > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 35%;

*/


main > * {
	padding:2vw;
}

/* These rules for images are so images in your sidebar section will do the right behaviour. You may need to tinker with this to get your preferred result */

aside img {
    width: 30em;
    max-width: 100%;
}

aside img.clock {
    aspect-ratio: 215/194;
    max-width: 140%;
}
aside img.dragon {
    transform:scaleX(-1);
    aspect-ratio:15/26;
    width:fit-content
}

/* What does the sidebar look like*/
aside {
	margin-left:2vw;
	position:sticky;
	top: 0;
	display:flex;
    flex-direction: column;
	justify-content: flex-start;
    align-items: center;
}


/* Make it mobile responsive! */
/* (sidebar does not stick on mobile) 900px*/

@media screen and (max-width: 1100px) {
	aside {
		position: static;
	}
}

/* FIX */

/* h1s in sections end up too small by default so set it explicitly if you wish */

section h1 {
    font-size: 3em;
}
/* Magpie edits */
            

            body {
                background-image: url(../bg/bg.JPG);
                background-size: cover;
                background-attachment: fixed;
                color: goldenrod;
                font-family: 'benne';
                line-height: 1.5;
                background-color: #4f612b;
            }


            section {
                border-radius: 20px;
                border: goldenrod 15px solid;
                padding: 1em;
                background-color: #324807;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            h1, h2, h3, .back, .subtitle {
                font-family: 'Albertus';
                text-align: center;
                
            }

            section h1 {
                font-size: 4em;
                line-height: 1;
                margin-bottom: 0;
                overflow-wrap: break-word; 
            }

            section h3, .back {
                font-size: 2em;
            }

            .subtitle {
                margin-top: 0;
                display: block;
                font-size: 2em;
            }

            .instructions {
                font-family: monospace;
                display: block;
                text-align: center;
            }
            p, ul, ol {
                font-size: 1.5em;
            }

            p {
                padding-left: 2vw;
                padding-right: 2vw;
                text-align: justify;
            }

            blockquote {
                font-family: 'Courier New', Courier, monospace;
                font-size: 1em;
                line-height: 1.5;

            }

            ul, ol{
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding-left: 2vw;
                padding-right: 2vw;
                width: 100%;
            }


aside {
    /*background-image: url(../bg/spiralgif-clock.gif);
    background-size: 100% auto;
    background-position: left top;
    background-repeat: no-repeat;*/
}

ul {
    max-width: 40ch;
}

ul li, ol li {
    margin-bottom: 1em;
    margin-right: 0.2em;
    margin-left: 0.2em;   
}

ul li::after, ol li::after {
    content: '\2042'; 
    display: block;
}

ul.no-marker li::after {
    content: '';
  }

ul li::marker {
    content: none;
}


a {
    color:chocolate;
    font-family: 'Roboto Condensed';
}

a:visited {
    color:#fb9348;

}

a:hover {
    color:rgb(255, 174, 0);
}

.back {
    display: block;
}

.back:before {
    content: '☙ ';
}

ul .instruct {
    display: block;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #553d39 #896a5f;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #896a5f;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #553d39;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }