@font-face {
  font-family: 'QCfont';
  src: url('FoughtknightRegular-Xz9d.ttf') format('truetype'), 
       url('FoughtKnight.woff') format('woff'),
       url('FoughtKnight.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
body {
  background-color: white;
  width: 100%;
  margin: 0;
  padding: 0;
}

.divtop {
  background-color: black;
  height: 15vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
}

.divtop img {
  height: 95%;
  width: auto;
  display: block;
  max-height: 100%;
}

main {
  height: 40vh;
  background-color: black;
  width: 100%;
  display: flex;
    font-family: Aptos, Arial, Verdana;
  justify-content: center;
  align-items: center;
}

.centerlogo {
  max-height: 30vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  margin-top: 20px;
  padding: 0;
  box-sizing: border-box;}

.centerlogo img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}

.navbar {
  display: flex;
  background-color: white;
  font-family: 'QCfont', Aptos, Arial, Verdana;
  font-weight: bold;
  font-size: clamp(21px, 1.8vw, 27px);
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 20px;
  height: 60px;
  overflow: hidden;
}

.nav-left,
.nav-right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50%;
  overflow: hidden;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
  background-color: white;
}

.nav-left li a {
  color: black;
  text-decoration: none;
  margin-right: 0;
  line-height: 1;
  white-space: nowrap;
}

.nav-right li {
  margin-left: 15px;
}

.nav-right li a img {
  max-height: 3em;
  width: auto;
  flex-shrink: 1;
  display: block;
}

nav a {
  color: black;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  padding: 6px;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

footer {
  font-family: 'QCfont', Aptos, Arial, Verdana;
  background-color: white;
  text-transform: uppercase;
  color: black;
  font-size: 2em;
  font-weight: bold;
  min-height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  text-align: center;
}

/* ------------------ MEDIA QUERIES ------------------ */

/* Small phones */
@media (max-width: 480px) {
  .divtop { height: 12vh; }
  .centerlogo { height: 20vh; margin-top: 10px; }
  main { height: 30vh; }
  .navbar { font-size: 12px; padding: 0 10px; height: 50px; }
  .nav-right li a img { max-height: 1.2em; }
  footer { height: 12vh; padding-top: 5px; font-size: 12px; }
}

/* Tablets */
@media (max-width: 768px) {
  .divtop { height: 13vh; }
  .centerlogo { height: 25vh; margin-top: 15px; }
  main { height: 35vh; }
  .navbar { font-size: 14px; padding: 0 15px; height: 55px; }
  .nav-right li a img { max-height: 1.3em; }
  footer { height: 10vh; padding-top: 8px; font-size: 14px; }
}

/* Laptops / small desktops */
@media (max-width: 1024px) {
  .divtop { height: 14vh; }
  .centerlogo { height: 28vh; margin-top: 18px; }
  main { height: 38vh; }
  .navbar { font-size: 16px; padding: 0 18px; height: 58px; }
  .nav-right li a img { max-height: 1.4em; }
}

/* Large desktops */
@media (min-width: 1440px) {
  .divtop { height: 16vh; }
  .centerlogo { height: 32vh; }
  main { height: 42vh; }
  .navbar { font-size: 18px; padding: 0 20px; height: 60px; }
  .nav-right li a img { max-height: 1.5em; }
}