* {
  box-sizing: border-box;
}
:root{
  --unit: 12px;
  --screen-width: calc(var(--unit) * 45);
  --screen-height: calc(var(--screen-width) * 9/16);
  --lid-width: calc(var(--screen-width) + 2*var(--unit));
  --lid-height: calc(var(--screen-height) + 2*var(--unit));
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

.page {
  width: 100%;
  height: 100%;
  background-color: #222222;
  display: flex;
  flex-direction: column;
  gap: calc(2*var(--unit));
  justify-content: center;
  align-items: center;

}

.lid {
  width: var(--lid-width);
  height: var(--lid-height);
  border-radius: var(--unit);
  background-color: #c0c0c0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.base {
  height: calc(var(--unit) * 2);
  width: var(--lid-width);
  background-color: #c0c0c0;
  border-radius: var(--unit);
}

.screen {
  width: var(--screen-width);
  height: var(--screen-height);
  font-size: calc(var(--unit) * 1.5);
  border-radius: calc(var(--unit) * 0.5);
}

/* phone */
@media (max-width: 599px) {
  :root { --unit: 8px; }
}

/* tablet */
@media (min-width: 600px) and (max-width: 1023px) {
  :root { --unit: 10px; } /* change later if you want */
}

/* laptop */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root { --unit: 12px; }
}

/* desktop */
@media (min-width: 1440px) {
  :root { --unit: 15px; }
}