:root {
  --ibt-width: 2532;
  --ibt-height: 1802;
  --screen-width: 1920;
  --screen-height: 1080;
  --screen-ratio: calc(var(--screen-height)/var(--screen-width));
  --screen-ratio-height: calc(var(--screen-ratio) * 100%);
  --frame-diff-top: calc(242/var(--ibt-width) * 100%);
  --frame-diff-right: calc(232/var(--ibt-width) * 100%);
  --frame-diff-bottom: calc(386/var(--ibt-width) * 100%);
  --frame-diff-left: calc(227/var(--ibt-width) * 100%);
  --text-colour: white;
  --bg-colour: #597389;
}

html, body {
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

html {
  font-size: 100%;
}

body {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  background: var(--bg-colour);
  color: var(--text-colour);
  font-size: 2rem;
  line-height: 1.5;
}

.visually-hidden {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}


/* HOME */

.home {
  padding: 2rem;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-weight: bold;
  margin: 0.5em 0 1em;
  font-size: 2.5rem;
}

ul {
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul li {
  margin: 0 2rem;
}

ul a {
  color: var(--text-colour);
  padding: 0.35em 0.55em 0.5em;
  border: solid 0.1em transparent;
  border-radius: 0.25em;
  transition: border 150ms;
}

ul a:hover,
ul a:focus {
  border-color: inherit;
}


/* DEMO */

.demo {
  min-height: 100vh;
}

.ibt-container {
  width: 95vw;
  max-width: 1800px;
  margin: 0 auto;
}

.ibt {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: var(--frame-diff-top) var(--frame-diff-right) var(--frame-diff-bottom) var(--frame-diff-left);
  z-index: 0;
}

.frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-size: 100%;
  background-repeat: no-repeat;
}

[lang="en"] .frame {
  background-image: url('./ibt-frame-en.jpg');
}

[lang="fr"] .frame {
  background-image: url('./ibt-frame-fr.jpg');
}

.screen {
  width: 100%;
  padding-top: var(--screen-ratio-height);
  position: relative;
  z-index: 2;
}

.screen > .loading,
.screen > iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.screen > .loading {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.screen > iframe {
  display: block;
  z-index: 5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25) inset;
  transform: scale(1, 1.007);
  transform-origin: 0 0;
}