*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  color:#FFD700;
  background:#000;
}

body{
  cursor:pointer;
  position:relative;
  font-family: Vazirmatn, sans-serif;
}

.background-pic{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  background:#000 url('/images/background.webp') center/cover no-repeat;
}

.code-container{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.5);
  padding:20px;
  border-radius:12px;
  width:90%;
  max-width:900px;
  height:70%;
  overflow:hidden;
  z-index:5;
}

pre{
  margin:0;
  font-size:17px;
  line-height:1.6;
  white-space:pre-wrap;
  direction:rtl;
  height:100%;
  overflow-y:auto;
  text-align:justify;
  text-align-last:right;
  font-family: Vazirmatn, sans-serif;
}

pre::-webkit-scrollbar{
  display:none;
}

#startMessage{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:20px;
  line-height:2.1;
  text-align:center;
  color:#FFD700;
  z-index:10;
}

#menuContainer{
  position:relative;
  z-index:15;
}

@media(max-width:768px){
    .code-container{
        width:93%;
        max-width:340px;
        height:80%;
        padding:16px;
        touch-action:none;
        user-select:none;
    }

    pre{
        user-select:text;
        -webkit-overflow-scrolling:touch;
    }

    #startMessage{
        padding:0 10px;
    }
}