html, body {
  font-family: Items text;
  font-size: 16pt;
    line-height: 130%;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "ss09";
  background-color: #FDFDFD;
}


/* Make the container fill the viewport */
.container {
  position: fixed; /* or absolute, but fixed is better for full-bleed */
  top: 0;
  left: 0;
  width: 100vw;  /* full viewport width */
  height: 100vh; /* full viewport height */
  overflow: hidden; /* hide any overflow */
  z-index: 2;
}

/* Each slide should fill the container */
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}



/* Make images fully cover the container */
img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps aspect ratio and fills container */
  object-position: center; /* center the image */
  display: block;
}



.top-right {
    position: fixed;
    right: 0.7em; top: 0.5em;
       color: white;
  mix-blend-mode: difference;
}

.top-left {
    position: fixed;
    left: 0.7em; top: 0.5em;
       color: white;
  mix-blend-mode: difference;
}

.bot-left {
    position: fixed;
    left: 0.7em; bottom: 0.5em;
       color: white;
  mix-blend-mode: difference;
}

.bot-right {
    position: fixed;
    right: 0.7em; bottom: 0.5em;
       color: white;
  mix-blend-mode: difference;
}

.information {
    position: fixed;
    right: 0.5em; top: 0.5em;
}

.caption {
    position: fixed;
    left: 0.5em; bottom: 0.5em;
}

.number {
    position: fixed;
    right: 0.5em; bottom: 0.5em;
    font-variant-numeric: tabular-nums;
    font-size: 11pt;
}



.left, .right {
    height: 100%;
    width: 50%;
    position: absolute;
    top: 0px;

}

.left {
 left: 0px;
    /*cursor: w-resize;*/
    cursor: url('Left-1.svg') 2 2, pointer;
    cursor: -webkit-image-set(url('Left-2.svg') 2x) 4 4, pointer;
}

.right {
    right: 0px;
    /*cursor: w-resize;*/
    cursor: url('Right-1.svg') 2 2, pointer;
    cursor: -webkit-image-set(url('Right-2.svg') 2x) 4 4, pointer;
}

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

a:hover {
text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.15em; /* moves it slightly away from text */
  color: white;

}

@font-face {
  font-family: Items text;
  src: url(ItemsText-Regular.woff);
}


@media screen and (max-width: 1000px) {
    body {
        font-size: 13pt;
    }

    .top-left {
    max-width: 70%;
}

    /*.container {
        width: 80%;

    }

    / .slide {
        width: 100%;
    } */

}

/* Responsive scaling: tweak font-size via media queries 
@media (max-width: 900px) {
  .frame-text text { font-size: 2px; }
}

@media (max-width: 600px) {
  .frame-text text { font-size: 1.8px; }
}