:root {

    --page-link-height: 7em;

    --page-link-width:7em;

    --page-link-gap:2em;

    --page-link-color: hsl(188, 97%, 13%);

}



main {

    margin:0em auto;

    padding: 0 2em 2em 3em;

    max-width: 80em;

    color: #36454f;
    color: hsl(224, 100%, 20%);

}



.banner {

    position: relative;

    width: 100%;

}

.content {

    text-align: left;

}

.left {

    display: inline-block;

    vertical-align: top;

    margin: 0 auto;

    width:30%;

    min-width:15em;

    padding:1.5em 1.5em 0 1.5em;

}

.left img {

    width:65%;

}

.right {

    display: inline-block;

    vertical-align: top;

    width:50%;

    min-width: 20em;

    padding:1.5em 1.5em 0 1.5em;

}

.zinger-decoration {

    border-top: 1px solid rgba(0, 0, 0, 0);

    border-left: 1px solid hsl(224, 100%, 20%);

    border-bottom: 1px solid rgba(0, 0, 0, 0);

    border-right: 1px solid hsl(224, 100%, 20%);

    margin:4px;

}

.zinger-decoration>.zinger-decoration>.zinger-decoration {

    padding: 10%;

}

.zinger {

    border: 2px solid hsl(224, 100%, 20%);

    font-size: 2em;

    font-weight: bold;

    text-align: center;

    color: #36454f;
    color: hsl(224, 100%, 20%);

}

.menu {

    display:block;

    line-height: 4em;

    text-align: center;

}

button {

    background-color: hsl(224, 100%, 80%);

    color: black;

}

.page_link {

    display:inline-block;

    vertical-align: top;

    line-height: 1em;

    height: 5em;

    width: 5em;

    margin: 0 0.5em 0.5em 0.5em;

    border: 2px solid black;

}

.page_link.active {

    border: 5px double black;

}

.highlight {

    display:inline-block;

    margin: 0.5em auto;

    font-size: 1.4em;

    line-height: 1.2em;

}



.left .portrait {

    margin: 0 0 1em 0;

    width: 100%;

    height: auto;

}



.page-title {

    display: block;

    margin-top: 0;

    margin-bottom: 0.83em;

    font-size: 1.5em;

    font-weight: bold;

    text-align: center;

    color: hsl(224, 100%, 15%);

}



h3 {

    margin:0.2em;

}



h4 {

    margin-bottom:-0.5em;

}



.page-title {}



ul>li {

    list-style-type: none;

    line-height: 1.4;

}

.question {

    position: relative;

    /*background-color: hsl(142, 76%, 61%, 0.2);*/
    background-color: hsl(40, 55%, 80%, 0.5);
    background-color: hsla(40, 100%, 88%, 0.3);

    padding: 0.1em 4.5em 0.1em 0.1em;

}

.framed {

    text-align: center;

}

.mark {

    position:absolute;

    right:0.5em;

    color: #36454f;

}

.mark::after {

    content: "?";

    font-size: 9em;

}

body {

    font-size: 130%;

    background-color: #ffffff;

}



summary:hover {

    cursor: pointer;

}

summary {

    text-indent: -1em;

    padding-left: 1.5em;

    font-weight: bold;

    color: black;

}

details > p {

    padding-left: 2.5em;

    margin-top: 0.3em;

}

details  ol {

    padding-left: 3.5em;

    margin-top: -0.5em;

}



.form {

    border: solid 1px hsl(161, 81%, 45%);

    margin-bottom:1em;

}



.save {

    opacity: 0.8;

    background-image:  linear-gradient(135deg, rgba(255, 239, 150, 0.51) 25%, transparent 25%), linear-gradient(225deg, rgba(255, 239, 150, 0.51) 25%, transparent 25%), linear-gradient(45deg, rgba(255, 239, 150, 0.51) 25%, transparent 25%), linear-gradient(315deg, rgba(255, 239, 150, 0.51) 25%, rgba(255, 255, 199, 0.43) 25%);

    background-position:  4px 0, 4px 0, 0 0, 0 0;

    background-size: 4px 4px;

    background-repeat: repeat;



    background: linear-gradient(90deg, 

                rgba(255,255,200,1) 0%, 

                rgba(255,255,200,1) 2%, 

                rgba(255,255,150,0.6) 5%, 

                rgba(255,255,170,0.5) 5%, 

                rgba(255,255,200,1) 13%, 

                rgba(255,255,200,1) 94%, 

                rgba(255,255,170,0.7) 94.5%, 

                rgba(255,255,200,1) 95.5%, 



                rgba(255,255,200,1) 95.5%, 

                rgba(255,255,170,0.7) 96%, 

                rgba(255,255,200,1) 97%, 



                rgba(255,255,200,1) 97%, 

                rgba(255,255,200,0.7) 97.5%, 

                rgba(255,255,200,1) 98%);

}

.shhhh {

    position: fixed;

    pointer-events: none;

    top:13em;

    z-index: 10;

    font-size: 1.5em;

    color: rgba(231, 79, 124, 0.65);

    animation: 20s linear 0s infinite slidein;

}

@keyframes slidein {

    from {

      /* pushes the sun down past the viewport */

      transform: translateX(80vw) rotate(-60deg);

    }

    to {

      /* returns the sun to its default position */

      transform: translateX(-80vw) rotate(-60deg);

    }

  }



@media (max-width: 1000px) {

    main {

        padding:0;

    }

    body {

        font-size: 90%;

    }

    .right {

        min-width: 12em;

        width:90%;

    }

    .left {

        width: 90%;

    }

}



.parchment {

    /* box-shadow: 2px 3px 20px black, 0 0 125px #b18960 inset; */
    box-shadow: 2px 3px 20px black, 0 -3px 125px hsl(40, 40%, 80%) inset;

    /* background: #fffbbf; */
    background:  #fffaf9;
    

    /* v2.2 : Noise added for a vellum paper effect */

    background-image: url(data:image/png;base64,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);

  }