html, body {
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: hidden;
  }
  video {
    display: none;
  }


  body{
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
  }

  .screenElement {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 555px;
    border: 5px solid black;
    overflow: hidden;
    background-color: #A18DB2;
    z-index: 0;
    scale: 1.2;
  }

  .screenElement canvas {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
    height: 100%;    
    z-index: -10;
    gap: 10px;
    z-index: 1;
  }

  .languageSelectors {
    width: 375px;
    height: 530px;
    position: absolute;
    display: flex;
    align-items: end;
    justify-content: space-between;
    z-index: 2;
  }

.hoverButton {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 37px;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    z-index: 2;
}

  .hoverButton[data-id="1"] {
    background-image: url('./IMG/Dutch.png');
    width: 20%;
  }
  
  .hoverButton[data-id="2"] {
    background-image: url('./IMG/English.png');
    width: 20%;
  }
  
  .hoverButton[data-id="3"] {
    background-image: url('./IMG/Arabic.png');
    width: 20%;
  }


  .popUpNotification {
    width: 375px;
    height: 530px;
    position: absolute;
    display: none;
    align-items: start;
    justify-content: center;
    z-index: 2;
  }

  .popUpNotificationText {
    margin: 0px;
    width: 375px;
    height: 50px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FF804D;
    border-radius: 8px;
  }


  .items {
    width: 375px;
    height: 530px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;

  }

  .items button {
    background-color: #E0E0E0;
    border-radius: 100px;
    width: 30px;
    height: 30px;
  }

  .itemContent {
    width: 275px;
    height: 380px;
    background-color: rgba(134, 136, 185, 0.75);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .itemContent img{
    width: 100%;
    opacity: 75%;
    border-radius: 8px;
  }

  .explainer {
    width: 396px;
    height: 555px;
    position: absolute;
    display: flex;
    align-items: start;
    justify-content: right;
    z-index: 2;
  }

  .explainer img {
    width: 40%;
    height: 88px;
    object-fit: cover;
    object-position: 0% 16%;
    }

  @media (max-width: 768px) {
    .screenElement {
        scale: 1;
    }
    body {
        margin-top: 20px;
        align-items: start;
    }
  }