@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Noto+Serif+SC:wght@200..900&display=swap");
* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

main {
  min-height: 100vh;
}

@media (min-width: 1536px) {
  .logo-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (max-width: 1535px) {
  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .logo-block {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (min-width: 1376px) {
  .text-block-left {
    width: 60%;
    top: 40vh;
    margin: auto 0;
    position: absolute;
  }
}
@media (max-width: 1375px) {
  .text-block-left {
    width: 40%;
    top: 0;
    margin: auto 0;
    position: absolute;
  }
  .img-block {
    max-width: 45%;
  }
}
@media (max-width: 1225px) {
  .img-block img {
    max-width: 30vw;
  }
  nav {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-line-pack: distribute;
        align-content: space-around;
    width: content;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
  .cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .menu {
    text-align: center;
  }
  .menu-item {
    text-align: center;
  }
}
@media (max-width: 775px) {
  .text-block-left {
    width: 100%;
    margin: 0;
    position: inherit;
  }
  .img-block {
    visibility: hidden;
    position: absolute;
  }
}
@media (max-width: 735px) {
  li, p {
    font-size: 17.6px;
  }
}
h1 {
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 48px;
  text-align: center;
}

main h1 {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 11px;
}

h2 {
  font-size: 33px;
  margin-top: 24.2px;
  margin-bottom: 22px;
  font-weight: bold;
  font-family: "Noto Serif SC", serif;
}

p, li {
  font-size: 24.2px;
  padding-bottom: 17.6px;
  display: block;
  font-family: "Noto Serif SC", serif;
}

hr {
  border: none;
  border-top: 2px solid #0E0000;
}

.header {
  background-color: rgba(255, 0, 0, 0);
  display: flexbox;
  padding: 20px 10%;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-grid-column-align: right;
      justify-self: right;
}

.logo-block {
  vertical-align: middle;
}
.logo-block .logo-item {
  display: inline-block;
  padding: 5px;
}
.logo-block .logo-item h1 {
  font-size: 55px;
  margin-bottom: -18px;
  color: #990F2F;
}
.logo-block .logo-item h3 {
  font-family: "Commissioner", sans-serif;
  font-size: 17.6px;
  font-weight: normal;
  letter-spacing: 1px;
}
.logo-block img {
  height: 70px;
}

a {
  text-decoration: none;
  color: #0E0000;
}

.contact-link {
  color: #990F2F;
  text-decoration: underline;
}

ul {
  list-style: none;
  font-family: "Noto Serif SC", serif;
}

.menu-item {
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Cormorant Garamond", serif;
  background-color: rgba(255, 0, 0, 0);
  font-size: 22px;
  border-radius: 40px;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.menu-item a {
  padding: 20px;
}
.menu-item .submenu-item {
  visibility: hidden;
  position: absolute;
}
@media (pointer: fine) {
  .menu-item:hover {
    background-color: #990F2F;
    -webkit-transition: 1s;
    transition: 1s;
    text-decoration: none;
  }
  .menu-item:hover .submenu-item {
    visibility: visible;
  }
  .menu-item:hover a {
    color: #FFFFFF;
  }
}
@media (pointer: coarse) {
  .menu-item:active .submenu-item {
    visibility: visible;
  }
}

.active {
  text-decoration: underline;
  background-color: #EFEACD;
}

.submenu-item:hover {
  visibility: visible;
}

.main {
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
  padding: 50px 15%;
  display: flexbox;
}
.main a {
  text-decoration: underline;
}
.main * {
  max-height: 60vh;
}
.main div {
  display: flexbox;
  top: 30vh;
}
.main .text-block-left {
  -ms-grid-column-align: left;
      justify-self: left;
}
.main .img-block {
  -ms-grid-column-align: right;
      justify-self: right;
}
.main .img-block img {
  border-radius: 40px;
}

.main-high {
  min-height: 80vh;
}

.main-light {
  background-color: #FFFFFF;
  color: #0E0000;
  font-weight: bold;
}

.main-dark {
  background-color: #990F2F;
  color: #EFEACD;
}

.main-darkest {
  background-color: #0E0000;
  color: #EFEACD;
}

.main-medium {
  background-color: #EFEACD;
  color: #0E0000;
  font-weight: bold;
}

.main-medium-dark {
  background-color: #A19379;
}

.card {
  display: inline-block;
  width: 50px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  background-color: #EFEACD;
  color: #0E0000;
}
.card img {
  height: 50px;
}

.wide-pad {
  width: 100%;
  margin-top: -80px 20% 0;
  padding: 50px 0;
  background-color: #EFEACD;
  font-size: 28.6px;
  font-family: "Noto Serif SC", serif;
  text-align: center;
  font-weight: bold;
}

.cards {
  width: 100%;
  padding: 20px;
  text-align: center;
}

.mid-colored {
  background-color: #EFEACD;
}

.highlight {
  font-style: normal;
  color: #990F2F;
}

.text-block {
  display: block;
}
.text-block h1 {
  text-transform: uppercase;
  margin-bottom: 22px;
}
.text-block h2 {
  font-family: "Noto Serif SC", serif;
  font-size: 33px;
  margin-bottom: 22px;
}
.text-block ul {
  list-style: disc;
  padding-left: 15px;
  font-size: 22px;
}
.text-block ul li {
  margin-bottom: 15.4px;
}

.card-face, .card-back {
  position: absolute;
  background-color: #EFEACD;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.card-face {
  z-index: 2;
}

.card-back {
  z-index: 1;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.pretty-imgs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.pretty-imgs div {
  position: relative;
}
.pretty-imgs .imgs {
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.pretty-imgs .imgs .img-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.pretty-imgs .imgs .img-left {
  -ms-grid-column-align: start;
      justify-self: start;
}
.pretty-imgs .imgs .img-right {
  -ms-grid-column-align: right;
      justify-self: right;
}
.pretty-imgs .imgs .img-half {
  height: 30vh;
}
.pretty-imgs .text {
  z-index: 2;
}

.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-grid-column-align: end;
      justify-self: end;
  min-height: 100px;
  width: 100%;
}

em {
  color: #990F2F;
  font-style: normal;
}