* {
  margin: 0;
  font-family: 'kanit';
  user-select: none;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.nav-bar {
  width: fit-content;
}

ul {
  display: flex;
}

.app-window {
  background-color: #ffb703;
  border-radius: 5px 5px 5px 5px;
  padding: 5px;
  width: 1024px;
  height: 768px;
}

@media (max-width: 900px) {
  .app-window {
    -moz-transform: scale(0.5, 0.5); 
    -webkit-transform: scale(0.5, 0.5); 
    -o-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); 
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
  }
  .wrapper {
    box-sizing: border-box;
  }
}

@media (min-width: 901px) {
  .wrapper {
    margin: 0 auto;
    width: fit-content;
  }
}

ul {
  padding-left: 10px;
}

li {
  padding: 5px 20px;
  border-radius: 5px 5px 0 0;
  background-color: #ffb703;
  color: #000;
  font-weight: 400;
  text-align: center;
  list-style-type: none;
}

li:hover,
li:focus {
  background-color: #219ebc;
  cursor: pointer;
  color: #fff;
}

.active {
  background-color: #219ebc;
  color: #fff;
  cursor: pointer;
}

iframe {
  display: block;
  width: 1024px;
  height: 768px;
  border: none;
}