* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

.gridContainer {
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;
  margin: 0 auto;
  display: grid;
  grid-template-areas: "bar bar bar bar bar bar" "main main main main main main" "footer footer footer footer footer footer";
}

.headerBar {
  grid-area: bar;
  display: grid;
  grid-template-areas: "img img img nav nav nav";
  background-color: #054e91;
  height: 80px;
}
.headerBar nav {
  grid-area: nav;
}
.headerBar nav ul {
  margin: 40px;
}
.headerBar nav ul li {
  display: inline;
  padding: 10px;
}
.headerBar nav ul li a {
  color: #ffffff;
}
.headerBar nav ul li a:link {
  text-decoration: none;
}
.headerBar nav ul li a:hover {
  color: #ff6c6c;
}
.headerBar img {
  grid-area: img;
}
.headerBar .mobileNavBtn {
  display: none;
}

img[alt^=usbc] {
  width: 70px;
  height: auto;
  margin: 10px;
}

main {
  grid-area: main;
}

h2 {
  text-align: center;
}

#index {
  display: grid;
  grid-template-areas: "img img img" "text text text" "callouts callouts callouts";
  padding: 16px;
}
#index img {
  grid-area: img;
  display: block;
  margin: 0 auto 10px auto;
  width: 40%;
}
#index p {
  grid-area: text;
  text-align: center;
  margin: 16px;
}
#index #callouts {
  grid-area: callouts;
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
#index #callout1, #index #callout2, #index #callout3 {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}
#index #callout1 figure, #index #callout2 figure, #index #callout3 figure {
  background-color: #b0d8fc;
  padding-top: 10px;
  width: 100%;
  height: 100%;
}
#index #callout1 figcaption, #index #callout2 figcaption, #index #callout3 figcaption {
  font-size: 18px;
}
#index #callout1 #upcomingEventsBtn, #index #callout1 #resultsBtn, #index #callout1 #hallBtn, #index #callout2 #upcomingEventsBtn, #index #callout2 #resultsBtn, #index #callout2 #hallBtn, #index #callout3 #upcomingEventsBtn, #index #callout3 #resultsBtn, #index #callout3 #hallBtn {
  text-align: center;
  border-radius: 30px;
  background-image: linear-gradient(#ff6c6c, #d5594e);
  font-size: large;
  border: none;
  padding: 10px;
  display: block;
  margin: 0 auto;
}
#index #callout1 #upcomingEventsBtn a, #index #callout1 #resultsBtn a, #index #callout1 #hallBtn a, #index #callout2 #upcomingEventsBtn a, #index #callout2 #resultsBtn a, #index #callout2 #hallBtn a, #index #callout3 #upcomingEventsBtn a, #index #callout3 #resultsBtn a, #index #callout3 #hallBtn a {
  color: #ffffff;
  text-decoration: none;
}
#index #callout1 #upcomingEventsBtn:hover, #index #callout1 #resultsBtn:hover, #index #callout1 #hallBtn:hover, #index #callout2 #upcomingEventsBtn:hover, #index #callout2 #resultsBtn:hover, #index #callout2 #hallBtn:hover, #index #callout3 #upcomingEventsBtn:hover, #index #callout3 #resultsBtn:hover, #index #callout3 #hallBtn:hover {
  background-image: linear-gradient(#d5594e, #c7224c);
}

#events {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: "row1";
  gap: 16px;
  padding: 16px;
  text-align: center;
}
#events #youthCity, #events #annualGolfOuting {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}
#events #youthCity figure, #events #annualGolfOuting figure {
  margin-bottom: 15px;
  padding: 5px;
  background-color: #b0d8fc;
}
#events #youthCity figure img, #events #annualGolfOuting figure img {
  width: 50%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
#events #youthCity figure figcaption, #events #annualGolfOuting figure figcaption {
  padding: 5px;
  font-size: large;
}
#events #youthCity figure figcaption h2, #events #youthCity figure figcaption h3, #events #youthCity figure figcaption p, #events #annualGolfOuting figure figcaption h2, #events #annualGolfOuting figure figcaption h3, #events #annualGolfOuting figure figcaption p {
  padding: 5px;
}
#events #youthCity figure figcaption button, #events #annualGolfOuting figure figcaption button {
  border-radius: 30px;
  background-image: linear-gradient(#ff6c6c, #d5594e);
  font-size: large;
  border: none;
  padding: 10px;
  display: block;
  margin: 0 auto;
}
#events #youthCity figure figcaption button a, #events #annualGolfOuting figure figcaption button a {
  color: #ffffff;
  text-decoration: none;
}
#events #youthCity figure figcaption button:hover, #events #annualGolfOuting figure figcaption button:hover {
  background-image: linear-gradient(#d5594e, #c7224c);
}
#events #youthCity figcaption #notice, #events #annualGolfOuting figcaption #notice {
  background-color: yellow;
}
#events #youthCity figcaption ol, #events #annualGolfOuting figcaption ol {
  display: inline-block;
}
#events #youthCity figcaption ol li, #events #annualGolfOuting figcaption ol li {
  text-align: left;
}

#results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: "row1" "row2" "row3";
  gap: 16px;
  padding: 16px;
}
#results #results1, #results #results2 {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}
#results figure {
  margin-bottom: 15px;
  padding: 5px;
  background-color: #d5594e;
  text-align: center;
}
#results figure h2 {
  text-decoration: underline;
  text-decoration-color: #b0d8fc;
}
#results figure h4 {
  color: #b0d8fc;
}
#results figcaption {
  padding: 5px;
  font-size: large;
  text-align: center;
}
#results figcaption a {
  color: #000000;
  text-decoration: none;
}
#results figcaption a:hover {
  color: #ffffff;
  border-bottom: 2px solid #054e91;
}

#centers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: "row1" "row2";
  gap: 16px;
  padding: 16px;
  text-align: center;
}
#centers #center1, #centers #center2, #centers #center3, #centers #center4, #centers #center5, #centers #center6, #centers #center7 {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}
#centers figure {
  margin-bottom: 15px;
  padding: 5px;
  background-color: #d5594e;
}
#centers figure img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
#centers figure figcaption {
  padding: 5px;
  font-size: large;
}
#centers figure figcaption a {
  color: #000000;
  text-decoration: none;
}
#centers figure figcaption a:hover {
  color: #ffffff;
  border-bottom: 2px solid #054e91;
}

#board {
  display: grid;
  grid-template-areas: "row1" "row2" "row3";
  gap: 16px;
  padding: 16px;
  text-align: center;
}
#board .row1, #board .row2, #board .row3, #board .row4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  background-color: #d5594e;
  padding: 5px;
}
#board figure {
  padding: 5px;
  background-color: #b0d8fc;
}
#board figure h2 {
  border-bottom: 2px solid #697da9;
}
#board figcaption {
  padding: 5px;
  font-size: 20px;
}

#hall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
  padding: 16px;
}
#hall .accordion {
  background-color: #d5594e;
  color: #000000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: center;
  font-size: 18px;
  border: none;
  outline: none;
  transition: 0.4s;
}
#hall .active, #hall .accordion:hover {
  background-color: #5db1ff;
}
#hall .panel {
  padding: 0 18px;
  background-color: #b0d8fc;
  font-size: 18px;
  display: none;
  overflow: hidden;
}

#bylaws {
  display: grid;
  grid-template-areas: "heading heading heading" "paragraph paragraph paragraph" "bylaws policy operation" "bylaws policy operation";
  gap: 16px;
  padding: 16px;
}
#bylaws h2 {
  grid-area: heading;
  text-align: center;
}
#bylaws p {
  grid-area: paragraph;
  text-align: center;
}
#bylaws #bowlingBylaws {
  grid-area: bylaws;
}
#bylaws #policy {
  grid-area: policy;
}
#bylaws #operation {
  grid-area: operation;
}
#bylaws figure {
  margin-bottom: 15px;
  padding: 5px;
  background-color: #d5594e;
  text-align: center;
}
#bylaws figure figcaption {
  padding: 5px;
  font-size: large;
  text-align: center;
}
#bylaws figure figcaption a {
  color: #000000;
  text-decoration: none;
}
#bylaws figure figcaption a:hover {
  color: #ffffff;
  border-bottom: 2px solid #054e91;
}

#average {
  padding: 16px;
}
#average h2 {
  text-align: center;
  margin-top: 16px;
}
#average #searchBar {
  background-image: url("../images/icons/searchIcon.png");
  background-position: 5px 5px;
  background-repeat: no-repeat;
  padding: 16px 16px 16px 40px;
  margin: 16px 0px;
  width: 46%;
  border: 2px solid #054e91;
  border-radius: 30px;
  text-align: left;
}
#average #searchBar::-moz-placeholder {
  font-size: 16px;
}
#average #searchBar::placeholder {
  font-size: 16px;
}
#average table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 16px;
}
#average th {
  background-color: #ff6c6c;
}
#average th, #average td {
  border: 1px solid #697da9;
  padding: 8px;
  text-align: center;
}
#average tr:nth-child(even) {
  background-color: #b0d8fc;
}
#average tr td:nth-child(1) {
  text-align: left;
}

#bowlingForms {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 16px;
  padding: 16px;
  text-align: center;
}
#bowlingForms h2, #bowlingForms p {
  text-align: center;
}
#bowlingForms p {
  font-size: large;
}
#bowlingForms #gamblingLicense, #bowlingForms #boardMemberForm {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}
#bowlingForms #gamblingLicense figure, #bowlingForms #boardMemberForm figure {
  margin-bottom: 15px;
  padding: 5px;
  background-color: #b0d8fc;
}
#bowlingForms #gamblingLicense figure img, #bowlingForms #boardMemberForm figure img {
  width: 50%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
#bowlingForms #gamblingLicense figure figcaption, #bowlingForms #boardMemberForm figure figcaption {
  padding: 5px;
  font-size: large;
}
#bowlingForms #gamblingLicense figure figcaption h2, #bowlingForms #gamblingLicense figure figcaption h3, #bowlingForms #gamblingLicense figure figcaption p, #bowlingForms #boardMemberForm figure figcaption h2, #bowlingForms #boardMemberForm figure figcaption h3, #bowlingForms #boardMemberForm figure figcaption p {
  padding: 5px;
}
#bowlingForms #gamblingLicense figure figcaption button, #bowlingForms #boardMemberForm figure figcaption button {
  border-radius: 30px;
  background-image: linear-gradient(#ff6c6c, #d5594e);
  font-size: large;
  border: none;
  padding: 10px;
  display: block;
  margin: 0 auto;
}
#bowlingForms #gamblingLicense figure figcaption button a, #bowlingForms #boardMemberForm figure figcaption button a {
  color: #ffffff;
  text-decoration: none;
}
#bowlingForms #gamblingLicense figure figcaption button:hover, #bowlingForms #boardMemberForm figure figcaption button:hover {
  background-image: linear-gradient(#d5594e, #c7224c);
}

footer {
  grid-area: footer;
  display: grid;
  grid-template-areas: "logo facebook nav nav nav address" "copyright copyright copyright copyright copyright copyright";
  text-align: center;
  align-items: center;
  background-color: #054e91;
  color: #ffffff;
  height: 100%;
}
footer .usbcLogo {
  grid-area: logo;
  justify-self: start;
}
footer .facebook {
  grid-area: facebook;
}
footer .facebook img {
  border-radius: 50%;
}
footer .address {
  grid-area: address;
  justify-self: start;
  text-align: left;
  margin-top: 5px;
  padding-left: 5px;
}
footer .address h4 {
  border-bottom: 2px solid #d5594e;
  text-align: center;
}
footer .footerNavContainer {
  grid-area: nav;
}
footer .footerNavContainer ul {
  margin: 40px;
}
footer .footerNavContainer ul li {
  display: inline;
  padding: 10px;
}
footer .footerNavContainer ul li a {
  color: #ffffff;
}
footer .footerNavContainer ul li a:link {
  text-decoration: none;
}
footer .footerNavContainer ul li a:hover {
  color: #ff6c6c;
}
footer .mobileFooterNavBtn {
  display: none;
}
footer .copyright {
  grid-area: copyright;
}

@media screen and (max-width: 600px) {
  .gridContainer {
    width: 100%;
    display: grid;
    grid-template-areas: "bar" "main" "footer";
  }
  img[alt^=usbc] {
    width: 70px;
    height: auto;
    margin: 10px;
  }
  .headerBar {
    display: grid;
    grid-template-areas: "img navBtn" "img nav";
    grid-template-columns: 1fr;
    grid-row-gap: 15px;
    text-align: center;
    height: auto;
  }
  .headerBar img[alt="usbc logo"] {
    margin: 15px;
  }
  .headerBar .mobileNavBtn {
    display: block;
    margin: 15px;
    background-color: #d5594e;
  }
  .headerBar nav {
    display: none;
    text-align: right;
  }
  .headerBar nav ul {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .headerBar nav ul li {
    display: block;
    padding: 5px;
  }
  .headerBar nav ul li a {
    color: white;
    text-decoration: none;
  }
  #index {
    padding: 16px 0px;
  }
  #index img[alt^=bowling] {
    width: 100%;
    height: auto;
  }
  #index #callout1, #index #callout2, #index #callout3 {
    padding-bottom: 20px;
  }
  #events {
    grid-template-columns: 1fr;
    padding: 16px 0px;
    gap: 0px;
  }
  #events #youthCity figure img {
    width: 100%;
  }
  #events #youthCity figure figcaption a {
    color: #ffffff;
    border-bottom: 2px solid #054e91;
  }
  #results {
    padding: 16px 0px;
    grid-template-columns: 1fr;
  }
  #results figure figcaption a {
    color: #ffffff;
    border-bottom: 2px solid #054e91;
  }
  #centers {
    padding: 16px 0px;
    grid-template-columns: 1fr;
  }
  #centers #center1, #centers #center2, #centers #center3, #centers #center4, #centers #center5, #centers #center6, #centers #center7 {
    padding-bottom: 20px;
  }
  #centers figure figcaption a {
    color: #ffffff;
    border-bottom: 2px solid #054e91;
  }
  #board {
    padding: 16px 0px;
  }
  #hall {
    grid-template-columns: 1fr;
    padding: 16px 0px;
  }
  #bylaws {
    display: grid;
    grid-template-areas: "heading" "paragraph" "bylaws" "policy" "operation";
    padding: 16px 0px;
    gap: 0px;
  }
  #bylaws figure figcaption a {
    color: #ffffff;
    border-bottom: 2px solid #054e91;
  }
  #average {
    padding: 0px;
  }
  #average h2 {
    grid-area: heading;
  }
  #average #searchBar {
    grid-area: search;
    background-position: 5px 5px;
    width: 70%;
  }
  #average table {
    grid-area: table;
    border-collapse: collapse;
  }
  #average td, #average th {
    padding: 0px;
  }
  footer {
    display: grid;
    grid-template-areas: "address footerNavBtn" "faceBook footerNav" "copyright copyright";
    grid-template-columns: 1fr;
    grid-row-gap: 15px;
    text-align: left;
  }
  footer .facebook {
    grid-area: faceBook;
    margin: 15px;
  }
  footer img[alt="usbc logo"] {
    display: none;
  }
  footer .address {
    grid-area: address;
    margin: 15px;
  }
  footer .mobileFooterNavBtn {
    display: block;
    grid-area: footerNavBtn;
    margin: 15px;
    background-color: #d5594e;
  }
  footer .footerNavContainer {
    grid-area: footerNav;
    text-align: right;
  }
  footer .footerNavContainer .footerNav {
    display: none;
    grid-area: footerNav;
    margin: 15px;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  footer .footerNavContainer .footerNav li {
    display: block;
    padding: 5px;
  }
  footer .footerNavContainer .footerNav li a {
    color: white;
    text-decoration: none;
  }
  footer .copyright {
    grid-area: copyright;
    margin: 15px;
    text-align: center;
  }
}/*# sourceMappingURL=siteStyles.css.map */