/* 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;
}

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

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

/*
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
*/

/*
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)
*/

@font-face {
  font-family: "Raleway Regular";
  src: url("/v1728244394/font-raleway-regular") format("truetype");
}

.main-colors {
   /*background-color: #580058;*/
   background-color: #100057;
   color: #fff;
}

/* HTML Element Styles */

body {
   background-image: url('/v1749140430/img-summer-bg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   font-size: 1.0em;
   font-family: "Raleway Regular", "Trebuchet MS", sans-serif;
}

div.outer-box {
   max-width: 1500px;
   margin: 0 auto;
}

form {
   margin: 10px;
}

p {
}

h1 {
   font-size: 1.65em;
}

h2 {
   font-size: 1.40em;
   margin-bottom: 0;
}

h3 {
   text-decoration: underline;
}

a {
   color: black;
   text-decoration: none;
   padding: 0px 5px;
}

a:hover {
  background-color: #ccc;
  color: black;
}

a:active {
    background-color: #ccc;
    color: black;
}

img {
   /* These two lines are the standard way to make images responsive. */
   max-width: 100%;
   height: auto;
}

div.urgent {
text-align: center; width: 80%; margin: 0px auto; border: 2px solid black; padding: 5px;
background-color: #e00; color: #eee
}

.mauve {
   color: #f7f;
}

div.special-event {
text-align: center; width: 80%; margin: 0px auto; border: 2px solid black; padding: 5px;
background-color: #100057; color: #eee
}

.special-event a {
   color: #f7f;
   text-decoration: none;
   padding: 0px 5px;
}

.special-event a:hover {
  background-color: #ccc;
  color: black;
}

.special-event a:active {
    background-color: #ccc;
    color: black;
}

.event-subtext a {
   color: #f7f;
   text-decoration: none;
   padding: 0px 5px;
}

.event-subtext a:hover {
  background-color: #ccc;
  color: black;
}

.event-subtext a:active {
    background-color: #ccc;
    color: black;
}

nav a {
   color: white;
     text-decoration: none;
     padding: 0px 5px;
}

nav a:hover {
  background-color: #ccc;
  color: black;
}

nav a:active {
    background-color: #ccc;
    color: white;
}

footer a {
   color: white;
     text-decoration: none;
     padding: 0px 5px;
}

footer a:hover {
  background-color: #ccc;
  color: black;
}

footer a:active {
    background-color: #ccc;
    color: white;
}

small {
   font-size: 75%;
}

header {
   text-align: center;
}

footer {
   text-align: center;
}

/* Class Styles */

/* .container is for the major layout-related vertically stacked blocks that float, centered on the background. */
.container {
   width: 92%;
   margin: 0 auto;
   border: none;
   padding: 0;
}

.nav-div {
/* This allows us to add padding. We can't add it to <nav> directly because its
width is set by percentage and padding in included in the item size.
Also, "background-color" didn't do anything when I assigned it to <nav>; maybe
that tag doesn't HAVE that attribute?
*/
   padding: 5px 5px 5px 5px;
   background-color: #2C0070;
   font-size: 1.1em;
}

/* container-top gives the top container block a top margin so it doesn't abut the top of the viewport. */
.container-top {
   margin-top: 20px
}

.bio-image {
   border: solid 2px black;
   float: left;
   clear: left;
   margin: 10px;
}

.floating-box {
   /*width: 85%;*/
   margin: 20px auto;
   background-color: #eee;
   border: solid 3px black;
   color: black;
   padding: 0;
   text-align: center;
}

.main-box {
   background-color: #480048;
   color: #fff;
}

/* A .floating-box cannot have padding because its width is set as a percentage, so .box-div acts as
 * an internal box that can provide a margin for the contents of any floating box that needs it. */
.box-div {
   margin: 10px 20px;
   overflow: hidden; /* VITAL FOR KEEPING AN IMAGE FROM STICKING OUT THE BOTTOM OF IT */
}

.mosaic-div {
   margin: 0;
   height: 160px; /* I HAVE NO IDEA WHY I HAVE TO SPECIFY THIS TO GET IT TO NOT BE TALLER THAN THE IMAGE */
   border: none;
   padding: 0;
   overflow-x: hidden;
   overflow-y: hidden;
   background-position: center;
   background-repeat: repeat-x;
}

.mosaic-img {
}

.home-mosaic {
   background-image: url("/v1728520389/img-home-mosaic");
}

.missions-mosaic {
   background-image: url("/v1727537859/img-missions-mosaic");
}

.bible-study-mosaic {
   background-image: url("/v1727537859/img-bible-study-mosaic");
}

.choir-mosaic {
   background-image: url("/v1727537859/img-choir-mosaic");
}

.strikeout {
   text-decoration: line-through;
}

.text-just {
   text-align: justify;
}

.text-left {
   text-align: left;
}

.button-link {
   display: inline-block;
   background-color: #fff;
   margin: 10px auto;
   padding: 10px 18px;
   border: 3px solid black;
   border-radius: 10px;
}

/*
.grid3 {
   display: inline-block;
   width: 25.33%;
   background-color: white;
   padding: 0 4%;
   border: none;
   margin: 0;
}
*/

.vspace {
   margin-top: 15px;
   margin-bottom: 15px;
}

.header-spacing {
   padding-top: 7px;
   padding-bottom: 10px;
}

.churchname-div {
   font-size: 2em;
}

.event-subtext {
   font-size: 85%;
}

.sermon-title {
   font-size: 85%;
}

.content-container {
}

/* Debug Styles */

.magenta {
   background-color: magenta;
}