/* mulish-regular - latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/mulish-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/mulish-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-family: 'Mulish',sans-serif;
  /* font-size: 12pt; */
  color: #36344d; /* rgb(54, 52, 77) */
}
a {
  color: #36344d; /* rgb(54, 52, 77) */
}

tt {
  font-size: 110%;
  background-color: rgb(256, 191, 111, 0.4);
}
#content {
  margin: 0px 100px 50px;
  max-width: 870px;
  background-image: url(betterbird-bg.svg);
  background-repeat: no-repeat;
  background-position: top 170px center;
  background-size: contain;
}

/*
@media (prefers-color-scheme: dark) {
  #content {
    background-image: url('betterbird-bg-dark.svg');
  }
}
*/

h1 {
  color: #2F1C6A;
  margin-bottom: 1.5em;
}

h1 img {
  width: 75px;
  height: 75px;
  margin-right: 20px;
  position: relative;
  top: 25px;
}

h3 {
  color: #2F1C6A;
  margin-bottom: 0.3em;
}

h4 {
  color: #2F1C6A;
  margin-bottom: 0.15em;
}

@media screen and (max-width : 750px) {
  #content {
    margin: 0px 10px 50px;
    background-position: top 280px center;
  }
  h1 img {
    margin-right: 0;
    position: static;
    display: block;
  }
}

h2 {
  color: #2F1C6A;
  margin-bottom: 0;
}
p {
  margin-top: 0.5em;
  line-height:1.15;
}

hr.footer {
  margin-top: 50px;
}

p.footer {
  text-align: center;
  font-size: 70%;
}

p.header {
  margin-bottom: 0;
}
ul.tight {
  margin-top: 0;
}

ul.semitight {
  margin-top: 0.4em;
}

p.subsection {
  color: #d80000;
  /* color: #0057b7; /* UK */
  /* font-size: 13pt; */
}
td.subsection, a.subsection, span.subsection {
  color: #d80000;
  /* color: #0057b7; /* UK */
}

table {
  background-color: rgb(256, 229, 149, 0.4); /* #ffe595 */
  /* background-color: rgb(255, 215, 0, 0.4); /* #ffe595 UK */
}

td {
  padding-right: 20px;
}

td.b {
  background-color: rgb(256, 191, 111, 0.4); /* #ffbf6f */
  /* background-color: rgb(0, 87, 183, 0.2); /* #ffbf6f UK */
}

#menu a {
  text-decoration: none;
  background-color: #eee;
  padding: 3px 5px;
  margin-top: 2px;
  border-top: 2px solid #2F1C6A;
  display: inline-block;
}

#menu a:hover {
  background-color: rgb(256, 191, 111, 0.4);
  border-top: 2px solid red;
  /* UK */
  /* background-color: rgb(255, 215, 0, 0.4);
  border-top: 2px solid #0057b7; */
}

/* lightbox images, adapted from: */
/* The work below, CSSBox, is released under the Creative Commons
   Attribution-ShareAlike 4.0 license and is available on
   https://github.com/TheLastProject/CSSBox. You are not required to add
   additional credit to your website, just leave the above text in this file */
.cssbox {
  z-index: 999999;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.4);
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  cursor: default;
  transition: opacity 0.3s linear;
}
.cssbox > div {
  background-image: url(betterbird-bg.svg);
  background-repeat: no-repeat;
  position: fixed;
  background-position: center;
  background-color: #FFF;
  margin: 0;
  padding-block: 30px 20px;
  top: 50%;
  left: 50%;
  height: 47em;  /* Needs to be a fixed height */
  margin-right: -50%;
}

#overflowbox {
  height: 100%;
  overflow: auto;
  padding-inline: 20px;
}

@media screen and (min-width : 750px) {
  .cssbox > div {
    background-size: 50%;
    transform: translate(-50%, -50%);
    max-height: 90%;
    width: 90%;
    max-width: 800px;
  }
}
@media screen and (max-width : 750px) {
  .cssbox > div {
    background-size: 80%;
    transform: scale(0.60) translate(-85%, -82%);
    width: 140%;
    height: 140%;
  }
}

.cssbox:target {
  visibility: visible;
  opacity: 1;
  pointer-events: initial;
}

a.cssbox_close {
  z-index: 999999;
  position: fixed;
  text-decoration: none;
  text-align: center;
  color: black;
  font-size: 22px;
  top: 0;
  right: 0;
  background-color: #ddd;
  width: 30px;
  height: 30px;
}

a.cssbox_close::after {
  content: '\00d7';
}

a.cssbox_close:hover {
  color: white;
  background-color: red;
}

.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: -1;
  width: 350px; height: 350px;
  text-align: right;
}
.ribbon span {
  line-height: 40px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 250px;
  display: block;
  background: linear-gradient(#0057b7 0%, #0057b7 50%, #ffd700 50%, #ffd700 100%);
  position: absolute;
  top: 0px; left: -60px;
}