html {
   webkit-box-sizing: border-box;
   moz-box-sizing: border-box;
   box-sizing: border-box;
   background-color: #3463ce;
   background-color: #006;
   height: 100%;
   }

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

@font-face {
  font-family: 'Skullmics';
  src: url('https://pirate.band/fonts/Skullmics-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "nelson-rugged";
    src: url("https://use.typekit.net/af/9aa7c6/00000000000000007735a9de/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/9aa7c6/00000000000000007735a9de/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/9aa7c6/00000000000000007735a9de/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 100;
    font-stretch: normal;
    font-display: swap;
}

.nelson-rugged {
   font-family: "nelson-rugged", sans-serif;
   font-weight: 100;
   font-style: normal;
   overflow: visible;
   }

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

.js-hidden {
   visibility: hidden;
   }

#fitHeading {
   white-space: nowrap;
   display: inline-block;
   padding: 0;
   border: 0;
   }

body {
   height: 100%;
   width: 100%;
   max-width: 800px;
   font-family: Georgia, Serif;
   margin: 0 auto;
   padding: 0;
   background-color: #000;
   }

wrapper {
   width: 100%;
   padding: 20px 0 0 0;
   background-color: #000;
   }

.g-recaptcha, .g-recaptcha div {
   min-width: 304px;     /* reCAPTCHA v2 checkbox width */
   min-height: 78px;
   flex: 0 0 auto;       /* don't let flexbox shrink it */
   overflow: visible !important;    /* don't clip it */
   margin-left: auto;    /* center when parent is wider */
   margin-right: auto;
   flex-shrink: 0;
   }

/* Target the iframes for PayPal and Venmo buttons */
/* Donation iframes replaced with simple div */
#donate-link form {
   }

iframe[name*="zoid"] {
   width: 100% !important; /* Ensure they take full width */
   min-height: 500px !important; /* A reasonable minimum height for a button */
   height: 500px !important;    /* Explicit height, adjust as needed */
   border: none !important;    /* Remove default iframe border */
   display: block !important;  /* Ensure it behaves like a block element */
   }

[src*="youtube"] {
   width: 448px;
   height: 252px;
   width: 403px;
   height: 227px;
   width: 150px;
   height: 84px;
   border: none !important;    /* Remove default iframe border */
   display: block !important;  /* Ensure it behaves like a block element */
   margin: 20px auto;
   }

.heading-container {
   width: 100%; /* or any fixed width like 600px */
   max-width: 1100px;
   padding: 20px 20px 10px 20px;
   }

.heading-container p {
   margin: 0;
   padding: 0;
   color: #fff;
   white-space: nowrap;
   overflow: hidden;
   }

.heading-container a {
   text-decoration: none;
   color: #fff;
   display: inline-block;
   }

.skullmics {
   font-family: "Skullmics";
   font-size: 140%;
   }

topmenu {
   display: none;
   }

/* Tablet and up */
@media (min-width: 480px) {
topmenu {
   margin:  0;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: space-around;
   font-size: 0.6em;
   .gap: 0.25em;
   }

[src*="youtube"] {
   width: 448px;
   height: 252px;
   }
}

topmenu div a {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   .gap: 4px;
   font-size: 0.6em;
   text-decoration: none;
   color: #fff;
   }

topmenu div a i {
   padding: 0;
   margin: 0;
   }

topmenu div a:hover, topmenu div a:focus {
   color: #6666ff;
   }

/* Hamburger Menu */
/* Reset and Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.nav {
  background: #000;
  color: #fff;
  width: 100%;
}

/* Hidden checkbox, but still toggleable via label */
.nav-toggle {
  position: absolute;
  left: -9999px;
}

/* Hamburger icon */
.nav-icon {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 40px;
  margin: 1rem;
  cursor: pointer;
  z-index: 2; /* ensure clickable */
}

.nav-icon span {
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: 0.3s ease;
}

/* Nav menu default */
.nav-menu {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #000;
}

.nav-menu li a {
  display: block;
  padding: 1rem;
  color: #fff;
  text-decoration: none;
}

.nav-menu li a:hover {
  background: #111;
}

/* MOBILE STYLES */
@media (max-width: 768px) {
  .nav-icon {
    display: flex;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    background-color: #000;
  }

  .nav-menu li {
    border-bottom: 2px solid #fff;
    display: flex;
    width: 100%;
    align-items: center;
  }

  .nav-menu li a {
    width: 100%;
    padding: 1rem 4px;
  }

  /* When checkbox is checked, show menu */
  .nav-toggle:checked + .nav-icon + .nav-menu {
    display: flex;
    width: 100%;
    align-items: center;
  }
}

/* End Hamburger Menu */

a:hover {
   color: #6666ff;
   }

content {
   display: block;
   color: #000;
   background-color: #fff;
   margin: 0;
   padding: 20px 0;
   }

greeting {
   display: block;
   color: #000;
   background-color: #fff;
   margin: 0;
   padding: 0 0 20px 0;
   }
greeting h1 {
   font-size: 1.4em;
   padding: 20px 20px 0 20px;
   }
greeting h2 {
   font-size: 1.2em;
   padding: 4px 20px 0 20px;
   }
greeting p {
   font-size: 1em;
   padding: 20px 20px 0 20px;
   }

content#calendar h2 {
   padding-left: 20px;
   }

content#calendar div.event {
   width: 90%;
   margin: 30px auto;
   padding: 0 0 0 16px;
   border-left: 2px solid red;
   }

content#calendar div.past div.event {
   background-color: #eee;
   padding-top: 10px;
   padding-bottom: 10px;
   }

content#calendar div.event div.where {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: left;
   color: darkgray;
   font-size: 15px;
   gap: 10px;
   }

content#calendar p {
   width: 90%;
   margin: 10px auto;
   padding: 0;
   font-size: 16px;
   color: black;
   }

content#calendar div p.summary {
   margin: 0 0 10px 0;
   padding: 0;
   font-size: 18px;
   color: green;
   }

content#calendar div p.when {
   margin: 0 0 0 0;
   padding: 0;
   font-size: 20px;
   color: blue;
   }

content#calendar div p.where {
   margin: 10px 0;
   padding: 0;
   font-size: 16px;
   color: darkgray;
   }

content#calendar div p.description {
   margin: 10px 0;
   padding: 0;
   font-size: 16px;
   color: black;
   }

content#calendar div p.lastUpdated {
   margin: 10px 0 0 0;
   padding: 0;
   font-size: 12px;
   font-variant: small-caps;
   color: brown;
   }

content#bigbuttons {
   flex-grow: 4;
   margin: 0; padding: 0;
   background-color: black;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   justify-content: center;
   gap: 10px;
   }

content#bigbuttons div {
   .min-height: 150px;
   .flex-grow: 1;
   .flex-basis: 98%;
   background-color: black;
   .background-image: url("/images/Pillage People Sailing Button.jpg");
   .background-position: 50% 50%;
   .background-size: 100%;
   color: #fff;
   .border-radius: 20px;
   display: flex;
   .align-items: center;
   align-content: center;
   justify-content: center;
   flex-direction: column;
   color: #fff;
   gap: 1px;
   }

content#bigbuttons div a {
   .flex-basis: 98%;
   .flex-grow: 1;
   .font-size: 36px;
   .padding: 20px;
   display: block;
   .align-items: center;
   .justify-content: center;
   .flex-direction: column;
   color: #fff;
   gap: 1px;
   text-decoration: none;
   .hovering {
      display: none;
      }
   }

.content#bigbuttons div a:hover {
   .default {
      display: none;
      }
   }

content#bigbuttons div a img {
   padding: 0;
   border-radius: 20px;
   width: 100%;
   }

content#bigbuttons div a:focus,
content#bigbuttons div a:hover {
   filter: brightness(90%);
   }

content#donate,
content#donate div,
content#donate div h3#desc-label,
content#donate div button {
   width: 100%;
   margin: 0 auto;
   }

form {
   background-color: #fff;
   padding: 20px 0;
   display: flex;
   border-radius: 20px;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
   gap: 20px;
   }

form h2 {
   margin: 0;
   padding: 0;
   }

form_item {
   width: 90%;
   display: flex;
   flex-direction: column;
   align-items: left;
   }

form_phone {
   width: 90%;
   display: flex;
   flex-direction: column;
   align-items: left;
   gap: 5px;
   }

form_checkbox {
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 5px;
   }

form_checkbox div {
   font-size: 12px;
 }

input[type="text"], input[type="email"], input[type="date"], input[type="time"] {
   .width: 100%;
   padding: 8px;
   margin-top: 4px;
   }

input[type="checkbox"] {
   margin-top: 10px;
   }

button {
   width: 90%;
   padding: 8px;
   color: #fff;
   background-color: rgba(0,255,255,0.3);
   background-color: blue;
   border: 0;
   border-radius: 4px;
   }

textarea, select, select option {
   .width: 100%;
   padding: 8px;
   }


sidebar {
   display: block;
   margin: 0;
   padding: 0;
   }

sidebar img {
   display: block;
   width: 100%;
   height: auto;
   }

footer {
   display: block;
   margin: 0;
   padding: 20px 0;
   color: #fff;
   background-color: #000;
   }

footer p {
   width: 90%;
   margin: 10px auto;
   padding: 0;
   font-size: 1em;
   }

footer p a {
   color: #fff;
   padding-top: 10px;
   }

footer p a:hover {
   padding-top: 2px;
   }

footer p.social {
   display: flex;
   justify-content: space-evenly;
   font-size: 1.5em;
   .margin-bottom: 20px;
   }

.paypal-buttons {
   height: 42px !important;
   }