:host {
  --aspect-ratio: 60%;
  --body-color-dark: dimgrey;
  --body-color-light: rgb(236, 236, 236);
  display: block;
}

.screen-dark {
  position: relative;
  margin: 0 5%;
  width: 90%;
  padding-top: var(--aspect-ratio);
  background-color: dimgrey;
  border-radius: 2% / 4%;
  border-bottom-left-radius: 0% ;
  border-bottom-right-radius: 0% ;
}

.screen-light {
  position: relative;
  margin: 0 5%;
  width: 90%;
  padding-top: var(--aspect-ratio);
  background-color: rgb(153, 152, 152);
  border-radius: 2% / 4%;
  border-bottom-left-radius: 0% ;
  border-bottom-right-radius: 0% ;
}

.screen-area {
  position: absolute;
  top: 0%;
  margin: 2.5%;
  width: 95%;
  padding-top: var(--aspect-ratio);
  background-color: white;
  /* border-radius: 2% / 4%; */
}


.panel-dark {
  margin-top: -2%;
  position: relative;
  width: 100%;
  padding-top: 2%;
  background-color: dimgrey;
  border-radius: 2% / 50%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.panel-light {
  margin-top: -2%;
  position: relative;
  width: 100%;
  padding-top: 2%;
  background-color: rgb(153, 152, 152);
  border-radius: 2% / 50%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.emb-light {
  position: absolute;
  width: 10%;
  top: 0;
  padding-top: 1%;
  background-color: dimgrey;
  border-radius: 10% / 50%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.emb-dark {
  position: absolute;
  width: 10%;
  top: 0;
  padding-top: 1%;
  background-color: rgb(153, 152, 152);
  border-radius: 10% / 50%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.content{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}