@font-face {
  font-family: Satoshi;
  src: url(./fonts/Satoshi-Bold\ kopie.ttf);
}

body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  background-color: gainsboro;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.website {
  position: fixed;
  top: 40%;
  left: 52%;
  width: 960px;
  height: 540px;
  overflow: hidden;
  transform: translate(-50%, -30%);
  z-index: 9999;
}

.website iframe {
  width: 1827px;
  height: 1030px;
  border: none;
  zoom: 0.5;
  transform-origin: top left;
}

/* TERUG KNOP */
.terug-knop {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  opacity: 20%;
  cursor: pointer;
}

/* --------------------------------------- */
/*                📱 TABLET                */
/* --------------------------------------- */
@media screen and (max-width: 1024px) {
  .website {
    position: fixed;
    top: 37%;
    left: 40%;
    width: 960px;
    height: 540px;
    overflow: hidden;
    transform: translate(-50%, -30%);
    z-index: 9999;
    scale: 80%;
  }
}

@media screen and (max-width: 768px) {
  .website {
    top: 30vh;
    left: 23vw;
    width: 350vw;
    scale: 55%;
  }
  .terug-knop {
    content: url("../assets/images/achtegrond\ mobile\ wit.webp");
  }
}