html, body {  max-width: 1200px; margin: 0 auto; font-family: "Open Sans", sans-serif; font-size: clamp(0.875rem, 3.5vw, 1rem); color: #080808; background: #EDEDCB; }



img { max-width: 100%; height: auto; }

.logo, .rod { width: 100%; height: auto; }

@media screen and (max-width: 1000px) { .rod { width: 150px; height: auto; } }

.arrowUp { width: 50px; height: 50px; transform: rotate(180deg); }

.arrowDown { width: 50px; height: 50px; margin: 0px 0px 0px 20px; }

.book { width: 400px; height: auto; }

@media screen and (max-width: 900px) { .book { width: 300px; height: auto; } }



.floatR { margin: 20px; float: right; }

.floatL { margin: 20px; float: left; }

@media screen and (max-width: 700px) { .floatR, .floatL { padding: 20px 0px 20px; margin: 5%; float: left; width: 90%; height: auto; } }



#fadeout { height: 100px; position: fixed; bottom: 0; width: 100%; background: linear-gradient(to bottom, rgba(237,237,203,0) 0%, rgba(237,237,203,1) 90%); z-index: 3; }

@media screen and (max-width: 1200px) { #fadeout { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%); } } }



@keyframes slide {from { transform: translateX(100%); } to { transform: translateX(0); } }

div.sticky { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 4; animation: slide 0.9s ease-out; }



h1, h2, h3, h4, h5, h6 { font-family: "Libre Baskerville", serif; font-weight: 700; margin: 40px 0px 20px 10px; text-transform: capitalize; text-wrap: balance;}

h1 { font-size: clamp( 2.2rem, 3.5vw, 2.8rem); }

h2 { font-size: clamp( 1.8rem, 3.5vw, 2rem); }

h3 { font-size: clamp( 1.6rem, 3.5vw, 2rem); }

h4 { font-size: clamp( 1.2rem, 3.5vw, 1.4rem); }

h5 { font-size: clamp( 1.1rem, 3.5vw, 1.3rem); }



.center { text-align: center; }



p { text-align:justify; line-height: 150%; padding: 0px 10px; }



.page { width: 100%; background: #FFFFFE; padding: 10px 0px; }



#footer { background: #EDCE4A; overflow: hidden; border-radius: 6px; padding: 10px 0px; margin: 10px; }



#copyright { float: right; color: #000; margin: 3px 20px; font-size: clamp( 0.6rem, 3.5vw, 0.8rem); font-weight: bold; }



main{ width: 96%; margin: 0 auto; background: #FFFFFE; }



header { display: grid; grid-template-columns: 15% 85%; place-items: center; padding: 10px; margin: 0px 10px; background: #EDCE4A; border-radius: 6px; }

.wrapper { display: grid; grid-template-columns: 67% 33%; place-items: center; }

.wrapper2col { display: grid; grid-template-columns: 1fr 1fr; place-items: center; gap: 20px; margin: 0px 0px 20px 0px; }

@media screen and (max-width: 1000px) { .wrapper { grid-template-columns: 100%; } }

@media screen and (max-width: 700px) { header, .wrapper2col { grid-template-columns: 100%; } }



.padding { padding: 0px 20px; margin: -20% 0px 20px; }

@media screen and (max-width: 1000px) { .padding { padding: 0px 60% 0px 0px; margin: 0px 0px 20px; } }

@media screen and (max-width: 700px) { .padding { padding: 0px 40px; } }



details { background: #EDCE4A; margin: 0px 10px; border-radius: 6px; }

details > summary { font-weight: 900; text-decoration: underline; cursor: grab; padding: 8px 0px; margin: 4px 0px 4px 20px; color: #fffffe; text-wrap: balance; }

details > summary:hover { text-decoration: none; }



nav { list-style-type: none; margin: 10px; padding: 12px 12px 20px 12px; overflow: hidden; text-wrap: balance; border-radius: 6px; }

nav li { float: left; }

nav li a { display: inline-block; font-size: clamp(0.85rem, 3.5vw, 1rem); color: #fffffe; padding: 10px 10px; font-weight: 900; text-decoration: underline; }

nav li a:hover { color: #080808; background-color: #fffffe; border-radius: 6px; }

nav li a.active { color: #080808;  text-decoration: none; cursor: default;  pointer-events: none; background-color: #EDCE4A; border-radius: 6px; }