@CHARSET "UTF-8";
@font-face {
    font-family: 'MyFont';
    src: url('QumpellkaNo12.otf') format('opentype');
}

h1, h2, p, li, label {
    line-height: 1.5em;
}

h2, li {
    margin-top: 1.25em;
}

a:link, a:visited, a:hover a:active {
    text-decoration: inherit;
    color: inherit;
}

.link {
    text-decoration: underline !important;
}

/*
@media (min-width: 1024px) {
  :root {
    overflow: hidden;
  }
}
*/

:root {
    background-image: url('background.png');
    background-color: #0F4691;
    background-repeat: repeat-x;
    font-family: "MyFont";
    font-size: 16pt;
    font-weight: bold;
    color: #AE9B5BDE;
}

/* Page centering */
html,body {
  height:100%;
}
body {
  display:grid;
  place-items:center; /* center container horizontally & vertically */
}

/* Container: preserve exact 1000:738 aspect ratio, cap to viewport, keep background un-stretched */
#container {
  position:relative;
  width: min(95vw, calc(95vh * (1000 / 738))); /* fit within both width and height limits */
  aspect-ratio: 1000 / 738;
  max-height: 95vh;
  background-image: url('clefsheet.png');
  background-repeat: no-repeat;
  background-position: center;
  /* Important: use background-size: cover to fill container without changing aspect ratio of image.
     If your image exactly matches the design ratio and you want no cropping, use contain instead.
     For perfectly matching (no stretch and no crop) use: background-size: 100% 100%; only if image is same ratio.
     We'll use contain to avoid distortion and preserve whole image. */
  background-size: contain;
  box-sizing: border-box;
}

#menu {
  position:absolute;
  top: calc(39 / 738 * 100%);
  left: calc(160 / 1000 * 100%);
  width: calc(755 / 1000 * 100%);
  height: calc(51 / 738 * 100%);
}

.menuitem {
  height:100%;
  line-height:100%;
  float:left;
  width: calc(188 / 1000 * 100%);
  margin: 0 calc(6 / 1000 * 100%);
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}

.menuitem:hover {
    background-color: #E4DABC;
    color: #FFF8E8;
}

.menuitem:active {
    font-size: 90%;
}

#content {
  position:absolute;
  top:17.42%;
  left:11.5%;
  width:80.26%;
  height:72.65%;
  overflow:auto;
  color:#0F4691;
  padding: 0 2% 0 2%;
  box-sizing:border-box;
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 5%,
    rgba(0,0,0,1) 95%,
    rgba(0,0,0,0) 100%);
}

/*
#container {
    position: relative;
    width: 1000px;
    height: 738px;
    margin: auto;
    background-image: url('clefsheet.png');
    background-repeat: no-repeat;
    transform: scale(0.95);
}

#menu {
    position: absolute;
    top: 40px;
    left: 160px;
    width: 755px;
    height: 51px;
    font-size: 18pt;
}

.menuitem {
    width: 139px;
    height: 51px;
    line-height: 51px;
    float: left;
    margin: 0px 6px 0px 6px;
    text-align: center;
}

#content {
    padding-right: 1%;
    position: absolute;
    top: 148px;
    left: 130px;
    width: 774px;
    height: 496px;
    overflow: auto;
    color: #0F4691;
}
*/