@import "pico/pico.classless.blue.min.css";
@import "menu.css";

/* ------------------------------------------------------------------
  Row/Columns
*/
.row {
  display: flex;
  flex-direction: row;
  gap: 20px;
  white-space:unset;
}

.col75 {
  flex: 75%;
  width: 75%;
}

.col25 {
  flex: 25%;
}

/*
  Responsive layout
    makes a one column layout instead of a two-column layout
*/
@media (max-width: 805px) {
  .row {
    flex-direction: column;
  }
  .col75 {
    width: auto;
  }
}

/* ------------------------------------------------------------------
  Horizontal Rule
*/
hr {
  width: 90%;
  max-width: unset;
}

/* ------------------------------------------------------------------
  Colorful aside box for important things to note
*/
aside {
  font-size: xx-large;
  border: 2px;
  border-style: solid;
  padding: 0.2em;
  margin: 0.1em;
  width: 100%;
  color: #c62c0a;
}

/* ------------------------------------------------------------------
  Register and Donate buttons
*/
.btn {
  display: block;
  border-radius: 0.6em;
  font-weight: bold;
  padding: 0.3em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

a.btn {
  text-decoration: none;
  color: #FFF;
}

.register {
  background: #3871c2;
  font-size: xx-large;
  color: #FFF;
}

.donate {
  background: #589112;
  font-size: x-large;
  color: #FFF;
}

/* ------------------------------------------------------------------
  Camp sidebar table
*/

.hidden {
  display: none;
}

.camp-name {
  font-size: larger;
  text-transform: capitalize;
  margin-bottom: 0.2em;
}
.camp-start {
  margin-bottom: 0.2em;
  font-size: smaller;
  text-align: right;
}
.camp-topic {
  font-weight: bolder;
  margin-bottom: 0.2em;
}
.camp-speaker {
  font-style: italic;
  text-align: right;
}

table.camp-table {
  margin: 0;
  padding: 0;
}

article.camp {
  margin: 0;
}

/* ------------------------------------------------------------------
  images
*/
img.sq200 {
  max-width: 200px;
  max-height: 200px;
}

img.float-right-300 {
  float: right;
  max-width: 300px;
  max-height: 300px;
}
@media (max-width: 1080px) {
  img.float-right-300 {
    float: right;
    max-width: 150px;
    max-height: 150px;
  }
}