/* This is the CSS file for index.html */
banner {
  background-color: #3e67d6 !important; /* Banner background color */
  background-image:linear-gradient(to left, #3e67d6, #3e67d6);
  text-align: center;         /* Centered content */
  padding: 12px 20px;         /* Vertical and horizontal spacing */
  font-family: 'Comic Sans MS';    /* Clean typography */
  font-size: 16px;            /* Readable text size */
  color:gainsboro !important;

}

banner p {
  margin: 0;                  /* Removes default browser margins */
}

banner a {           
  text-decoration: underline; /* Makes the link clear */
  color:white !important;
  font-weight: bolder;          /* Highlights the link */
}
body{
    /* RESET ALL MARGINS! */
    margin:0; 
    padding:0;
    /* Background colors ? */
    background-color: rgb(243, 198, 182);
    /* Text styles */
    font-family: 'Comic Sans MS';
    color:white;

    /* Flexbox */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Takes full viewport height */
    margin: 0;
    /* Etc Etc Stick */
}
/* NO MORE SCROLLBARS!!! */
body::-webkit-scrollbar {
  display: none;
}
body {
  scrollbar-width: none;
}
/* SELECTION */
body::selection{
    background-color: yellow;
}
main{
    display:grid;
    flex-direction:column;
    place-items: center;
}
/* Everything else */
h1, p, h2, h3, h4, h5{
    padding:5px;
    margin:0;
    text-align:center;
    color:black;
}
p{
    font-size:21px; /* Makes text easier to read */
}
smalltext{
    font-size:10px;
    padding:0;
    margin:0;
    text-align:center;
}
/* Extra Scripts */
.hello{
    border-radius:12px;
    color:black;
    background-color: gainsboro;
    margin:20px;
    padding:10px;
}
.hello.hellolite{
    display:inline-block;
}
.hello.hello2{
    max-width:62%;
}

.bulletin{
    border-radius:12px;
    color:black;
    background-color: #9e6536; /* Bulletin color */
    padding:7px;
    display:flex;
    flex-direction:column;
    gap:3px;
    max-width: 60%;
}
iframe[name="smallwood"]{
    border-radius: 12px;
    width:100%;
    height:100%;
}
.wall{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}
.announcement{
    border-radius:12px;
    color:black;
    background-color: #FFFFFF; /* Bulletin color */
    margin:5px;
    padding:3px;
    text-align:left;
}
.announcement h2{
    text-align:center;
}
.heading{
    text-align: center;
}
.goose{
    color:darkorange;
    -webkit-text-stroke:0.5px black;
    font-weight: bolder;
    cursor:pointer
}
.text-region{
    margin: 0 auto;
}
.text-region p {
    text-align:left !important;
}
#image{
    text-align:center;
    border-radius:20px;
}
#repent{
    background-color:lightcoral;
    border:0px solid transparent !important;
    border-radius: 10px;
    padding:7px;
    cursor:pointer;
    text-align: center;
    font-family: 'Comic Sans MS';
    font-weight: bolder;
    transition: transform 0.3s ease;
    font-size:21px;
    color: #333333;
}
button { color: #333333 !important }
#repent:hover{
    background-color: rgb(249, 27, 27);
    transform: scale(1.1);
    color:white;
    -webkit-text-stroke:0 !important;
}
.izzo{
    transition:transform 0.5s ease;
}
.izzo:hover{
    transform: scale(1.5)
}
.format{
    max-width:45vh;
    display:block;
}
.slidevideo{
    margin-top:10px;
    display:flex;
    flex-direction:row;
    justify-content:center;
}
.youtube{
    font-family: 'Comic Sans MS';
    background-color:green;
    border:0px solid transparent !important;
    border-radius:10px;
    text-align:center;
    font-weight:bolder;
    transition: transform 0.3s ease;
    font-size:16px;
    padding:7px;
}
.youtube:hover{
    background-color: darkgreen;
    transform: scale(1.1);
    color:white;
    -webkit-text-stroke:0 !important;
    cursor:pointer;
}
.slides{
    font-family: 'Comic Sans MS';
    background-color:dodgerblue;
    border:0px solid transparent !important;
    border-radius:10px;
    text-align:center;
    font-weight:bolder;
    transition: transform 0.3s ease;
    font-size:16px;
    padding:7px;
}
.worshipper{
    transition: transform 0.5s ease;
}
.worshipper:hover{
    cursor:pointer;
    transform: scale(1.6);
}
.slides:hover{
    cursor:pointer;
    background-color: royalblue;
    transform: scale(1.1);
    color:white;
    -webkit-text-stroke:0 !important;
}

.theflip{
    transform: rotate(180deg) !important
}