/* Changed .container to be wide as possible

Use 6 July 24 https://www.freeformatter.com/css-minifier.html#before-output

7 July 24 removed background color of .container so it's all just white 
23 sept 24 this is nicer and hamburger works properly and drop downs look neater and perform better formatted.
29 sept 24 added btn7 for shield logo

14 Oct  24 latest from chatgpt to make it responsive with center column of content showing as much as possible. It shows well on apps and once uploaded.

11Mch25 added min-width: 40px; to dropdown-content to try this for all pages to make white rectangle smaller

27 Apr 25 I copied across some code from wide-perfect-23sept24.css because I compared wide-perfect-23sept24-16apr25 with wide-perfect-23sept24.css 

Now renamimg this current fixed up new version as wide-perfect-23sept24.css
Need to test this a lot and ask chat to test 

27th at 7.30 pm This is edited and fixed by chat
29 Apr 25now called wide-perfect-29apr25-new

6 Jne 25 Trying to fix scrolling on all screens
This is no 2 to delay scroll appearing til after the start to scroll.
Scroll names at botton are same as in wide-perfect-29apr25-new.css
Use .container to reduce gap below green menu
8 Jne 25 changed to 30 px
27jne25 editing only row and col

4 Jly 25 Below is the fully cleaned and updated version of your global stylesheet, 
still named wide-perfect-29apr25-new.css. 
It removes legacy grid/column float styles and older .row, .grid, .unit, and .col-* systems, 
replacing them with your new column and flex structure. 
Your button styles, menu, footer, and scroll-to-top features are preserved.

✅ Final Cleaned Global CSS: from wide-perfect-29apr25-new.css
(Wed 3 July 2025 – 11:50 PM AEST)
called new-with-flex-column-4jly25.css

6 Jl 25 Use this css in hypnoBus and GregHypno. Have added new 4 parts @media for topnav menu fix

new Global current 6 Jly 25
10 Jly 25 in container changed it to 
margin: 65px auto 0 auto; for all normal pages with no progress bar

11 Jly 25 added column2 clearfix from old css for associations 
right at very bottom which is the only way it works.
*/

html {
  scroll-padding-top: 50px;
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 100%;
  background-color: white;
  color: #017ea6;
}

h1 {
  font-size: 2.5em;
  text-shadow: 2px 1px 5px #afafaf;
}

h2 {
  font-size: 1.875em;
  text-shadow: 2px 1px 5px #afafaf;
}

h3 {
  font-size: 1.5em;
  font-weight: 400;
  text-shadow: 2px 1px 5px #afafaf;
}

h4 {
  font-size: 0.875em;
  font-weight: 400;
}

h5 {
  font-size: 0.75em;
  font-weight: 400;
}

h6 {
  font-size: 0.63em;
  font-weight: 400;
}

p {
  font-size: 1em;
}

.center {
  text-align: center;
}

.center2 {
  margin: auto;
  width: 60%;
}

.right {
  float: right;
}

.left {
  float: left;
}

.container {
  max-width: 95%;
  /* margin: 30px auto 0 auto; */
  margin: 65px auto 0 auto;
  /* Adds 50px or 75 px top margin */
  padding: 0 1.5rem;
  /* background-color: white; */
}


.red {
  color: red;
}

.medium {
  display: block;
  margin-bottom: 1px;
}

.large {
  display: block;
  margin-bottom: 30px;
}

/* Shared column layout */
.column-section {
  margin-bottom: 40px;
  /* padding: 10px; */
  padding: 30px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}

/* 11 Jly 25 to reduce white extra space */
.one-column .centered-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.two-columns {
  column-count: 2;
  column-width: 300px;
  column-gap: 30px;
  column-rule: 1px solid #ddd;
}

.three-columns {
  column-count: 3;
  column-width: 250px;
  column-gap: 25px;
  column-rule: 1px dashed #bbb;
}

.four-columns {
  column-count: 4;
  column-width: 200px;
  column-gap: 20px;
  column-rule: 1px dotted #aaa;
}

@media screen and (max-width: 768px) {

  .two-columns,
  .three-columns,
  .four-columns {
    column-count: 1;
    column-width: 100%;
  }
}

/* Flex buttons */
.flex-buttons-wrapper {
  padding: 10px;
  margin-bottom: 40px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}

.flex-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.flex-buttons>* {
  break-inside: avoid;
}

.flex-buttons-wrapper h2 {
  text-align: center;
  color: #017ea6;
  margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
  .flex-buttons {
    justify-content: center;
  }

  .flex-buttons button {
    flex: none;
    width: auto;
  }
}

/* Top menu bar */
.topnav {
  overflow: hidden;
  background-color: #017ea6;
  display: flex;
  justify-content: center;
  /* font-size: 1em; */
  /* padding: 8px 12px; */
  z-index: 10000;
}

.topnav a,
.topnav .dropbtn {
  /* padding: 8px 12px; */
  display: inline-block;
  text-align: center;
  text-decoration: none;
  /* font-size: 1em; */
  line-height: 1.5;
  color: #f2f2f2;
  background-color: inherit;
  border: none;
  outline: none;
}

.topnav .icon {
  display: none;
}

.topnav.responsive {
  display: block;
  background-color: #017ea6;
  overflow: visible;
}

.topnav .no-link {
  background-color: #1166ed;
  color: white;
  cursor: default;
  pointer-events: none;
  font-weight: 500;
}

.topnav a:hover,
.topnav .dropbtn:hover {
  background-color: #87c2d4;
  color: white;
}

/* Dropdown menu */
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 40px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 10000;
}

.dropdown-content a {
  float: none;
  color: mediumblue;
  padding: 6px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: gold;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Top menu responsive */
@media screen and (max-width: 600px) {

  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a,
  .topnav.responsive .dropdown,
  .topnav.responsive .dropdown .dropbtn {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav.responsive .dropdown-content {
    position: relative;
  }

  .topnav.responsive .no-link {
    justify-content: flex-start;
    align-items: center;
    /* padding: 8px 14px; */
    height: auto;
  }

  .topnav {
    display: block;
    /* font-size: 0.65em; */
    /* font-size: 1em; */
    /* ⬅️6 Jl 25 this is key for reducing menu text size */
  }
}

.topnav a,
.topnav .dropbtn,
.dropdown-content a,
.topnav.responsive a,
.topnav.responsive .dropbtn {
  /* font-size: 0.77em; good */
  font-size: 0.77em;
  /* padding: 8px 12px; */
  /* padding: 8px 6px; good */
  padding: 8px 7px;
}

/* Button styles */
.btn1,
.btn2,
.btn3,
.btn4,
.btn5,
.btn6,
.btn7 {
  display: inline-block;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border: 0;
  border-radius: 6px;
  box-shadow: 3px 4px 4px grey;
  text-shadow: 1px 1px 1px black;
  margin: 4px 2px;
}

.btn1 {
  background-color: #4caf50;
  font-weight: 600;
}

.btn1:hover {
  background-color: #367c39;
}

.btn1:active {
  background-color: coral;
  transform: translateY(4px);
  box-shadow: 0 5px #666;
}

.btn2 {
  background-color: white;
  color: #fff;
  border-radius: 0;
}

.btn2:hover {
  background-color: green;
  color: white;
}

.btn2:active {
  transform: translateY(4px);
  box-shadow: 0 5px #666;
}

.btn3 {
  background-color: #5894f3;
}

.btn3:hover {
  background-color: #0d51bf;
}

.btn3:active {
  background-color: #25d045;
  box-shadow: 0 5px #5a8cdb;
  transform: translateY(4px);
}

.btn3.clicked {
  background-color: #93cedf;
  color: black;
  text-shadow: 2px 2px 10px black;
}

.btn4 {
  background-color: #6cf;
  font-weight: 600;
}

.btn4:hover {
  background-color: #0099e6;
}

.btn4:active {
  background-color: coral;
  transform: translateY(4px);
  box-shadow: 0 5px #666;
}

.btn5 {
  background-color: white;
  border-radius: 12px;
}

.btn5:hover {
  background-color: green;
  color: white;
}

.btn5:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.btn6 {
  background-color: #6b00b3;
}

.btn6:hover {
  background-color: gold;
  color: red;
}

.btn6:active {
  background-color: coral;
  transform: translateY(4px);
  box-shadow: 0 5px #666;
}

.btn7 {
  background-color: whitesmoke;
}

.btn7:hover {
  background-color: #017ea6;
  color: white;
}

.btn7:active {
  background-color: #017ea6;
  transform: translateY(4px);
  box-shadow: 0 5px #5a8cdb;
}

.btn7.clicked {
  background-color: #93cedf;
  color: black;
  text-shadow: 2px 2px 10px black;
}

/* Scroll to Top */
@keyframes scrollBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

#scrollBtn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: block;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 9999;
  cursor: pointer;
  animation: scrollBounce 2s infinite ease-in-out;
  color: #017ea6;
}

#scrollBtn:hover {
  color: #00cc00;
}

.scroll-icon {
  width: 32px;
  height: 32px;
  display: block;
  pointer-events: none;
}

@media screen and (max-width: 600px) {
  .scroll-icon {
    width: 26px;
    height: 26px;
  }
}

@media screen and (min-width: 601px) and (max-width: 1100px) {
  .scroll-icon {
    width: 30px;
    height: 30px;
  }
}

/* Fixed Nav + Footer Layout */
.fixed-navbar-wrapper {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.fixed-navbar-bar {
  max-width: 88%;
  margin: 0 auto;
  background-color: #017ea6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.outer-bar {
  max-width: 90%;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .outer-bar {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Footer */
.footer-distributed {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  width: 100%;
  text-align: left;
  font: normal 16px sans-serif;
  padding: 3px 10px;
  margin-top: 70px;
  background-color: #017ea6;
}

.footer-distributed .footer-left p {
  color: #8f9296;
  font-size: 14px;
  margin: 0;
}

.footer-distributed p.footer-links {
  font-size: 17px;
  font-weight: normal;
  color: #fff;
  margin: 0 0 1px;
  padding: 4px 1px;
  text-align: center;
}

.footer-distributed p.footer-links a {
  display: inline-block;
  line-height: 1.8;
  text-decoration: none;
  color: inherit;
}

p.footer-links a:hover {
  color: #73c4dd;
}

.footer-distributed .footer-right {
  float: right;
  margin-top: 6px;
  max-width: 180px;
}

.footer-distributed .footer-right a {
  display: inline-block;
  width: 35px;
  height: 35px;
  border-radius: 2px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-left: 3px;
}



.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Add padding BETWEEN each column */
.clearfix,
.clearfix>.column1 {
  padding: 5px;
}





.column2 {
  float: left;
  width: 20%;
}

@media screen and (max-width: 900px) {
  .column2 {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column2 {
    width: 100%;
  }
}

/* Responsive layout - makes the logo columns stack on top of each other instead of next to each other */
/* stack the images vertically on screens that are 500px wide or less: Copied from bottom style to here 13Feb22*/

/*This could be column1 not 2  12Oct 22*/
@media screen and (max-width: 400px) {
  .column2 {
    width: 100%;
  }
}

.column2 {
  float: left;
  width: 20%;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Add padding BETWEEN each column */
.clearfix,
.clearfix>.column1 {
  padding: 5px;
}

@media screen and (max-width: 900px) {
  .column2 {
    width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column2 {
    width: 100%;
  }
}

/* Responsive layout - makes the logo columns stack on top of each other instead of next to each other */
/* stack the images vertically on screens that are 500px wide or less: Copied from bottom style to here 13Feb22*/

/*This could be column1 not 2  12Oct 22*/
@media screen and (max-width: 400px) {
  .column2 {
    width: 100%;
  }
}