:root {
  /**/
  --background1: #1470af;
  --foreground1: white;
  /**/
  --background2: #8eb6dc;
  --foreground2: white;
  /**/
  --background3: white;
  --foreground3: black;
  /**/
  --activeback: #4d114f;
  --activelink: white;
  /**/
}

body {
  margin: 0;
  padding: 0;
  font-family: Poppins, sans-serif;
  color: var(--foreground1);
  font-size: 16px;
}

.stop-scrolling {
  height: 100vh;
  overflow-y: hidden;
}

:root {
  --header-height: 100vh;
  --bottomwrap: column;
  --min-text-size: 1rem;
  --min-text-spacing: 1.8rem;
}

/* Basic styling */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.topmenu {
  color: "white";
}

a {
  color: white;
  text-decoration: none;
}

.item {
  padding: .2rem;
  padding-bottom: 3rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

/* for menu items (other than the button), set the hover color */
/*.item a:hover {
  background-color: var(--background2);
  color: var(--activeback);
}*/
/* Mobile menu */

.logo {
   margin-top: .5rem;
   width: calc(100% - 4rem);  /* guess at the width of margins + the hamburger icon for the mobile menu */
}

.menu {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 1.5rem;
}
.menu li a {
  display: block;
}
.toggle {
  order: 1;
  font-size: 1.5rem;
  margin-top: 0.5rem;
}
.item.button {
  order: 3;
}
.item {
  order: 2;
  width: 100%;
  text-align: center;
  display: none;
}
.active .item {
  display: block;
}

/* Desktop menu */
@media all and (min-width: 960px) {
  :root {
    --bottomwrap: row;
    --min-text-size: 1.2rem;
    --min-text-spacing: 2.2rem;
  }
  .menu {
    align-items: flex-start;
    flex-wrap: nowrap;
    background: none;
  }
  .logo {
    order: 0;
  }
  .button a {
    width: 176px;
    height: 81px;
    color: var(--foreground1);
    background: var(--background1);
    margin-top: -1.9rem;
    padding-top: 2.0rem;
  }
  .logo {
    flex: 1;
  }

  .menu li.button a {
/*    padding: 20px 25px; */
/*    margin: 5px 0; */
  }
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
    font-size: var(--min-text-size);
    padding-bottom: 0rem;
  }
  .button {
    order: 2;
  }
  .toggle {
    display: none;
  }
  :root {
    --header-height: 50vw;
  }
}

:root {
  --scaler: clamp(0rem, calc( (100vw - 12.5rem) / 83.5), 1rem);
  --title-font: calc(1.3rem + 0.7 * var(--scaler));
  --menu-margin: calc(0.95rem + 2.9 * var(--scaler));
/*  --min-text-size: calc(1rem + 0.18 * var(--scaler));*/
}

/* .mytop needs to be in the CSS file that controls the specifics of the page because of the header-height var 
.mytop {
}
*/

.item {
  padding-top: calc(.65rem + .65 * var(--scaler));
}

.button {
  margin-top: -.1rem; /* calc(1rem + .3 * var(--scaler));*/
/*  margin-top: calc(.31rem + .06vw);*/
/*    margin-top: calc(.31rem + clamp(0rem, calc(.45 * (100vw - 60rem) / 62) , .45rem));*/
}

.toggle {
   padding-top: .2rem;
}

.logo {
  font-size: var(--title-font);
  font-weight: 500;
  margin-bottom: 0rem;
}

@property --_w {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vw;
}
@property --_h {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vh;
}
:root {
  --w: tan(atan2(var(--_w), 1px));
  --h: tan(atan2(var(--_h), 1px));
}
h2:after {
  content: counter(w) "x" counter(h);
  counter-reset: h var(--h) w var(--w);
}

/* ================================================================== */

.footer {
  background-color: var(--background3);
  color: var(--foreground3);
  padding-top: 2.5rem;
  padding-left: 4rem;
  padding-bottom: 2rem;
  font-size: var(--title-font);
  font-weight: 500;
}

.foot-box {
  display: flex;
  justify-content: space-between;
  padding-bottom: 4rem;
}

.bcolumn1 {
  display: flex;
  flex-direction: var(--bottomwrap);
  padding-left: 4rem;
}

.bcolumn2 {
  display: flex;
  flex-direction: var(--bottomwrap);
  justify-content: flex-end;
  padding-right: 4rem;
  font-size: var(--min-text-size);
}

.b-item-right {
  padding-right: 1px;
}

.b-item-left {
  padding-right: 3em;
}

a.bottom:link {
  background: var(--background3);
  color: var(--foreground3);
  text-decoration: underline;
  margin-left: 1rem;
  margin-right: 1rem;
}

a.bottom:visited {
  color: var(--background1);
  text-decoration: underline;
}

/*
a.bottom:hover {
  background-color: var(--background1);
  color: var(--foreground1);
  text-decoration: none;
}
*/

/* underline for top menu's current location */
.uline {
  text-decoration: underline;
  text-underline-offset: .5rem;
}