/*
Other Google Fonts I liked for this page:
Caveat, Permanent_Marker, Shadows_Into_Light, Winky_Rough, Work_Sans
Use Google-Webfonts-Helper or Bunny Fonts to download the web versions so you can self-host.
(Google Font lets you download the TTF files for installation on a PC, but not the web versions.)
*/

/*
CHECK THIS OUT: https://caniuse.com/
https://hicks.design/about/

Color site you've used before:
http://paletton.com
*/

/*
For paddings and margin, that guy recomments 'em' as a unit.
For width, he says "em" or "percent".
*/

/* This is a standard section to set the box-sizing calculation in a sane way. */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/*
First of all, you have a @font-face ruleset at the start of the CSS, which specifies the font
file(s) to download:

@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}

See this page (where this came from) for more important info:
   https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
*/

/* winky-rough-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Winky Rough';
  font-style: normal;
  font-weight: 400;
  src: url('winky-rough-v3-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
   font-family: Winky Rough, Tahoma, Verdana, Arial, sans-serif;
   font-size: 16px;
   color: #333;
   background-color: #d7792a;
   background-image: url('image1-50p.webp');
   background-repeat: repeat;
   background-attachment: scroll;
   background-position: top;
   background-size: cover;
}

a,
a:hover,
a:focus {
   color: #d7792a;
}

/* typography */

img {
   /* These settings keep images from messing up the responsiveness. */
   display: block;
   max-width: 100%;
   height: auto;
}

dl {
  display: grid;
  grid-gap: 4px 16px;
  grid-template-columns: max-content;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0;
  grid-column-start: 2;
}

.paper {
   width: 85%;
   max-width: 1250px;
   min-width: 300px;
   background-color: #e1e0dc;
   background-image: url('paper-tileable.webp');
   margin: 5rem auto;
   /*
   background-image: url('white-construction-paper-texture-portrait-tiled.webp');
   background-image: url('white-construction-paper-texture.jpg');
   background-image: url('watermarked-paper-2.png');
   */
   background-repeat: repeat;
   background-attachment: scroll;
   background-position: top;
   background-size: contain;
   padding: 3rem;
}

.highlight-box {
   width: 100%;
   margin: 20px auto;
   background-color: #ddd;
   border: solid 3px #333;
   padding: 2em;
}

.highlight-box ul {
   max-width: 50%;
   margin: 0 auto;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }

hr { width: 80% }

/*
p {
   font-family: Garamond, serif;
}
*/

/*
The following fonts are the best web safe fonts for HTML and CSS:

Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)
*/

/*
.topnav {
  overflow: hidden;
}
*/

nav ul {
   /* border: 1px solid magenta; */
   font-size: 1em;
   list-style: none;
   padding: 0px;
   display: flex;
   justify-content: flex-start;
   justify-content: center;
}

nav li {
   /* border: 2px solid black; */
   margin: 0;
   padding: 0.2em 0.4em;
}

nav a {
  /* border: 1px solid green; */
  color: #333;
  text-align: center;
  text-decoration: none;
}

nav a:hover,
nav a:focus {
   color: #d7792a;
}

.current-page {
   border-bottom: 2px solid #d7792a;
}

.current-page:hover {
  color: #333;
}

button {
   background: none;
   border: solid 2px #333;
   padding: 0.6em;
}

/*
FIND OUT HOW TO INHERIT STUFF FROM ONE CLASS TO ANOTHER!
FIND OUT HOW TO INHERIT STUFF FROM ONE CLASS TO ANOTHER!
FIND OUT HOW TO INHERIT STUFF FROM ONE CLASS TO ANOTHER!
*/

.bg-banner-bible-study {
   background-image: url('bible_study_mos.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

.bg-sanctuary {
   background-image: url('gray-sanctuary.png');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
}

.center {
   text-align: center;
}

.legal {
   font-size: 0.75rem;
}

.legal-bar {
   color: #ddd;
   background-color: #333;
   padding: 0.3rem 0px;
   width: 75%;
   margin: 20px auto 0px auto;
}

.legal-bar a {
  color: #ddd;
  text-decoration: none;
}

/*
.legal-bar a:hover {
  color: #ddd;
}

.legal-bar a.active {
  color: #ddd;
}
*/

@media screen and (max-width: 500px)
{
   .paper {
      padding: 1rem;
      margin: 2.5rem auto;
   }
}

@media screen and (max-width: 595px)
{
   dl {
      display: block;
   }
}

@media screen and (max-width: 750px)
{
   .highlight-box ul {
      max-width: 100%;
   }
}

@media print
{
 body {
    background-color: white;
    color: black;
  }
}